在Jquery UI datepicker字段中从数据库预过滤日期

Question

I have an edit form, where the values are populated from the database. I have one date field in the format yyyy-mm-dd . I have setup the jQuery Datepicker and its working on the date field, however, when the form first loads, the date field is empty even though the input type has a value from the database, when I checked the HTML source.

How can I make my date field display the date from the database?

EDIT:

I want my input values to be visible in the text field rather than grabbing the values from database and again inserting it into a jQuery/javascript variable/function(default date, showbefore what not).

What can I do to disable datepicker from hiding my values in the first place? and only replace the values if I click and choose a date.

HTML Code:

<input type="text" id="date" name="reg_date" value="2012-01-30" />

The actual code is in PHP where the value is being retrieved from database and inserted in the value field. The values are correctly generated and inserted because I verified it by looking at the HTML source in firefox.

Datepicker setting:

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

Answer 1

Datepicker is over-writing value. I would suggest you trigger datepicker when focused on date field.

Answer 2

You need to set the default date in the datepicker settings code.

Example: $( ".selector" ).datepicker({ defaultDate: +7 }); to set the default date as 7 days from now.

True story.

Answer 3

change for this:

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

if your browser has cached ... press CTRL + F5

Answer 4

Well, now you have posted your code it is very obvious.

Your database date format is YYYY-MM-DD Your jQuery UI format is yy-mm-dd See what's wrong? Your missing at least 2 digits of the year.

To fix this, simply enter the correct format in your code.

Example:

$( "#date" ).datepicker({ dateFormat: "dd-MM-yyyy" });
$( "#date" ).datepicker( "option", "dateFormat", "dd-MM-yyyy" );