jQuery DatePicker 问题：设置当前日期

jQuery DatePicker Issue: Set current date

提问by Varun

The datepicker setDatemethod, as described hereis not working as expected.

此处setDate描述的 datepicker方法未按预期工作。

The datepicker is always taking browsers current date. But I want to
set the current date of my choice.

日期选择器始终采用浏览器的当前日期。但我想
设置我选择的当前日期。

$(target).datepicker({ 
        dateFormat: $.datepicker.W3C, 
        closeText: 'X' 
}); 
//set the current date 
$(target).datepicker('setDate', currentDateObj); 
//checking the current date. 
alert($(target).datepicker('getDate'));

...where currentDateObjis a javascript date object containing date 1st August 2009.

...哪里currentDateObj是包含日期 2009 年 8 月 1 日的 javascript 日期对象。

When I alert the "getDate" it alerts 1st august 2009, but when I open the datepicker it displays the browsers current date ie. 31st august 2009 .

当我提醒“getDate”时，它会提醒 2009 年 8 月 1 日，但是当我打开日期选择器时，它会显示浏览器的当前日期，即。2009 年 8 月 31 日。

回答by kalps - think-1st.com

You can use datepicker's setDate function to set current date.

您可以使用 datepicker 的 setDate 函数来设置当前日期。

You can create a date from Date object like

您可以从 Date 对象创建一个日期，例如

var myDate = new Date(1978,2,11)

and using setDate from datepicker you can set myDate as current date in datepicker like

并使用 datepicker 中的 setDate 您可以将 myDate 设置为 datepicker 中的当前日期，例如

$(target).datepicker('setDate', myDate); 

Thats it! ;)

就是这样！;)

good luck!

祝你好运！

回答by Virendra

You should use the default date option to set the datepicker's date. http://jqueryui.com/demos/datepicker/#option-defaultDate

您应该使用默认日期选项来设置日期选择器的日期。http://jqueryui.com/demos/datepicker/#option-defaultDate

If you want the today as the date to be set, then you don't need to add this option as by default it automatically selects today.

如果您希望将今天设置为日期，则无需添加此选项，因为默认情况下它会自动选择今天。

回答by Rodrigo Couto

You can extend the generation of HTML default of datePicker plugin before set today date with your choice this way:

您可以通过以下方式在设置今天日期之前扩展 datePicker 插件的 HTML 默认生成：

    $.extend(
    $.datepicker,
    {
        _generateHTML:
            function (inst) {
                if (!inst.dpuuid) {
                    for (attr in window) {
                        if (/^DP_jQuery_/.test(attr)) {
                            inst.dpuuid = attr.replace(/^DP_jQuery_([0-9]+)/, '');
                        }
                    }
                }
                var dpuuid = inst.dpuuid;
                //Set your date also call your function, the choice is yours :)
                var today = YOUR_CHOICE_DATE;
                today = this._daylightSavingAdjust(
                    new Date(today.getFullYear(), today.getMonth(), today.getDate())); // clear time
                var isRTL = this._get(inst, 'isRTL');
                var showButtonPanel = this._get(inst, 'showButtonPanel');
                var hideIfNoPrevNext = this._get(inst, 'hideIfNoPrevNext');
                var navigationAsDateFormat = this._get(inst, 'navigationAsDateFormat');
                var numMonths = this._getNumberOfMonths(inst);
                var showCurrentAtPos = this._get(inst, 'showCurrentAtPos');
                var stepMonths = this._get(inst, 'stepMonths');
                var isMultiMonth = (numMonths[0] != 1 || numMonths[1] != 1);
                var currentDate = this._daylightSavingAdjust((!inst.currentDay ? new Date(9999, 9, 9) :
                    new Date(inst.currentYear, inst.currentMonth, inst.currentDay)));
                var minDate = this._getMinMaxDate(inst, 'min');
                var maxDate = this._getMinMaxDate(inst, 'max');
                var drawMonth = inst.drawMonth - showCurrentAtPos;
                var drawYear = inst.drawYear;
                if (drawMonth < 0) {
                    drawMonth += 12;
                    drawYear--;
                }
                if (maxDate) {
                    var maxDraw = this._daylightSavingAdjust(new Date(maxDate.getFullYear(),
                        maxDate.getMonth() - (numMonths[0] * numMonths[1]) + 1, maxDate.getDate()));
                    maxDraw = (minDate && maxDraw < minDate ? minDate : maxDraw);
                    while (this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1)) > maxDraw) {
                        drawMonth--;
                        if (drawMonth < 0) {
                            drawMonth = 11;
                            drawYear--;
                        }
                    }
                }
                inst.drawMonth = drawMonth;
                inst.drawYear = drawYear;
                var prevText = this._get(inst, 'prevText');
                prevText = (!navigationAsDateFormat ? prevText : this.formatDate(prevText,
                    this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)),
                    this._getFormatConfig(inst)));
                var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ?
                    '<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_' + dpuuid +
                    '.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepMonths + ', \'M\');"' +
                    ' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>' :
                    (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>'));
                var nextText = this._get(inst, 'nextText');
                nextText = (!navigationAsDateFormat ? nextText : this.formatDate(nextText,
                    this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)),
                    this._getFormatConfig(inst)));
                var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ?
                    '<a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_' + dpuuid +
                    '.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepMonths + ', \'M\');"' +
                    ' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>' :
                    (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>'));
                var currentText = this._get(inst, 'currentText');
                var gotoDate = (this._get(inst, 'gotoCurrent') && inst.currentDay ? currentDate : today);
                currentText = (!navigationAsDateFormat ? currentText :
                    this.formatDate(currentText, gotoDate, this._getFormatConfig(inst)));
                var controls = (!inst.inline ? '<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" onclick="DP_jQuery_' + dpuuid +
                    '.datepicker._hideDatepicker();">' + this._get(inst, 'closeText') + '</button>' : '');
                var buttonPanel = (showButtonPanel) ? '<div class="ui-datepicker-buttonpane ui-widget-content">' + (isRTL ? controls : '') +
                    (this._isInRange(inst, gotoDate) ? '<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" onclick="DP_jQuery_' + dpuuid +
                    '.datepicker._gotoToday(\'#' + inst.id + '\');"' +
                    '>' + currentText + '</button>' : '') + (isRTL ? '' : controls) + '</div>' : '';
                var firstDay = parseInt(this._get(inst, 'firstDay'), 10);
                firstDay = (isNaN(firstDay) ? 0 : firstDay);
                var showWeek = this._get(inst, 'showWeek');
                var dayNames = this._get(inst, 'dayNames');
                var dayNamesShort = this._get(inst, 'dayNamesShort');
                var dayNamesMin = this._get(inst, 'dayNamesMin');
                var monthNames = this._get(inst, 'monthNames');
                var monthNamesShort = this._get(inst, 'monthNamesShort');
                var beforeShowDay = this._get(inst, 'beforeShowDay');
                var showOtherMonths = this._get(inst, 'showOtherMonths');
                var selectOtherMonths = this._get(inst, 'selectOtherMonths');
                var calculateWeek = this._get(inst, 'calculateWeek') || this.iso8601Week;
                var defaultDate = this._getDefaultDate(inst);
                var html = '';
                for (var row = 0; row < numMonths[0]; row++) {
                    var group = '';
                    for (var col = 0; col < numMonths[1]; col++) {
                        var selectedDate = this._daylightSavingAdjust(new Date(inst.currentYear, inst.currentMonth, inst.selectedDay));
                        var cornerClass = ' ui-corner-all';
                        var calender = '';
                        if (isMultiMonth) {
                            calender += '<div class="ui-datepicker-group';
                            if (numMonths[1] > 1)
                                switch (col) {
                                case 0: calender += ' ui-datepicker-group-first';
                                    cornerClass = ' ui-corner-' + (isRTL ? 'right' : 'left'); break;
                                case numMonths[1] - 1: calender += ' ui-datepicker-group-last';
                                    cornerClass = ' ui-corner-' + (isRTL ? 'left' : 'right'); break;
                                default: calender += ' ui-datepicker-group-middle'; cornerClass = ''; break;
                            }
                            calender += '">';
                        }
                        calender += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix' + cornerClass + '">' +
                            (/all|left/.test(cornerClass) && row == 0 ? (isRTL ? next : prev) : '') +
                            (/all|right/.test(cornerClass) && row == 0 ? (isRTL ? prev : next) : '') +
                            this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
                            row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
                            '</div><table class="ui-datepicker-calendar"><thead>' +
                            '<tr>';
                        var thead = (showWeek ? '<th class="ui-datepicker-week-col">' + this._get(inst, 'weekHeader') + '</th>' : '');
                        for (var dow = 0; dow < 7; dow++) { // days of the week
                            var day = (dow + firstDay) % 7;
                            thead += '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' +
                                '<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>';
                        }
                        calender += thead + '</tr></thead><tbody>';
                        var daysInMonth = this._getDaysInMonth(drawYear, drawMonth);
                        if (drawYear == inst.selectedYear && drawMonth == inst.selectedMonth)
                            inst.selectedDay = Math.min(inst.selectedDay, daysInMonth);
                        var leadDays = (this._getFirstDayOfMonth(drawYear, drawMonth) - firstDay + 7) % 7;
                        var numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth) / 7)); // calculate the number of rows to generate
                        var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays));
                        for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows
                            calender += '<tr>';
                            var tbody = (!showWeek ? '' : '<td class="ui-datepicker-week-col">' +
                                this._get(inst, 'calculateWeek')(printDate) + '</td>');
                            for (var dow = 0; dow < 7; dow++) { // create date picker days
                                var daySettings = (beforeShowDay ?
                                    beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']);
                                var otherMonth = (printDate.getMonth() != drawMonth);
                                var unselectable = (otherMonth && !selectOtherMonths) || !daySettings[0] ||
                                    (minDate && printDate < minDate) || (maxDate && printDate > maxDate);
                                tbody += '<td class="' +
                                    ((dow + firstDay + 6) % 7 >= 5 ? ' ui-datepicker-week-end' : '') + // highlight weekends
                                    (otherMonth ? ' ui-datepicker-other-month' : '') + // highlight days from other months
                                    ((printDate.getTime() == selectedDate.getTime() && drawMonth == inst.selectedMonth && inst._keyEvent) || // user pressed key
                                    (defaultDate.getTime() == printDate.getTime() && defaultDate.getTime() == selectedDate.getTime()) ?
                                // or defaultDate is current printedDate and defaultDate is selectedDate
                                    ' ' + this._dayOverClass : '') + // highlight selected day
                                    (unselectable ? ' ' + this._unselectableClass + ' ui-state-disabled' : '') +  // highlight unselectable days
                                    (otherMonth && !showOtherMonths ? '' : ' ' + daySettings[1] + // highlight custom dates
                                    (printDate.getTime() == currentDate.getTime() ? ' ' + this._currentClass : '') + // highlight selected day
                                    (printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + // highlight today (if different)
                                    ((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title
                                    (unselectable ? '' : ' onclick="DP_jQuery_' + dpuuid + '.datepicker._selectDay(\'#' +
                                    inst.id + '\',' + printDate.getMonth() + ',' + printDate.getFullYear() + ', this);return false;"') + '>' + // actions
                                    (otherMonth && !showOtherMonths ? '&#xa0;' : // display for other months
                                    (unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' +
                                    (printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
                                    (printDate.getTime() == selectedDate.getTime() ? ' ui-state-active' : '') + // highlight selected day
                                    (otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months
                                    '" href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display selectable date
                                printDate.setDate(printDate.getDate() + 1);
                                printDate = this._daylightSavingAdjust(printDate);
                            }
                            calender += tbody + '</tr>';
                        }
                        drawMonth++;
                        if (drawMonth > 11) {
                            drawMonth = 0;
                            drawYear++;
                        }
                        calender += '</tbody></table>' + (isMultiMonth ? '</div>' +
                                    ((numMonths[0] > 0 && col == numMonths[1] - 1) ? '<div class="ui-datepicker-row-break"></div>' : '') : '');
                        group += calender;
                    }
                    html += group;
                }
                html += buttonPanel + ($.browser.msie && parseInt($.browser.version, 10) < 7 && !inst.inline ?
                    '<iframe src="javascript:false;" class="ui-datepicker-cover" frameborder="0"></iframe>' : '');
                inst._keyEvent = false;
                return html;
            }
    }
);

回答by funktioneer

Have a try on this

试试这个

$('.selector').datepicker('option', 'defaultDate', YourDateObj);

If this don't work, try to get the date object by js

如果这不起作用，请尝试通过js获取日期对象

YourDateObj = new Date ('year','month','day');

回答by VinnyG

You have to do this this way :

你必须这样做：

$('#txtDate').datepicker().datepicker('setDate', 'today');

回答by Dmitriy

They have not added this feature yet and there are some old tickets for that on http://bugs.jqueryui.comYou can modify your datepicker library with applying patch that is attached there: UI datepicker's defaultDate UI is confusing - please add some kind of todayDate option

他们尚未添加此功能，并且在http://bugs.jqueryui.com上有一些旧票 您可以使用附加的补丁修改日期选择器库： UI datepicker's defaultDate UI 令人困惑 - 请添加某种今日日期选项

Once you did it you should be able to apply "todayDate" option. It worked for me.

完成后，您应该能够应用“todayDate”选项。它对我有用。