Question

I have a very simple html page with the following javascript in it

$(function() {
    $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true
    });
    $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );        
});

Then I have the input target element

<input id="datepicker" type="text" class="boxtpl" name="${field.name}" value="${release?.startDate}">

and I see the html of the input from viewing source is valid…

<input id="datepicker" type="text" class="boxtpl" name="release.startDate" value="2012-02-07">

so when I do the GET request to get this page, my date ONLY renders if I delete that last line in the javascript that sets the format WHICH is very important as that is the format I have playframework configured for!!!!! If I don’t set the format, the POST then breaks because formats don’t match 🙁

Why is setting the format of datepicker clearing out my date????

I can try scripting more to set it manually though I tried calling the api to set it and that DID NOT work so it might not work doing raw javascript set either…not sure yet. anyone know why this occurs or better yet how to fix it???

thanks,
Dean

Answer 1

Not sure if it’s a bug in jquery ui, but it seems that setting the format effectively deletes the default value. You can fix this with a chained

.datepicker("setDate", datepicker_default_val );

However, what I did in my web app was define a CSS class “.datepicker” then writing this code snippet provide date pickers to any with that class.

 $( ".datepicker" ).each( function(index){
          var datepicker_default_val = $(this).val();
          $( this ).datepicker({numberOfMonths: 3, showButtonPanel: true});
          $( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
          $( this ).datepicker("setDate", datepicker_default_val );
      });

What this does is grabs every element with the tagged class, saves the default value to local var datepicker_default_val, sets the formatting, and then restores the value.

Little bit of a hack but put that in a $(document).ready(function(){ }); block and you should be good.