JQuery日期选择器日期重置

Question

JQuery日期选择器日期重置

jquerydatedatepickerresetjquery-ui-datepicker

18

我想在日期选择器底部添加一个“重置”控件，放在“关闭”控件的位置。这将使用户可以将与日期选择器绑定的输入重置为空（无日期）。

我无法弄清如何编写绑定函数，具体来说，我该如何获取绑定到控件的元素？

        if (this.displayClear) {
           $pop.append(
              $('<a href="#" id="dp-clear">' + $.dpText.TEXT_CLEAR + '</a>')
                 .bind(
                    'click',
                    function()
                    {
                          c.clearSelected();
                          //help! reset the value to '': $(this.something).val('')
                          c._closeCalendar();
                    }
                 )
           );
        }

- KateYoak

在这个讨论中有一些有用的答案。具体来说，可以在这里查看pfurbacher的示例实现。 - Ori

可能是重复的问题：如何在jQuery UI日期选择器日历上清除/重置所选日期？ - freemanoid

6个回答

19

我找到了一个更好的解决方案：

$(document).ready(function () {
    $(".datepicker").datepicker({
            showOn: 'focus',
            showButtonPanel: true,
            closeText: 'Clear', // Text to show for "close" button
            onClose: function () {
                var event = arguments.callee.caller.caller.arguments[0];
                // If "Clear" gets clicked, then really clear it
                if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                    $(this).val('');
                }
            }
    });
});

http://jsfiddle.net/swjw5w7q/1/

- vellotis

1

在Firefox中，window.event未定义。 - inputError

无法与最新版本 https://code.jquery.com/ui/1.13.1/jquery-ui.js 一起使用。 - Developer

9

这将在 jQuery 日历上添加清除按钮，用于清除日期。

 $("#txtDOJ").datepicker({
     showButtonPanel: true,
     closeText: 'Clear',
     onClose: function (dateText, inst) {
         if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
             document.getElementById(this.id).value = '';
         }
     }
 });

- sohaib

6

Change the Done label to Clear and add code to clear

$(document).ready(function () {
    $("#startdate").datepicker({
        showOn: 'both',
        buttonImageOnly: true,
        buttonImage: "css/images/calendar.gif",
        showButtonPanel: true,
        closeText: 'Clear',
        onClose: function (dateText, inst) {
            $(this).val('');
        }
    });
});

Add Clear button to the calendar (pros: users who are used to standard jQuery-UI Calendar won't confuse the Clear button for Close)

function addClearBtnToCalendar(inst) {
    setTimeout(function () {
        var buttonPane = $(inst).datepicker("widget")
            .find(".ui-datepicker-buttonpane");
        var btn = $('<button class="ui-datepicker-current'
             + ' ui-state-default ui-priority-secondary ui-corner-all"'
             + ' type="button">Clear</button>');
        btn.unbind("click").bind("click", function () {
             $.datepicker._clearDate(inst.input);
        });
        btn.appendTo(buttonPane);
    }, 1);
}

$("#termdate").datepicker({
    showOn: 'both',
    buttonImageOnly: true,
    buttonImage: "css/images/calendar.gif",
    showButtonPanel: true,
    beforeShow: function (input, inst) {
        addClearBtnToCalendar(inst);
    },
    onChangeMonthYear: function (year, month, inst) {
        addClearBtnToCalendar(inst);
    }
});

- BehranG BinA

当你更改月份或单击“今天”时，“清除”按钮会消失。 - Vasiliy Zverev

3

我曾经遇到和您一样的问题，即没有清空datepicker选项的可用选项。后来我在这里发现了一个非常有用的评论，其中提供了一段极好的代码：

你可以通过添加以下代码来为现有的datepicker控件添加清空功能，即使在只读字段上也可以：

}).keyup(function(e) {
    if(e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

这将使人们能够突出显示日期（即使在只读字段上也可以），然后使用退格键或删除键使用内部_clearDate函数来删除日期。

- Leniel Maccaferri

1

如果您忽略移动/平板电脑用户，那就没关系。 - Mathieu

1

在我的测试中，像这样在只读字段中使用退格键会触发Chrome和IE中的后退按钮。然而，删除功能非常好用。您仍然得到+1分，因为只读功能不是所问问题的一部分。 - SyntaxRules

0

以下是内容

我们可以使用默认的完成按钮来绑定自定义的清除函数。

$("#date_picker").datepicker({minDate:myDate,dateFormat: 'yy-mm-dd',showButtonPanel:true,closeText:'Clear',
    beforeShow: function( input ) {
        setTimeout(function() {
        var clearButton = $(input )
            .datepicker( "widget" )
            .find( ".ui-datepicker-close" );
        clearButton.unbind("click").bind("click",function(){$.datepicker._clearDate( input );});
        }, 1 );
    }
});

非常好用。干杯：）；）

致谢：Sébastien Renauld 和 BehranG BinA

- girish2040

@Sébastien Renauld 如果您洗牌月份，则清除按钮将不可用。请查看链接：link - girish2040

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pma_ · Accepted Answer

这是一个有效的解决方案，只需在任何日期选择器调用之前调用 cleanDatepicker()。

function cleanDatepicker() {
   var old_fn = $.datepicker._updateDatepicker;

   $.datepicker._updateDatepicker = function(inst) {
      old_fn.call(this, inst);

      var buttonPane = $(this).datepicker("widget").find(".ui-datepicker-buttonpane");

      $("<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>Delete</button>").appendTo(buttonPane).click(function(ev) {
          $.datepicker._clearDate(inst.input);
      }) ;
   }
}