Làm cách nào để đặt lại các giá trị lịch của trình chọn ngày? .. Giới hạn ngày tối thiểu và tối đa?

Vấn đề là khi tôi xóa ngày (bằng cách xóa các giá trị hộp văn bản), các giới hạn ngày trước đó vẫn được áp dụng.

Tôi đã phân loại tài liệu và không có giải pháp nào được đưa ra. Tôi cũng không thể tìm thấy cách khắc phục nhanh chóng trên tìm kiếm SO / google

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

Giải pháp:

// 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 () là một phương thức riêng của đối tượng DatePicker. Bạn sẽ không tìm thấy nó trong API công khai trên trang web của jQuery UI, nhưng nó hoạt động như một sự quyến rũ.

Tôi đã cố gắng hoàn thành điều này, đó là làm trống bộ chọn ngày để các bộ lọc do người dùng nhập vào có thể bị xóa. Tìm kiếm trên Google một chút, tôi tìm thấy đoạn mã thú vị này:

Bạn có thể thêm tính năng rõ ràng ngay cả trên các trường chỉ đọc. Chỉ cần thêm mã sau vào trình chọn ngày của bạn:

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

Mọi người sẽ có thể đánh dấu (ngay cả các trường Chỉ đọc) và sau đó sử dụng phím xóa lùi hoặc xóa để xóa ngày sử dụng _clearDatechức năng.

Nguồn

Bạn đã thử chưa:

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

Điều đó sẽ hoạt động theo tài liệu API

bạn chỉ cần đặt lại các tùy chọn thành null:

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

Tôi đã thay đổi jsfiddle của bạn: http://jsfiddle.net/tF5MH/9/

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

Thử thay đổi mã thanh toán bù trừ thành:

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

Hãy thử cái này, cái này sẽ thêm nút xóa trên lịch truy vấn sẽ xóa ngày.

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

Đặt lại thuộc tính ngày tối đa trên bộ chọn ngày của bạn khi bạn nhấp vào xóa.

Từ trang web jquery

Get or set the maxDate option, after init.

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

Tôi biết là hơi muộn, nhưng đây là một đoạn mã đơn giản đã làm được điều đó cho tôi:

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

Câu trả lời rõ ràng là câu trả lời phù hợp với tôi.

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

trong đó $ ('# datepicker') là id của phần tử đầu vào.

Một phiên bản sửa đổi của giải pháp của Leniel Macaferi nhằm giải thích cho phím xóa lùi là phím tắt "quay lại trang" trong IE8 khi trường văn bản không có tiêu điểm (trường hợp này xảy ra khi trình chọn ngày đang mở).

Nó cũng sử dụng val()để xóa trường vì _clearDate(this)không hoạt động đối với tôi.

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

Quá trình khởi tạo trình chọn ngày của tôi trông giống như sau:

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

Vì vậy, nút 'Xong' mặc định sẽ có văn bản 'Xóa' .

Bây giờ, bên trong datepicker.js tìm thấy hàm nội bộ '_attachHandlers' Có vẻ như:

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

Và thay đổi chức năng ẩn để trông giống như:

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

Tôi sử dụng mã này để xóa hiện trường và tất cả các trò tai quái. Tôi cần một trường trống cho trường hợp sử dụng của mình

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

Vì một số lý do .val('')không phù hợp với tôi. Nhưng bỏ qua jQuery đã làm được. Theo tôi, đó là một lỗ hổng khi không có tùy chọn .datepicker ('clear').

Cách của tôi để giải quyết vấn đề này

Thay đổi 'điều khiển' var trên 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>" : "");

Sau đó, thêm một var 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

Và trước khi hiển thị chức năng

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

Trong Firefox, nó thực hiện công việc đối với tôi ở dạng (theo lập trình), trong đó kiểm soát bộ chọn ngày bị tắt theo mặc định:

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

Vui lòng thử giải pháp này, nó sẽ hoạt động bình thường như tôi đã thử

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

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