Question

我为日期选择创建了一个jQuery日期选择器。我正在使用

显示自定义

$("#datepicker").datepicker({
    onSelect: function (dateText, inst) {
        var date = $('#datepicker').datepicker('getDate');
        date.setDate(date.getDate() + 6);
        $('#datepicker').val('Week: ' + dateText + " to " + $.datepicker.formatDate('mm/dd/yy', date));
    }
}).attr('readonly', 'readonly');

选择日期后会显示自定义文本，但如果我重新打开日期选择器，则不会突出显示所选日期。我想突出显示所选日期：jsFiddle。

Answer 1

您可以使用beforeShow功能重置值，如此

 $("#datepicker").datepicker({
     onSelect: function (dateText, inst) {
         var date = $('#datepicker').datepicker('getDate');
         date.setDate(date.getDate() + 6);
         $('#datepicker').val('Week: ' + dateText + " to " + $.datepicker.formatDate('mm/dd/yy', date));
     },
     beforeShow: function(input, inst) {
         if($(input).val().length > 0) {
             var ar = $(input).val().match('[0-9]{2}/[0-9]{2}/[0-9]{4}');
             $('#datepicker').datepicker('setDate',new Date(ar[0]));
         }
     }
 }).attr('readonly', 'readonly');

fiddle

Answer 2

上面的代码工作正常，但双击日期时问题不起作用。所以我自定义了代码。

$(document).ready(function () {
        $(function () {
            var dateData, isOnSelectFired = 0;
            $("#txtReportDate").datepicker({
                dateFormat: "mm/dd/yy", changeMonth: true, changeYear: true//, maxDate: new Date($("#hdnMaxDate").val()),
                , beforeShow: function (input, inst) {
                    isOnSelectFired = 0;
                    dateData = $(input).val();
                    if ($(input).val().length > 0) {
                        var ar = $(input).val().match('[0-9]{2}/[0-9]{2}/[0-9]{4}');
                        $(input).datepicker('setDate', new Date(ar[0]));
                    }
                },
                onSelect: function (dateText, inst) {
                    isOnSelectFired = 1;
                    var date = $('#txtReportDate').datepicker('getDate');
                    date.setDate(date.getDate() + 6);
                    $('#txtReportDate').val('Week: ' + dateText + " to " + $.datepicker.formatDate('mm/dd/yy', date));
                },
                onClose: function (dateText, inst) {
                    if (isOnSelectFired != 1) {
                        $('#txtReportDate').val(dateData);
                    }
                }
            }).attr('readonly', 'readonly');
        });
   });
});

jsFiddle

如何在jquery datepicker中显示自定义文本而不会丢失现有功能

2 个答案: