Tarih seçici takvim değerlerini nasıl sıfırlarım? .. Minimum ve maksimum tarih kısıtlamaları?

Sorun şu ki, tarihleri ​​temizlediğimde (metin kutusu değerlerini silerek), önceki tarih kısıtlamalarının hala geçerli olmasıdır.

Ben üzerinden sıralama oldum dokümantasyon ve hiçbir şey bir çözüm olarak dışarı fırladı. Ayrıca bir SO / google aramasında hızlı bir düzeltme bulamadım

http://jsfiddle.net/CoryDanielson/tF5MH/

Çözüm:

// 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 nesnesinin özel bir yöntemidir. Bunu jQuery UI'nin web sitesinde genel API'de bulamazsınız, ancak bir cazibe gibi çalışır.

Ben de bunu başarmaya çalışıyordum, yani tarih seçiciyi boşaltın ki kullanıcı tarafından girilen filtreler kaldırılabilsin. Biraz Google'da gezinirken şu tatlı kod parçasını buldum:

Temiz özelliği salt okunur alanlarda bile ekleyebilirsiniz. Aşağıdaki kodu tarih seçicinize eklemeniz yeterlidir:

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

Kişiler (Salt Okunur alanları bile) vurgulayabilir ve ardından _clearDateişlevi kullanarak tarihi kaldırmak için geri al veya sil tuşunu kullanabilir .

Kaynak

Denedin mi:

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

Bu, API belgelerine göre çalışmalıdır

seçenekleri tekrar null olarak ayarlamanız yeterlidir:

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

Jsfiddle'ınızı değiştirdim: http://jsfiddle.net/tF5MH/9/

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

Takas kodunu şu şekilde değiştirmeyi deneyin:

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

Bunu Deneyin, Jquery Takvimine Tarihi Silecek Temizle Düğmesi Ekleyecektir.

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

Temizle'yi tıkladığınızda tarih seçicinizdeki maksimum tarih özelliklerini sıfırlayın.

Jquery web sitesinden

Get or set the maxDate option, after init.

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

Biliyorum biraz geç, ama işte benim için bunu yapan basit bir kod barışı:

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

Açık cevap, benim için işe yarayan cevaptı.

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

$ ('# datepicker'), giriş öğesinin kimliğidir.

Leniel Macaferi'nin, bir metin alanı odağa sahip olmadığında geri silme anahtarının IE8'de bir "sayfa geri" kısayolu olmasını hesaba katan çözümünün değiştirilmiş bir sürümü (bu, tarih seçici açıkken böyle görünüyor).

Benim için işe yaramadığı için val()alanı temizlemek için de kullanıyor _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();
});

Tarih seçici başlatmam şöyle görünüyor:

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

Bu nedenle, varsayılan 'Bitti' düğmesinin 'Temizle' metni olacaktır.

Şimdi, iç datepicker.js iç fonksiyonu bulmak '_attachHandlers' Öyle görünüyor:

 _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 () {...}
                    ... 

Ve gizle işlevini şöyle görünecek şekilde değiştirin :

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

Bu kodu alanı ve tüm saçmalıkları temizlemek için kullanıyorum. Kullanım durumum için boş bir alana ihtiyacım vardı

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

Nedense .val('')benim için çalışmazdı. Ancak jQuery'yi atlamak bunu yaptı. Bana göre .datepicker ('temizle') seçeneğinin olmaması bir kusur.

Bu sorunu çözme yolum

Ui.js üzerinde var 'kontrollerini' değiştirin

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>" : "");

Sonra bir clearText var ekleyin

    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

Ve gösteri işlevinden önce

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                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('');
            }
        }
    });

Firefox'ta, tarih seçici kontrolünün varsayılan olarak devre dışı bırakıldığı formda (programlı olarak) benim için iş yapar:

$("#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

Lütfen bu çözümü deneyin, denediğim gibi düzgün çalışacak

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

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');