【问题标题】:jQuery DatePicker: When clicking on Today and then Done, today's date is not preservedjQuery DatePicker:点击今天然后完成时,不保留今天的日期
【发布时间】:2023-03-31 12:50:02
【问题描述】:

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

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

更新:

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

【问题讨论】:

  • 这不是按钮的行为,而是this Q/A 提出了一个可能的解决方案
  • 我看到了,并且能够使用该解决方案更改“今天”按钮的格式。但是,我无法让“今天”->“完成”的功能发挥作用。你能做到并提供一个小提琴吗?

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


【解决方案1】:

您可以使用与 Stephen 在 cmets 中给出的示例非常相似的方法来修复它,只需要稍微调整以使事件处理程序正常工作,并在单击“今天”后立即停止它关闭日期选择器:

$(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 类的日期选择器,则上面的点击事件将更改所有日期选择器。

为防止这种情况发生,请按如下方式更改点击事件处理程序:

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

感谢这个答案:https://stackoverflow.com/a/5325284/5947043 正确使用方法。

【讨论】:

  • 太棒了!这是一个优雅的解决方案。非常感谢。先生,我向您致敬。
  • 实际上,这不起作用,因为它会影响页面上的所有日期字段。有没有办法防止这种情况发生?
  • @JWeezy 进行了编辑,建议您在这种情况下需要做什么。
  • 会的 - 我今晚必须检查一下。再次感谢你的帮助。我知道这可能是一个无耻的插件,但是这个问题是否值得一票?具有有用答案的帖子不应遭到反对票。
  • 那行得通。我发布了另一个关于“今天”按钮如何呈现的问题。如果您可以让它工作,那么很高兴将其标记为已回答。 stackoverflow.com/questions/49164670/…
猜你喜欢
  • 2017-02-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-04
相关资源
最近更新 更多