jQuery datepicker để ngăn chặn ngày quá khứ

Question 1

Làm cách nào để tắt các ngày trong quá khứ trên jQuery datepicker? Tôi đã tìm kiếm các tùy chọn nhưng dường như không tìm thấy bất kỳ điều gì cho thấy khả năng vô hiệu hóa các ngày trong quá khứ.

CẬP NHẬT: Cảm ơn bạn đã phản hồi nhanh chóng. Tôi đã thử mà không có may mắn. Ngày vẫn không chuyển sang màu xám như tôi mong đợi và vẫn chấp nhận ngày đã chọn trong quá khứ.

Tôi đã thử điều này:

$('#datepicker').datepicker({ minDate: '0' });

Không hoạt động.

Tôi đã thử điều này:

$('#datepicker').datepicker({ minDate: new Date() });

Vẫn không hoạt động.

Nó hiển thị tiện ích lịch tốt. Nó sẽ không bị xám hoặc ngăn chặn đầu vào của những ngày qua. Tôi đã thử minDate và maxDate trong quá khứ mà không may mắn vì vậy tôi nhận ra nó không phải là chúng.

Question 2

Thử cái này:

$("#datepicker").datepicker({ minDate: 0 });

Xóa các trích dẫn từ 0.

Question 3

Bạn chỉ cần chỉ định một ngày tối thiểu - đặt nó thành 0 có nghĩa là ngày tối thiểu là 0 ngày kể từ hôm nay tức là hôm nay. '0d'Thay vào đó, bạn có thể chuyển chuỗi (đơn vị mặc định là ngày).

$(function () {
    $('#date').datepicker({ minDate: 0 });
});

Question 4

Nếu bạn đang xử lý bộ chọn ngày đã ràng buộc trước đó thì hãy thiết lập

$("#datepicker").datepicker({ minDate: 0 });

sẽ không làm việc. Cú pháp đó chỉ có thể áp dụng khi bạn đang tạo tiện ích con.

Để đặt ngày tối thiểu cho bộ chọn ngày giới hạn, hãy sử dụng như sau:

$("#datePicker").datepicker("option", "minDate", 0);

Question 5

Xóa các dấu ngoặc kép xung quanh 0 và nó sẽ hoạt động.

Đoạn mã làm việc:

// set minDate to 0 for today's date
$('#datepicker').datepicker({ minDate: 0 });

body {
    font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}

<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

Mở rộng đoạn mã

Question 6

Sử dụng tùy chọn minDate để đặt ngày tối thiểu có thể. http://jqueryui.com/demos/datepicker/#option-minDate

Question 7

Không để tâm đến và nó sẽ vô hiệu hóa các ngày tháng trước đây.

$( "#datepicker" ).datepicker({ minDate: 0});

Ví dụ trực tiếp

đọc thêm tại đây

Question 8

Những công việc này:

$("#datepicker").datepicker({ minDate: +0 });

Question 9

// tắt các ngày trong tương lai

$('#datetimepicker1').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: new Date
        });

// vô hiệu hóa các ngày trong quá khứ

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });

Question 10

$("#datePicker").datePicker({startDate: new Date() });. Điều này phù hợp với tôi

Question 11

Tôi đang sử dụng mã sau để định dạng ngày và hiển thị 2 tháng trong lịch ...

<script>
$(function() {

    var dates = $( "#from, #to" ).datepicker({

        showOn: "button",
        buttonImage: "imgs/calendar-month.png",
        buttonImageOnly: true,                           
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,

        onSelect: function( selectedDate ) {




            $( ".selector" ).datepicker({ defaultDate: +7 });
            var option = this.id == "from" ? "minDate" : "maxDate",


                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );

            dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );


        }
    });
});

</script>

Vấn đề là tôi không chắc làm thế nào để hạn chế lựa chọn ngày trước đó.

Question 12

Đảm bảo rằng bạn đặt nhiều thuộc tính trong cùng một dòng (vì bạn chỉ hiển thị 1 dòng mã, bạn có thể đã gặp phải vấn đề tương tự như tôi đã làm).

Của tôi sẽ đặt ngày mặc định, nhưng không làm mờ các ngày cũ. Điều này không hoạt động:

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

Điều này thực hiện cả hai:

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1 và +1 hoạt động giống nhau (hoặc 0 và +0 trong trường hợp của bạn).

Tôi: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3

Question 13

var givenStartDate = $('#startDate').val();
        alert('START DATE'+givenStartDate);
        var givenEndDate = $('#endDate').val();
        alert('END DATE'+givenEndDate);
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var currentDate = date.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(givenStartDate < currentDate || givenEndDate < currentDate)
         { 
        $("#updateButton").attr("disabled","disabled"); 
         }
         if(givenStartDate < currentDate && givenEndDate > currentDate)
            {
            $("#updateButton").attr("enabled","enabled");
            }
         if(givenStartDate > currentDate || givenEndDate > currentDate) { 
        $("#updateButton").attr("enabled","enabled"); 
         }

Thử cái này. Nếu có sai sót, xin vui lòng sửa chữa cho tôi :) Cảm ơn tất cả.

Question 14

Điều này sẽ hoạt động <input type="text" id="datepicker">

var dateToday = new Date();
$("#datepicker").datepicker({
    minDate: dateToday,
    onSelect: function(selectedDate) {
    var option = this.id == "datepicker" ? "minDate" : "maxDate",
    instance = $(this).data("datepicker"),
    date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
    dates.not(this).datepicker("option", option, date);
    }
});

Question 15

Hãy thử đặt startDatethành ngày hiện tại. Ví dụ:

$('.date-pick').datePicker({startDate:'01/01/1996'});

Question 16

Tôi đã sử dụng thuộc tính min: min="' + (new Date()).toISOString().substring(0,10) + '"

Đây là mã của tôi và nó đã hoạt động.

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>