Как очистить / сбросить выбранные даты в календаре Datepicker пользовательского интерфейса jQuery?


85

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

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

Перебирал документацию и ничего не вышло как решение. Я также не смог найти быстрое исправление в поиске 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, но он работает как шарм.

Ответы:


86

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

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

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

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

Источник


9
Вау. Почему бы об этом не предать огласке ?! Он также исключен из API в jQuery UI .... не имеет смысла. ---- Я отредактировал ваш пост, чтобы решение лучше соответствовало моему вопросу. Очень хорошая находка
Кори Дэниэлсон

примите мое редактирование, я изменил ваш ответ, чтобы он соответствовал моему вопросу, вместо того, чтобы быть копией / вставкой дамп неполного кода
Кори Дэниелсон

Ваша правка еще не активна? Я не вижу возможности принять ваше редактирование ... :)
Лениэль Маккаферри 01

3
Нет, это нормально. Я думаю, что и решение, включенное в мой исходный пост, и ваше, помогут практически любому, кто попадет на эту страницу. Может быть, несколько комментариев о том, что такое keyCode 8 и 46 или что thisименно находится внутри _clearDates ()
Кори Дэниелсон

2
где именно вы это положили?
w0051977

63

Ты пробовал:

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

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


У меня есть форма с вводом даты, которую я использую для редактирования даты, которую я хочу заполнить в соответствии с текущей датой. Я нашел это решение для сброса моей формы редактирования перед использованием "setDate" с текущей датой, но у меня проблема с форматом: без этого у ('setDate', null)меня есть формат, который я хочу (ДД / ММ / ГГГГ) , но когда я использую его, у меня есть ММ / ДД / ГГГГ ... единственная разница в использовании ('setDate', null), есть идеи, почему?
Микаэль Леже

Прости, Микаэль, я не знаю об этом. Вы пытались сбросить формат после установки даты равной нулю в соответствии с stackoverflow.com/questions/1328025/… ?
Дэвид Уэйнрайт

22

вам просто нужно снова установить для параметров значение null:

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

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


да спасибо. ты прав. Забавно, эта проблема существует даже на демонстрационной странице jQuery UI Datepicker. jqueryui.com/demos/datepicker/#date-range Установите дату, затем очистите текстовое поле, и проблема существует
Кори Дэниелсон,

1
Это, безусловно, самый чистый способ. date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
AL3X


10

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

$('#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 );
});

8

Попробуйте это, это добавит кнопку очистки в календаре JQuery, которая очистит дату.

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

1
Этот ответ, вероятно, лучше других, хотя он не работает в Firefox. А замена document.getElementById(this.id).value = '';на $(this).val('').change();делает его еще лучше, потому что тогда также будут вызваны все установленные обработчики изменений.
Райан

3

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

С веб-сайта jquery

Get or set the maxDate option, after init.

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

Да, ты прав. Я отметил j08691 как лучший ответ, потому что он дал мне код, который я мог бы вставить в работающую скрипку. К сожалению, я не смог назвать их обоих лучшими: /
Кори Дэниэлсон

Да, я знаю, я собирался объяснить это немного лучше с помощью кода, относящегося к вашей проблеме, но он меня опередил. :)
Mark W

3

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

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

Я не вижу, что это обновление делает что-то еще. Вы можете просто очистить значение.
omarjebari 02

1
Мне нравится, что вы используете публичный вызов вместо частной функции для очистки элемента управления.
snowYetis

1
@Miguel BinPar, я знаю, что этот пост старый, но ваш ответ - единственный ответ, который сработал для меня после 3 дней попыток понять это. Благодаря!
kejo

3

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

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

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


Я попробовал это решение в JSFiddle, и оно не сработало. jsfiddle.net/tF5MH/407 См. шаги воспроизведения под входными данными. Использование .val('')очистит поля ввода, но не снимет ограничения для выбора даты в календарях.
Кори Дэниелсон

Я также пробовал использовать последнюю версию jQuery UI (v1.12.0), но она не сработала.
Кори Дэниэлсон

Спасибо за тонну омара. Я искал это рабочее решение последние 20 минут. ты человек, спасающий жизнь! ..
Махеш

0

Модифицированная версия решения Лениэля Макафери для учета того, что клавиша backspace является ярлыком «назад на страницу» в IE8, когда текстовое поле не имеет фокуса (что, по-видимому, имеет место, когда открыт datepicker).

Он также используется val()для очистки поля, так _clearDate(this)как у меня не работал.

$("#clearDates").datepicker().keyup(function (e) {
    // allow delete key (46) to clear the field
    if (e.keyCode == 46)
        $(this).val("");

    // backspace key (8) causes 'page back' in IE8 when text field
    // does not have focus, Bad IE!!
    if (e.keyCode == 8)
        e.stopPropagation();
});

0

Моя инициализация datepicker выглядит так:

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            };

Итак, кнопка "Готово" по умолчанию будет иметь "Очистить". текст .

Теперь внутри datepicker.js найдите внутреннюю функцию _attachHandlers. Она выглядит так:

 _attachHandlers: function (inst) {
            var stepMonths = this._get(inst, "stepMonths"),
                id = "#" + inst.id.replace(/\\\\/g, "\\");
            inst.dpDiv.find("[data-handler]").map(function () {
                var handler = {
                    prev: function () {...},
                    next: function () {...},
                    hide: function () {
                        $.datepicker._hideDatepicker();
                    },
                    today: function () {...}
                    ... 

И измените функцию скрытия, чтобы она выглядела так:

                   ...
                   hide: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

Решение пришло из этого * data-handler = "hide" *


0

Я использую этот код для очистки поля и всех махинаций. Мне нужно пустое поле для моего варианта использования

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

У .val('')меня почему- то не работает. Но в обход jQuery это удалось. На мой взгляд, недостаток в том, что нет опции .datepicker ('clear').


0

Мой способ решить эту проблему

Измените var 'controls' на ui.js

controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "clearText") + "</button>" : "");

Затем добавьте clearText var

    this.regional[""] = { // Default regional settings
    closeText: "Done", // Display text for close link
    clearText: "Clear", // Display text for close link
    prevText: "Prev", // Display text for previous month link

И перед функцией шоу

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);

0
$("#datepicker").datepicker({            
        showButtonPanel: true,
        closeText: 'Clear', 
        onClose: function () {
            var event = arguments.callee.caller.caller.arguments[0];                
            if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                $(this).val('');
            }
        }
    });

0

В 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

-1

Пожалуйста, попробуйте это решение, оно будет работать правильно, как я пытался

$('selector').datepicker('setStartDate', 0);

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.