收录日期:2020/10/28 09:51:46 时间:2010-09-07 01:43:55 标签:jquery-ui,jquery-ui-datepicker

Currently this code is working but not as expected:

$("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        onSelect: function(_date, _datepicker)
        {
            var myDate = new Date(_date);
            myDate.setDate(myDate.getDate()+8);
            $('#estimated_hatching_date').text(myDate);
            alert( myDate);       
        }

        });

The first issue is, how the date is presented. Currently that code above alerts Fri Oct 01 2010 17:00:00 GMT-0700 (Pacific Daylight Time). I would like the output to be just the date, for example, 09/06/2010.

The second issue is, $('#estimated_hatching_date').text(myDate); does not change the text. When that code is fired nothing is changed. However if I do: $('#estimated_hatching_date').text('myDate'); myDate is placed into the #estimated_hatching_date div.

So, how do I just output the date and replace the "text" inside of #estimated_hatching_date div with just the date +7 days from when a date is selected?

Thank You, Rich

jQuery UI Datepicker has a built in formatDate function. Please @dottedquad, don't use your self-made version, date math and formatting is harder than you imagine. The corner cases will make you tear your hair out.

onSelect: function(_date, _datepicker) {
    var myDate = new Date(_date);
    var myText = $.datepicker.formatDate('dd-mm-yy',myDate);
    alert(myText);
}

I read over the ui datepicker manual again and figured it out.

    $("#start_date").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(_date, _datepicker)
    {
        var myDate = new Date(_date);
        myDate.setDate(myDate.getDate()+8);
        var fullYear = myDate.getFullYear();
        var month = ((myDate.getMonth()+1) < 10) ? ('0' + (myDate.getMonth()+1)) : myDate.getMonth()+1;
        var day = (myDate.getDate() < 10) ? ('0' + myDate.getDate()) : myDate.getDate();
        var myNewDate = fullYear + '-' + day + '-' + month;

        $('#estimated_hatching_date').text(myNewDate);
        alert(myNewDate);
    }
    });

That code works as expected. Anyone else have any more ideas that would get that job done differently?

-Thank You, Rich

I had the same problem and used "altField" option with a hidden input. Hidden input's value is always formatted according to "dateFormat"