Hạn chế ngày trong ngày tháng jquery dựa trên một datepicker hoặc textbox

Question

Tôi có hai hộp văn bản với một datepicker nối với chúng. Các hộp văn bản là ngày bắt đầu và ngày kết thúc. Đầu tiên datepicker được thiết lập để người dùng không thể chọn một ngày trước ngày hôm nay, nhưng có thể chọn bất kỳ ngày nào trong tương lai.

Làm cách nào tôi có thể thiết lập chế độ xem ngày thứ hai để nó không thể chọn ngày trước ngày được chọn trong bộ chọn ngày đầu tiên? Ví dụ: Nếu hôm nay là 12/11/10 và tôi chọn 12/15/10 trong thanh công cụ ngày đầu tiên, thì trình chọn ngày thứ hai sẽ không thể chọn bất kỳ thứ gì trước ngày 15/12/10.

Heres những gì tôi có cho đến nay:

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

Answer 1

Ví dụ, trong mẫu mã này, startDatePicker được chọn là 2010/12/12, sự kiện thay đổi của startDatePicker đặt minDate của endDatePicker 2010-12-13. Nó khóa các tế bào trước ngày này. Đây là một mẫu cho những gì @Victor đề cập .. Tôi hy vọng nó sẽ giúp ... Kính trọng ... Ozlem.

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true, 
    minDate: new Date(), 
    maxDate: '+2y', 
    onSelect: function(date){ 

     var selectedDate = new Date(date); 
     var msecsInADay = 86400000; 
     var endDate = new Date(selectedDate.getTime() + msecsInADay); 

     //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker 
     $("#endDatePicker").datepicker("option", "minDate", endDate); 
     $("#endDatePicker").datepicker("option", "maxDate", '+2y'); 

    } 
}); 

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true 
}); 

Answer 2

Từ một giao diện người dùng quan điểm thuần túy, bạn không nên. Nếu người dùng chọn tháng sai trên cả hai trình tạo ngày tháng và cố gắng chọn tháng chính xác, anh ấy có 50% thay đổi bị cản trở bởi giao diện người dùng. Lý tưởng nhất, bạn sẽ cho phép lựa chọn không chính xác và hiển thị thông báo lỗi hữu ích cho biết ngày kết thúc phải sau ngày kết thúc.

Nếu bạn muốn triển khai ý tưởng của mình: hãy cung cấp cho mỗi datepicker một sự kiện "change" thay đổi các tùy chọn trên trình ghi ngày tháng khác một cách thích hợp.

Answer 3

Sử dụng phương pháp "getDate" của giao diện người dùng datepicker đầu tiên và vượt qua nó vào minDate tùy chọn datepicker thứ hai:

$("#txtEndDate").datepicker({ 
    showOn: "both", 
    minDate: $("#txtStartDate").datepicker("getDate") 
}); 

Answer 4

Cập nhật:

Cách tiếp cận trên thiết lập minDate chỉ đúng thời hạn sáng tạo. tôi đã sử dụng sự kiện onSelect để thay đổi tùy chọn minDate của datepicker thứ hai như thế này:

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

Answer 5

Sử dụng Bộ luật này:

<script type="text/javascript"> 
    $(function() { 
     $("#txtStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: 'dateToday' 
     }); 
     $("#txtEndDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: $("#txtStartDate").datepicker("getDate") }); 
     }); 
</script> 

Answer 6

thử người đàn ông này:

$("#dateTo").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    minDate: new Date() 
    }).datepicker("setDate", new Date()); 
$("#dateFrom").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function(){ 
     $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate")); 
    } 
    }).datepicker("setDate", new Date()); 

Answer 7

các Tín Man của giải pháp làm việc cho tôi sau khi thêm $ ("# txtEndDate"). datepicker() ở dưới cùng

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

$("#txtEndDate").datepicker(); //it is not working with out this line