jQuery DatePicker:当点击今天然后完成时,今天的日期不会被保留

时间:2018-03-05 04:44:51

标签: jquery asp.net asp.net-mvc datepicker jquery-ui-datepicker

使用datepicker时,当我点击"今天"按钮然后今天的日期显示在datepicker中。但是,当我点击" Done"按钮然后今天的日期不会显示在字段中。目前,我必须实际点击日期(即今天 - >选择日期)。我更喜欢点击今天 - >完成。

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

更新

以下是我正在尝试的内容。原谅这个烂摊子 - 我是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());
        });
        *@
    });

1 个答案:

答案 0 :(得分:2)

您可以使用与Stephen在评论中给出的示例非常相似的内容进行修复,只需稍微调整以使事件处理程序正常工作,并在单击“今天”后立即停止关闭datepicker:

$(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事件处理程序:

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

相信这个答案:https://stackoverflow.com/a/5325284/5947043以获取正确的使用方法。