angular UI bootstrap popup datepicker combined with ui.mask - datepicker

I am using the angular UI bootstrap popup datepicker like the example here :
http://angular-ui.github.io/bootstrap/#/datepicker
When i combine this with the uiMask Directive ( http://angular-ui.github.io/ui-utils/) the values in the input get scrambled when i pick a date.
I suspect because of the difference in type on the angular model : datepicker wants JS Date object/ ui.mask wants (masked) string.
When the picked date gets formatted/parsed by uiMask, it goes wrong :-/
Is what i am trying to do even possible ?
kind regards, Tom.

Related

Vue 3 Datepicker update as user types

I am using Vue3Datepicker in our project (Composition Api).
What I am trying to do is to give the users ability to type in any format. e.g. if the user types in any of the following, it can parse it to 2nd Feb 2022:
02/02/2022
02-02-2022
02.02.2022
I have checked different events of the datepicker but couldn't find one that triggers while user is typing. most of the events are for when the model has been updated, which in this case if the format is for example DD/MM/YYYY, typing 02.02.2022 doesn't update the model so that is not hit at all.
import Datepicker from '#vuepic/vue-datepicker';
<Datepicker v-model="props.modelValue"
format="dd/MM/yyyy"
autoApply
textInput
:enableTimePicker="false" />
Any help is appreciated.

Ng Bootstrap DatePicker , show next month instead of current

I am using ng bootstrap datepicker to set up a calendar.
But my requirement is, instead of the calendar to display the current Month as it does. I need it to display the next Month..i.e January.
I read through the documentation and I can't seem to find a way to customize this.
Is there a way to do this ?
To change the default of the month being displayed ?
It's a basic datepicker :
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

X-Editable Datepicker / Bootstrap 2 not using default date

This is specifically about x-editable with bootstrap 2.3.2 http://vitalets.github.io/x-editable/
The x-editable selector class is 'xedit'
<strong>01/01/1970</strong>
This code opens the popup datepicker OK, but it doesn't read / use the default value 01/01/1970. Using data-value="01/01/1970" doesn't help either, nor removing the <strong> tags. Once a new date is selected / set, it works fine.
Anyone experienced similar / can suggest why this doesn't work ?
TIA
The <strong> tags do make a difference. Put them outside of your <a> tags. Also, update either your value 01/01/1970 to 01/1/1970 to reflect your data-format and data-viewformat or vice versa.

JQuery Mobile/Datebox, difference between display date format and submit date format

Is there a way to display a date in an input different from the format I want to submit.
For example I have to submit a date in "yyyy-mm-dd" format but I want to display the date in another format : "dd/mm/yyyy" (french display).
Is there a good tip to do that with Datebox for jQuery Mobile (an option I didn't see ?)
I think I have to cheat in creating an input hidden with the good form format and another one with the format to display (and not submitted), but maybe a better solution exists.
Any ideas ?
Your best bet is to indeed use 2 inputs - but, it's pretty easy to do, and using a callback on the set event, you can even make datebox do the second format for you.
http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html
(Note: I just added the demo, so you didn't miss it earlier)
Just a small addition
It should be "overrideDateFormat":"%d/%m/%Y" in the HTML inline options.
In http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html it states "dateFormatOverride":"%d/%m/%Y"} however this is incorrect and doesn't work. Just a heads up for anyone else with this issue.
Yes you need to use this method.
<!-- fix american date formatting -->
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%d/%m/%Y',
'overrideHeaderFormat': '%d/%m/%Y'
});
</script>

Populating some fields after selecting the element using Struts2-Dojo autocompleter

I am using sx tag i.e. struts-dojo-tag of struts 2 to autosuggest one field on one page. It is working fine. Now I want to populate other fields on the same page based on the selection of autosuggest field. I tried calling javascript on the above field on various events like onselect, onchange,etc with no success.
JSP code :
<sx:autocompleter autoComplete="true" listKey="id" listValue="brandName" name="brand.brandName" id="brandName" cssClass="textfield" list="brandList" onchange="populateInfo(this.value);"></sx:autocompleter>
here I want to autosuggest brandNames available and on selecting the brand, I want to populate data regarding the brand in some others fields. I tried calling java script function populateInfo(), but the function is not getting called.
Can you please help me out?
I think this problem can be solved by using select tag of struts2-jquery.
You can have a look in these showcase