Как очистить / сбросить выбранные даты в календаре jQuery UI Datepicker? - PullRequest
Новая
       13

Как очистить / сбросить выбранные даты в календаре jQuery UI Datepicker?

77 голосов
/ 24 февраля 2012

Как сбросить значения календаря средства выбора даты? .. Ограничения на минимальную и максимальную даты?

Проблема заключается в том, что когда я очищаю даты (удаляя значения текстового поля), прежние ограничения на дату все ещеПрименено.

Я перебираю документацию , и ничего не выскочило в качестве решения.Я также не смог найти быстрое исправление в поиске SO / 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.Вы не найдете его в общедоступном API на веб-сайте jQuery UI, но он работает как шарм.

Ответы [ 16 ]

80 голосов
/ 29 сентября 2012

Я пытался выполнить то же самое, то есть очистить указатель даты, чтобы фильтры, введенные пользователем, могли быть удалены. Погуглив немного, я нашел этот сладкий кусочек кода:

Вы можете добавить функцию очистки даже в поля только для чтения. Просто добавьте следующий код в свой указатель даты: 

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

Люди смогут выделять (даже поля только для чтения), а затем использовать клавишу Backspace или клавишу Delete, чтобы удалить дату с помощью функции _clearDate.

Источник

54 голосов
/ 07 декабря 2012

Вы пробовали: 

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

Это должно работать в соответствии с документацией API

21 голосов
/ 24 февраля 2012

вам просто нужно снова установить параметры в null: 

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

Я изменил ваш jsfiddle: http://jsfiddle.net/tF5MH/9/

12 голосов
/ 27 мая 2013 
$('.date').datepicker('setDate', null);
10 голосов
/ 24 февраля 2012

Попробуйте изменить код очистки на: 

$('#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 );
});
7 голосов
/ 17 сентября 2013

Попробуйте, Это добавит кнопку очистки на календаре Jquery, который очистит дату. 

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});
3 голосов
/ 24 февраля 2012

Сброс максимального числа атрибутов даты в вашем указателе даты, когда вы нажимаете очистить.

с сайта jquery 

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
2 голосов
/ 03 сентября 2016

Очевидный ответ был тот, который работал для меня. 

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

где $ ('# datepicker') - идентификатор элемента ввода.

1 голос
/ 26 мая 2016

Я знаю, что уже слишком поздно, но вот простой код, который сделал это для меня: 

$('#datepicker-input').val('').datepicker("refresh");
0 голосов
/ 18 июля 2018

В Firefox он работает для меня в форме (программно), где элемент управления datepicker по умолчанию отключен: 

$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state
Страница:
...