jQuery UI datepicker - can I format a date that has been localized?

Question

I have a jQuery UI datepicker and I am looking to localize the date returned and then format it to remove the leading zeros.

It seems I can do either one or the other. Is there a way to both localize and format it?

My example code:

//  myDate = 01/25/2010
//  myLanguage = "";  //for US english, but could be any language 

$('#mytxtbox').datepicker($.datepicker.regional['<%= mylanguage %>']);
$('#mytxtbox').datepicker({ dateFormat: 'm/d/yy' });

var dateToSet = $.datepicker.parseDate('m/d/yy', '<%= myDate %>');     
$('#mytxtbox').datepicker("setDate", dateToSet);

in the above example the date that gets displayed in my text box is "01/25/2010". If I comment out the line that sets the region, the formatting works (i.e. 1/25/2010). It seems to me that the localization is overwriting my "dateFormat"? Is it possible to do both?

Please note, I have included all appropriate region files

score 1 · Answer 1 · answered Aug 07 '13 at 21:33

1

I ran into the same problem. My solution: (regional settings are in an array, simply add some values)

var defaults = $.datepicker.regional['<%= mylanguage %>'];
defaults['dateFormat'] = 'm/d/yy';
$( "#mytxtbox" ).datepicker( defaults );

answered Aug 07 '13 at 21:33

steve

615
6
14

score 0 · Answer 2 · answered Jun 03 '14 at 14:01

if you are doing a regional and beforeShow or any other function like it, you could it like this all in one:

$("#mytxtbox").datepicker({dateFormat: 'dd-mm-y'},
    $.datepicker.regional[ "ar" ],
            {
                beforeShow: function(input, inst) {
                    var widget = $(inst).datepicker('widget');
                    widget.css('margin-left', $(input).outerWidth() - widget.outerWidth());
                }
            });

score 0 · Answer 3 · answered May 27 '16 at 08:32

Maybe too late but, as I did some Google research and I came here, I post my solution. I guess you have an input type for the datepicker, such as :

<input id="date" type="text" name="date">

If you want to set a locale language according to your visitors and a predefined date format for further traitment, you can initiate your datepicker as follow:

      $(function() {
          $('#date').datepicker();
    $('#date').datepicker("option",$.datepicker.regional["<<your_variable_locale>>"]);
    $('#date').datepicker("option","dateFormat","dd/mm/yy");
});

It will change the english default format, i.e mm/dd/yy.

The documentation is not very clear about how to combine options like regional and date format but it works for me on Firefox.

score 0 · Answer 4 · answered Dec 10 '10 at 15:47

setDate accepts a Date object as the parameter which is region independent.

Sets the current date for the datepicker. The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.

score 0 · Answer 5 · edited Aug 22 '11 at 14:47

I believe this is because you have already initialized the datepicker with the localization as the only option. If you do not want the region to be dynamic or want to set the intial state of the datepicker, try passing both of the options in one options object.

$("#mytxtbox")
  .datepicker({ 
    dateFormat: 'm/d/yy',  
    $.datepicker.regional['<%= mylanguage %>']
  });

OR if you want it to be dynamic do something similar to the jQuery ui example.

Try formatting the date first THEN setting the regional option.

//original initialization
$("#mytxtbox").datepicker({dateFormat: 'm/d/yy'});
//then set localize the date based on a change function
$("ul.region").change({
 $("mytxtbox").datepicker('option', $.datepicker.regional[$(this).val()]);
});

The first option results in invalid syntax. The second one doesn't take the format into account — Boris Callens, Aug 22 '11 at 14:40

jQuery UI datepicker - can I format a date that has been localized?

5 Answers5