ฉันจะรีเซ็ตค่าปฏิทิน 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 แต่มันใช้งานได้อย่างมีเสน่ห์

ฉันพยายามทำสิ่งนี้ให้สำเร็จนั่นคือทำให้ datepicker ว่างเปล่าเพื่อให้ตัวกรองที่ป้อนโดยผู้ใช้สามารถลบออกได้ Googling เล็กน้อยฉันพบโค้ดที่น่ารักนี้:

คุณสามารถเพิ่มคุณสมบัติที่ชัดเจนได้แม้ในฟิลด์แบบอ่านอย่างเดียว เพียงเพิ่มรหัสต่อไปนี้ใน 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/

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

ลองเปลี่ยนรหัสการหักบัญชีเป็น:

$('#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-input').val('').datepicker("refresh");

คำตอบที่ชัดเจนคือคำตอบที่เหมาะกับฉัน

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

โดยที่ $ ('# datepicker') คือ id ขององค์ประกอบอินพุต

โซลูชันของ 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',
            };

ดังนั้นปุ่ม"เสร็จสิ้น"เริ่มต้นจะมีข้อความ"ล้าง"

ตอนนี้ภายใน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>" : "");

จากนั้นเพิ่ม 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
            );
        }
    }
);

$("#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 มันทำงานสำหรับฉันในรูปแบบ (ทางโปรแกรม) โดยที่การควบคุม 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');