Jak zresetować wartości kalendarza DatePicker? .. Ograniczenia minimalnej i maksymalnej daty?
Problem polega na tym, że kiedy wyczyszczę daty (usuwając wartości pól tekstowych), poprzednie ograniczenia dat są nadal stosowane.
Przeglądałem dokumentację i nic nie wyskoczyło jako rozwiązanie. Nie mogłem też znaleźć szybkiego rozwiązania w wyszukiwaniu SO / Google
http://jsfiddle.net/CoryDanielson/tF5MH/
Rozwiązanie:
// 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 () to prywatna metoda obiektu DatePicker. Nie znajdziesz go w publicznym API na stronie jQuery UI, ale działa jak urok.
źródło
this
dokładnie znajduje się w _clearDates ()Próbowałeś:
$('selector').datepicker('setDate', null);
To powinno działać zgodnie z dokumentacją API
źródło
('setDate', null)
mam format, który chcę (DD / MM / RRRR) , ale kiedy go używam, mam MM / DD / RRRR ... jedyną różnicą jest użycie('setDate', null)
, jakiś pomysł dlaczego?wystarczy ponownie ustawić opcje na null:
dates.datepicker( "option" , { minDate: null, maxDate: null} );
Zmieniłem twój jsfiddle: http://jsfiddle.net/tF5MH/9/
źródło
date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
$('.date').datepicker('setDate', null);
źródło
Spróbuj zmienić kod rozliczeniowy na:
$('#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 ); });
źródło
Spróbuj tego, to doda przycisk Clear w kalendarzu JQuery, który wyczyści datę.
$("#DateField").datepicker({ showButtonPanel: true, closeText: 'Clear', onClose: function (dateText, inst) { if ($(window.event.srcElement).hasClass('ui-datepicker-close')) { document.getElementById(this.id).value = ''; } } });
źródło
document.getElementById(this.id).value = '';
przez$(this).val('').change();
sprawia, że jest jeszcze lepiej, ponieważ wtedy wywoływane są również wszelkie ustalone programy obsługi zmian.Zresetuj atrybuty maksymalnej daty w DatePicker po kliknięciu wyczyść.
Ze strony jquery
Get or set the maxDate option, after init. //getter var maxDate = $( ".selector" ).datepicker( "option", "maxDate" ); //setter $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
źródło
Wiem, że jest trochę za późno, ale oto prosty spokój kodu, który zrobił to za mnie:
$('#datepicker-input').val('').datepicker("refresh");
źródło
Oczywista odpowiedź była dla mnie skuteczna.
$('#datepicker').val('');
gdzie $ ('# datepicker') to identyfikator elementu wejściowego.
źródło
.val('')
spowoduje opróżnienie danych wejściowych, ale nie usunie ograniczeń selektora dat w kalendarzach.Zmodyfikowana wersja rozwiązania Leniel Macaferi uwzględniająca klawisz Backspace będący skrótem „wstecz strony” w IE8, gdy pole tekstowe nie jest aktywne (co wydaje się mieć miejsce, gdy datapicker jest otwarty).
Używa również
val()
do wyczyszczenia pola, ponieważ_clearDate(this)
nie działa dla mnie.$("#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(); });
źródło
Moja inicjalizacja Datepicker wygląda następująco:
dateOptions = { changeYear: true, changeMonth: true, dateFormat: 'dd/mm/yy', showButtonPanel: true, closeText: 'Clear', };
Tak więc domyślny przycisk „Gotowe” będzie miał „Wyczyść” tekst .
Teraz wewnątrz datepicker.js znajdź funkcję wewnętrzną „_attachHandlers”. Wygląda ona tak:
_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 () {...} ...
I zmień funkcję ukrywania, aby wyglądała następująco:
... hide: function () { $.datepicker._clearDate(id); $.datepicker._hideDatepicker(); }, ...
źródło
Używam tego kodu, aby wyczyścić pole i wszystkie oszustwa. Potrzebowałem pustego pola dla mojego przypadku użycia
jQuery.datepicker._clearDate(window.firstDay); window.firstDay.datepicker('setDate',null); window.firstDay[0].value = '';
Z jakiegoś powodu
.val('')
nie zadziała dla mnie. Ale ominięcie jQuery zrobiło to. Moim zdaniem wadą jest to, że nie ma opcji .datepicker („wyczyść”).źródło
Mój sposób na rozwiązanie tego problemu
Zmień var 'controls' na 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>" : "");
Następnie dodaj zmienną clearText
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
A przed pokazem funkcji
$(".i_date").datepicker ( { beforeShow: function (input, inst) { setTimeout ( function () { $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); }); }, 0 ); } } );
źródło
$("#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(''); } } });
źródło
W Firefoksie działa to dla mnie w formie (programowo), gdzie kontrola Datepicker jest domyślnie wyłączona:
$("#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
źródło
Wypróbuj to rozwiązanie, będzie działać poprawnie, tak jak próbowałem
$('selector').datepicker('setStartDate', 0); $('selector').datepicker('setEndDate', 0); $('selector').datepicker('update');
źródło