How to change flipbox popup display in jQuery-mobile-datebox mm-dd-yyyy format to dd-mm-yyyy

Question

I am trying to change the display order of the jQuery-mobile-datebox flipbox, but I could not find any option for it. I am trying to do this through jquery, but still think there might be an option in flipbox.

Below are images for reference.

Below the image, a default popup is displayed.

I need a date popup | month | year as shown in red frame

I hope someone helps me with this!

Answer 1

I think the Killrawr method is a good way, but I saw in my case the correct "override" field name: there was "overrideDateFieldOrder" instead of "fieldsOrderOverride". I am using the latest date.

If you look at a few key / fields in "i18n", you will see a key called "DateFieldOrder", so because I already used some method of redefinition by prefixing the key by redefining, it seems to work well.

So, in my case, when I did this:

jQuery.extend(jQuery.mobile.datebox.prototype.options, { 'overrideDateFieldOrder': ['d','m','y'] }); 

It works well.

Another way is also:

 $('#mydate').data("options", {"overrideDateFieldOrder": ["d", "m", "y"]}); 

Or the best in your case, I think:

  <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"overrideDateFieldOrder":["d", "m", "y"]}' /> 

Note: The use of "and" in this last line is important. Tag

data-option='{"overrideDateFieldOrder":["d", "m", "y"]}'

works well, but not something like

data-option="{'overrideDateFieldOrder':['d','m','y']}"

does not work.

Hello,

Answer 2

I assume you are using this DatePicker . In this case, you looked at all the parameters , i.e. ['m','d','y']

 fieldsOrderOverride Type: Array Default: Inherited Modes: time/date/flip/slide Override the i8n fields order. Option is an array of three items, for 24 clock mode 'a' is ignored. ie ['m','d','y'] Valid options: y : Year m : Month d : Day of Month (date) h : Hour i : Minute a : Meridiem 

Implementation (Sourced here )

 <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "timebox", "fieldsOrderOverride": "dmy" }'> 

Answer 3

try the following:

 <input name="mydate" id="mydate" type="date" data-role="datebox" data-options="{\"mode\":\"calbox\",\"fieldsOrderOverride\": [\"d\",\"m\",\"y\"],\"headerFormat\":\"%A,%d, %-m, %Y\",\"dateFormat\":\"dd/mm/YYYY\",\"useTodayButton\":true}"> 

Answer 4

If you are using datebox Jquery mobile datebox , my answer will be helpful.

My html listed below

 <input type="text" name="scheduled_date" id="date-value" data-role="datebox" data-options='{"mode":"datebox","afterToday":"true","overrideDateFormat":"%d-%m-%Y","useFocus":true,"overrideDateFieldOrder": "dmy"}' placeholder="Date here"> 

overrideDateFieldOrder ":" dmy "is the attribute that I used to fix the same problem.

the following link will be useful

http://dev.jtsage.com/jQM-DateBox/api/dateFieldOrder/