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

68

Как reset значения календаря 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, но он работает как шарм.

Теги:
jquery-ui-datepicker

15 ответов

67
Лучший ответ

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

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

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

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

Источник

  • 8
    Вот это да. Почему это не будет опубликовано ?! Он также исключен из API на jQuery UI .... не имеет смысла. ---- Я отредактировал твой пост, чтобы решение лучше соответствовало моему вопросу. Очень хорошая находка
  • 0
    примите мои правки, я настроил ваш ответ, чтобы он соответствовал моему вопросу, а не копировал / вставлял неполный код
Показать ещё 7 комментариев
39

Вы пытались:

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

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

  • 1
    Да, это не работает: jsfiddle.net/CoryDanielson/tF5MH/55
  • 0
    У меня есть форма с вводом даты, которую я использую, чтобы изменить дату, которую я хочу заполнить в соответствии с текущей датой. Я нахожу это решение для сброса формы редактирования перед использованием «setDate» с текущей датой, но у меня проблема с форматом: без ('setDate', null) меня есть ('setDate', null) формат (ДД / ММ / ГГГГ) , но когда я использую его, у меня MM / DD / YYYY ... единственная разница - использование ('setDate', null) , есть идеи, почему?
22

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

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

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

  • 0
    да спасибо ты прав. Забавно, эта проблема существует даже на демонстрационной странице DateUpicker пользовательского интерфейса jQuery. jqueryui.com/demos/datepicker/#date-range Установите дату, затем очистите текстовое поле и проблема существует
  • 0
    Это самый чистый способ, конечно. date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
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 );
});
9
$('.date').datepicker('setDate', null);
7

Попробуйте это, Это добавит кнопку "Очистить" в календаре 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
    Это не будет работать для Firefox, window.event не определено.
  • 0
    Этот ответ, вероятно, лучше, чем другие, хотя он не работает в Firefox. И заменяя document.getElementById(this.id).value = ''; с $(this).val('').change(); делает его еще лучше, потому что тогда также будут вызваны все установленные обработчики изменений.
3

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

С веб-сайта jquery

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
  • 0
    Да вы правы Я пометил j08691 как лучший ответ, потому что он дал мне код, который я мог бы вставить в скрипку, которая работала. К сожалению, я не могу отметить их обоих как лучшие: /
  • 0
    Да, я знаю, я собирался объяснить это немного лучше с помощью некоторого кода относительно вашей проблемы, но он опередил меня. :)
2

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

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

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');
1
$("#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('');
            }
        }
    });
1

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

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

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

  • 0
    Я попробовал это решение в JSFiddle, и оно не сработало. jsfiddle.net/tF5MH/407 См. шаги воспроизведения ниже входных данных. Использование .val('') входные данные, но не очистит ограничения .val('') в календарях.
  • 0
    Я также пытался использовать последнюю версию пользовательского интерфейса jQuery (v1.12.0), и она не работала.
1

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

$('#datepicker-input').val('').datepicker("refresh");
  • 0
    Я не вижу, что обновление делает что-то еще. Вы можете просто очистить значение.
  • 1
    Мне нравится, что вы используете функцию public public vs. private для очистки контроля.
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

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

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

Я использую этот код, чтобы очистить поле и все shenannigans. Мне нужно пустое поле для моего использования.

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

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

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();
                    },
                    ...

Изображение 7737

0

Измененная версия решения Leniel Macaferi для учета того, что ключ backspace является ярлыком "назад страницы" в IE8, когда текстовое поле не имеет фокуса (что, как представляется, происходит, когда датапикер открыт).

Он также использует 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();
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню