jQuery Date Picker - vô hiệu hóa các ngày trong quá khứ

Question 1

Tôi đang cố gắng chọn Phạm vi ngày bằng công cụ chọn ngày giao diện người dùng.

trong trường từ / đến, mọi người sẽ không thể xem hoặc chọn các ngày trước đó cho đến ngày nay.

Đây là mã của tôi:

$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            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", option, date );
        }
    });
});

Ai đó có thể cho tôi biết làm thế nào để vô hiệu hóa các ngày trước đó đến ngày nay.

Question 2

Bạn phải tạo một đối tượng ngày tháng mới và đặt nó như minDatekhi bạn khởi tạo bộ chọn ngày

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        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", option, date);
    }
});

Chỉnh sửa - từ nhận xét của bạn bây giờ nó hoạt động như mong đợi http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

Question 3

Khai báo biến dateToday và sử dụng hàm Date () để thiết lập nó .. sau đó dùng biến đó để gán cho minDate là tham số của datepicker.

var dateToday = new Date(); 
$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 3,
        showButtonPanel: true,
        minDate: dateToday
    });
});

Vậy đó ... Câu trả lời trên thực sự hữu ích ... hãy tiếp tục lên nhé các bạn ..

Question 4

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

minDate:0 làm việc cho tôi.

Question 5

Sử dụng tùy chọn "minDate" để hạn chế ngày được phép sớm nhất. Giá trị "0" có nghĩa là hôm nay (0 ngày kể từ hôm nay):

    $(document).ready(function () {
        $("#txtdate").datepicker({
            minDate: 0,
            // ...
        });
    });

Tài liệu tại đây: http://api.jqueryui.com/datepicker/#option-minDate

Question 6

Chỉ để thêm vào điều này:

Nếu bạn cũng cần ngăn người dùng nhập ngày trong quá khứ theo cách thủ công , thì đây là một giải pháp khả thi. Đây là những gì chúng tôi đã làm (dựa trên câu trả lời của @Nicola Peluchetti)

var dateToday = new Date();

$("#myDatePickerInput").change(function () {
    var updatedDate = $(this).val();
    var instance = $(this).data("datepicker");
    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

    if (date < dateToday) {
        $(this).datepicker("setDate", dateToday);
    }
});

Điều này làm là thay đổi giá trị thành ngày hôm nay nếu người dùng nhập ngày trong quá khứ theo cách thủ công.

Question 7

Demo trực tiếp , hãy thử cái này,

    $('#from').datepicker(
     { 
        minDate: 0,
        beforeShow: function() {
        $(this).datepicker('option', 'maxDate', $('#to').val());
      }
   });
  $('#to').datepicker(
     {
        defaultDate: "+1w",
        beforeShow: function() {
        $(this).datepicker('option', 'minDate', $('#from').val());
        if ($('#from').val() === '') $(this).datepicker('option', 'minDate', 0);                             
     }
   });

Question 8

Đây là cách dễ dàng để làm điều này

$('#datepicker').datepicker('setStartDate', new Date());

chúng tôi cũng có thể vô hiệu hóa những ngày trong tương lai

$('#datepicker').datepicker('setEndDate', new Date());

Question 9

đặt thuộc tính startDate của datepicker, nó hoạt động, bên dưới là mã hoạt động

$(function(){
$('#datepicker').datepicker({
    startDate: '-0m'
    //endDate: '+2d'
}).on('changeDate', function(ev){
    $('#sDate1').text($('#datepicker').data('date'));
    $('#datepicker').datepicker('hide');
});
})

Question 10

Tài liệu API jQuery - datepicker

Ngày tối thiểu có thể chọn. Khi đặt thànhnull , không có giá trị tối thiểu.

Nhiều loại được hỗ trợ:

Ngày: Đối tượng ngày chứa ngày tối thiểu.
Số: Một số ngày kể từ hôm nay. Ví dụ 2đại diện cho two daystừ hôm nay và -1đại diện yesterday.
Chuỗi: Một chuỗi ở định dạng được xác định bởi dateFormattùy chọn hoặc một ngày tương đối.
Ngày tương đối phải chứa các cặp giá trị và dấu chấm; khoảng thời gian hợp lệ là ycho years, mcho months, wcho weeksvàd cho days. Ví dụ: +1m +7dđại diện one month and seven daystừtoday .

Để không hiển thị các ngày trước khác với ngày hôm nay

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

Question 11

" Mindate " thuộc tính nên được sử dụng để vô hiệu hóa ngày trôi qua trong jquery datepicker.

minDate: new Date () Hoặc minDate: '0' là chìa khóa cho việc này.

Ex:

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

HOẶC LÀ

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

Question 12

chỉ cần thay thế mã của bạn:

mã cũ:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd'

});

Mã mới:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd',
    minDate: 0
});

Question 13

Bằng cách thiết lập startDate: new Date()

$('.date-picker').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    ...
    startDate: new Date(),
});

Question 14

Tôi đã tạo chức năng tắt ngày trước, tắt các ngày cuối tuần linh hoạt (Như thứ bảy, chủ nhật)

Chúng tôi đang sử dụng phương thức beforeShowDay của plugin datepicker jQuery UI.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var NotBeforeToday = function(date) {
		var now = new Date(); //this gets the current date and time
		if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() >= now.getDate() && (date.getDay() > 0 && date.getDay() < 6) )
			return [true,""];
		if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		if (date.getFullYear() > now.getFullYear() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		return [false,""];
	}


jQuery("#datepicker").datepicker({
		beforeShowDay: NotBeforeToday
    });

Mở rộng đoạn mã

Đây là ngày hôm nay là ngày 15 tháng 9 Tôi đã vô hiệu hóa Thứ Bảy và Chủ Nhật.

Question 15

bạn phải khai báo ngày hiện tại thành các biến như thế này

 $(function() {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datepicker').datepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    });
})

Question 16

$( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date());

new Date(): chức năng lấy ngày ngày hôm trước bị khóa. 100% làm việc

Question 17

bạn chỉ có thể sử dụng

startDate: 'today'

nó hoạt động tốt cho tôi.