Как очистить/сбросить выбранные даты с помощью jQuery пользовательского интерфейса календаря отмечать?
Как сбросить значения календаря 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, но он работает как шарм.
16 ответов:
Я пытался выполнить эту самую вещь, то есть очистить datepicker, чтобы фильтры, введенные пользователем, могли быть удалены. Погуглив немного я нашел этот сладкий кусок кода:
вы можете добавить функцию очистки даже на полях только для чтения. Просто добавьте следующий код в свой datepicker:
}).keyup(function(e) { if(e.keyCode == 8 || e.keyCode == 46) { $.datepicker._clearDate(this); } });люди смогут выделить (даже только для чтения полей), а затем использовать backspace или удалить ключ, чтобы удалить дату с помощью
_clearDateфункция.
ты:
$('selector').datepicker('setDate', null);Это должно работать в соответствии с документация API
вам просто нужно снова установить параметры в null:
dates.datepicker( "option" , { minDate: null, maxDate: null} );Я изменил ваш jsfiddle:http://jsfiddle.net/tF5MH/9/
попробуйте изменить код очистки на:
$('#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 ); });
Попробуйте Это, Это Позволит Добавить Кнопку "Очистить" На JQuery Календарь, Который Будет Четкая Дата.
$("#DateField").datepicker({ showButtonPanel: true, closeText: 'Clear', onClose: function (dateText, inst) { if ($(window.event.srcElement).hasClass('ui-datepicker-close')) { document.getElementById(this.id).value = ''; } } });
сбросить максимум атрибутов даты на вашем datepicker при нажатии кнопки Очистить.
С сайта jquery
Get or set the maxDate option, after init. //getter var maxDate = $( ".selector" ).datepicker( "option", "maxDate" ); //setter $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
очевидный ответ был тот, который работал для меня.
$('#datepicker').val('');где $('#datepicker') - идентификатор входного элемента.
Я знаю, что это немного поздно, но вот простой мир кода, который сделал это для меня:
$('#datepicker-input').val('').datepicker("refresh");
$("#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(''); } } });
модифицированная версия решения Leniel Macaferi для учета клавиши backspace, являющейся ярлыком" Page back " в 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(); });
мой datepicker инициализация выглядит так:
dateOptions = { changeYear: true, changeMonth: true, dateFormat: 'dd/mm/yy', showButtonPanel: true, closeText: 'Clear', };Так, по умолчанию "готово" будет '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(); }, ...
Я использую этот код, чтобы очистить поле и все махинации. Мне нужно было пустое поле для моего варианта использования
jQuery.datepicker._clearDate(window.firstDay); window.firstDay.datepicker('setDate',null); window.firstDay[0].value = '';почему-то
.val('')не будет работать для меня. Но в обход jQuery это сделал. На мой взгляд это недостаток, которого нет .datepicker ('clear') опция.
мой способ решить эту проблему
изменить var 'элементы управления' на 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>" : "");затем добавьте открытый текст 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 ); } } );
в 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
пожалуйста, попробуйте это решение, оно будет работать правильно, как я пробовал
$('selector').datepicker('setStartDate', 0); $('selector').datepicker('setEndDate', 0); $('selector').datepicker('update');

Comments