jQuery DatePicker:单击“今天"然后单击“完成"时，不会保留今天的日期 [英] jQuery DatePicker: When clicking on Today and then Done, today's date is not preserved

问题描述

使用日期选择器时，当我单击今天"按钮时，今天的日期将显示在日期选择器中.但是，当我单击完成"按钮时，今天的日期不会显示在该字段中.目前，我必须实际点击日期(即今天->选择日期).我希望单击今日"->完成".

如何单击日期字段，单击今天"按钮，然后单击完成"按钮，并在日期字段中反映今天的日期?

更新:

以下是我正在尝试的内容.请原谅-我是jQuery/javascript的新手.

$(document).ready(function () {
        $(".datePicker").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy-mm-dd",
            yearRange: 2000:c+1,
            showButtonPanel: true,                       
            @*
               beforeShow: function (input, instance) {
                $(input).datepicker('setDate', new Date());
            }
            *@
        });

        $('.datePicker').click(function () {
            $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary');
        });            

        $(document).on('click', "button.ui-datepicker-current", function () {
            $(".datePicker").datepicker('setDate', new Date())
        });

        @* Set focus to the next datepicker. This allows the user to re-select the same date field.
           Otherwise, a user must click another date field in order to be able to re-select the date field.
        *@
        $("body").delegate("button[data-handler=today]", "click", function () {
            $("#Date").datepicker("setDate", new Date()).datepicker("hide");
            $("#RDate").focus();
        });

        @* This does not work, but provided for ideas.
        $(".datepicker").each(function () {
            $(this).datepicker('setDate', $(this).val());
        });
        *@
    });

解决方案

您可以使用与Stephen在注释中给出的示例非常相似的方法对其进行修复，只需稍作调整即可使事件处理程序正常工作，并且要停止它，请在点击今日"后立即关闭日期选择器:

$(document).ready(function() {
  $(".datePicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm-dd",
    yearRange: "2000:c+1",
    showButtonPanel: true
  });

  $(document).on('click', "button.ui-datepicker-current", function() {
    $(".datePicker").datepicker('setDate', new Date())
  });
});

此处的示例: http://jsfiddle.net/5ornc4gv/12/

修改

如果页面上有多个带有相同"datepicker" CSS类的日期选择器，则上述click事件将更改所有日期选择器的日期.

为防止这种情况，请如下更改click事件处理程序:

$(document).on('click', "button.ui-datepicker-current", function() {
  $.datepicker._curInst.input.datepicker('setDate', new Date())   
});

为此答案提供信用: https://stackoverflow.com/a/5325284/5947043 可获得正确的方法使用.

When using datepicker, when I click on the "Today" button then today's date is shown in datepicker. However, when I click on the "Done" button then today's date is not displayed in the field. Currently, I have to actually click on the date (i.e., Today -> select date). I would prefer clicking Today -> Done.

How can I click on a date field, click on the "Today" button and then click on the "Done" button and to have today's date reflected in the date field?

Update:

Below is what I am experimenting with. Pardon the mess - I am new to jQuery / javascript.

$(document).ready(function () {
        $(".datePicker").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy-mm-dd",
            yearRange: 2000:c+1,
            showButtonPanel: true,                       
            @*
               beforeShow: function (input, instance) {
                $(input).datepicker('setDate', new Date());
            }
            *@
        });

        $('.datePicker').click(function () {
            $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary');
        });            

        $(document).on('click', "button.ui-datepicker-current", function () {
            $(".datePicker").datepicker('setDate', new Date())
        });

        @* Set focus to the next datepicker. This allows the user to re-select the same date field.
           Otherwise, a user must click another date field in order to be able to re-select the date field.
        *@
        $("body").delegate("button[data-handler=today]", "click", function () {
            $("#Date").datepicker("setDate", new Date()).datepicker("hide");
            $("#RDate").focus();
        });

        @* This does not work, but provided for ideas.
        $(".datepicker").each(function () {
            $(this).datepicker('setDate', $(this).val());
        });
        *@
    });

解决方案

You can fix it with something very similar to the example given by Stephen in the comments, it just needed tweaking slightly to get the event handler to work properly, and to stop it immediately closing the datepicker after "Today" was clicked:

$(document).ready(function() {
  $(".datePicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm-dd",
    yearRange: "2000:c+1",
    showButtonPanel: true
  });

  $(document).on('click', "button.ui-datepicker-current", function() {
    $(".datePicker").datepicker('setDate', new Date())
  });
});

Working example here: http://jsfiddle.net/5ornc4gv/12/

Edit

If you have multiple datepickers on the page with the same "datepicker" CSS class, the click event above will change the date on all of them.

To prevent this, alter the click event handler as follows:

$(document).on('click', "button.ui-datepicker-current", function() {
  $.datepicker._curInst.input.datepicker('setDate', new Date())   
});

Credit to this answer: https://stackoverflow.com/a/5325284/5947043 for the correct method to use.

这篇关于jQuery DatePicker:单击“今天"然后单击“完成"时，不会保留今天的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！