如何在jQuery UI日期选择器日历上清除/重置所选日期？

Question

如何在jQuery UI日期选择器日历上清除/重置所选日期？

jqueryjquery-uijquery-ui-datepicker

97

如何重置日期选择器日历的值？以及最小和最大日期限制？

问题在于，当我清除日期（通过删除文本框中的值）时，先前的日期限制仍然适用。

我已经查阅了文档，但没有找到解决方案。在Stack Overflow和Google搜索中也没有找到快速解决方法。

http://jsfiddle.net/CoryDanielson/tF5MH/

解决方案：

// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");

// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
    dates.attr('value', '');
    dates.each(function(){
        $.datepicker._clearDate(this);
    });
});

_.clearDate() 是 DatePicker 对象的私有方法。您在 jQuery UI 网站的公共 API 中找不到它，但它非常好用。

- Cory Danielson

17个回答

76

你试过了吗：

$('selector').datepicker('setDate', null);

根据API文档，那应该可以正常工作。

- DavidWainwright

我有一个表单，其中包含一些日期选择器输入框，我使用它们来编辑一些日期，并希望根据当前日期填充。我找到了这个解决方案，在使用“setDate”设置当前日期之前重置我的编辑表单，但是我有一个格式问题：如果没有 ('setDate', null)，我得到了我想要的格式 **(DD/MM/YYYY)**，但是当我使用它时，我得到了 MM/DD/YYYY...唯一的区别是使用了 ('setDate', null)，有什么想法为什么会这样？ - Mickaël Leger

抱歉Mickael - 我不知道那个。你是否尝试按照https://dev59.com/rnM_5IYBdhLWcg3wjj6r将日期设置为null后重置格式？ - DavidWainwright

24

你只需要将选项再次设置为null即可：

dates.datepicker( "option" , {
    minDate: null,
    maxDate: null} );

我已经修改了你的 jsfiddle：http://jsfiddle.net/tF5MH/9/

- Simon Wang

是的，谢谢。你说得对。有趣的是，这个问题甚至存在于jQuery UI日期选择器演示页面上。http://jqueryui.com/demos/datepicker/#date-range设置到日期，然后清空文本框就会出现问题。 - Cory Danielson

1

这绝对是最干净的方式。date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} ); - AL3X

14

$('.date').datepicker('setDate', null);

- Soni Sharma

11

尝试将清除代码更改为：

$('#clearDates').on('click', function(){
    dates.attr('value', '');
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});

- j08691

10

试试这个，它会在 JQuery 日历上添加一个清除按钮，以清除日期。

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

- sohaib

1

尽管它在Firefox中无法工作，但这个答案可能比其他答案更好。将document.getElementById(this.id).value = '';替换为$(this).val('').change();使其变得更好，因为任何已建立的更改处理程序也会被调用。 - Ryan

4

我知道有点晚了，但这是一个简单的代码片段，对我很有用：

$('#datepicker-input').val('').datepicker("refresh");

- Miguel BinPar

我看不出刷新会有任何额外的效果，你只需要清除该值即可。 - omarjebari

1

我喜欢你使用公共调用而不是私有函数来清除控件。 - snowYetis

1

@Miguel BinPar，我知道这篇帖子很旧了，但是在我试了3天后，你的答案是唯一有效的答案。谢谢！ - kejo

3

显而易见的答案对我有效。

$('#datepicker').val('');

这里的 $('#datepicker') 是输入框元素的 ID。

- omarjebari

我在JSFiddle中尝试了那个解决方案，但它没有起作用。http://jsfiddle.net/tF5MH/407/ 请参见输入框下面的重现步骤。使用.val('')将清空输入框，但不会清除日历中的日期选择限制。 - Cory Danielson

我也尝试了最新版本的jQuery UI（v1.12.0），但它没有起作用。 - Cory Danielson

非常感谢你，Omar。我已经寻找这个可行的解决方案20分钟了。你真是救命恩人！ - Mahesh

3

当您单击“清除”时，请重置您的日期选择器的最大日期属性。

来自jquery网站

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

- Mark W

是的，你说得对。我将j08691的回答标记为最佳答案，因为他给了我一些可以放入fiddle中运行的代码。不幸的是，我不能将它们都标记为最佳答案 :/ - Cory Danielson

是的，我知道。我本来打算用一些与你的问题相关的代码更好地解释一下，但他比我更快。 :) - Mark W

0

我使用这段代码来清除字段和所有的麻烦。我的用例需要一个空字段。

jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';

由于某些原因，.val('') 对我无效。但是绕过 jQuery 就可以解决问题。在我看来，没有 .datepicker('clear') 选项是一个缺陷。

- Tschallacka

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

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

- Leniel Maccaferri · Accepted Answer

我正在尝试实现这个功能，即清空日期选择器，以便可以删除用户输入的筛选条件。稍微搜索了一下，我发现了这段很棒的代码：

您甚至可以在只读字段上添加清除功能。只需将以下代码添加到您的日期选择器中：

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

用户可以使用 _clearDate 函数，高亮选中的日期（包括只读字段），然后使用退格键或删除键删除该日期。

来源