Ngày hạn chế ngày tháng trong ngày đầu tiên trong trường ngày đầu tiên

Question

Tôi đang sử dụng bộ chọn ngày Jquery và tôi có mã sau đây khi người dùng chọn ngày, trường bên dưới được điền ngày +1

$('#dt2').datepicker({ 
     dateFormat: "dd-M-yy" 
    }); 

$("#dt1").datepicker(
    {dateFormat: "dd-M-yy", 
    minDate: 0, 
onSelect: function(date){ 
var date2 = $('#dt1').datepicker('getDate'); 
      date2.setDate(date2.getDate()+1); 
      $('#dt2').datepicker('setDate', date2); 

Tôi muốn giới hạn ngày trong trường dt2 không được dưới ngày trong trường dt1. Ví dụ. Nếu ngày được chọn trong dt1 là 01-May-2013, thì người dùng được phép chọn ngày sau 01-May-2013, không nhỏ hơn 02-May-2013

Làm cách nào để hạn chế việc chọn ngày trong trường ngày 2?

Answer 1

Tôi tạo ra một jsfiddle cho bạn. Tôi không chắc chắn 100% nếu nó "dễ dàng" nhưng để ngăn người dùng nhập ngày bằng tay bạn có thể đặt đầu vào thành readonly ví dụ:

<input type="text" id="dt1" readonly="readonly"> 

Hiện tại tôi kiểm tra dt2 onClose và nếu ngày của nó dưới dt1s thì tôi đã sửa nó. Ngoài ra, nếu ngày được chọn trong dt1, minDate của dt2 được đặt thành ngày dt1 +1.

$(document).ready(function() { 

    $("#dt1").datepicker({ 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function (date) { 
      var date2 = $('#dt1').datepicker('getDate'); 
      date2.setDate(date2.getDate() + 1); 
      $('#dt2').datepicker('setDate', date2); 
      //sets minDate to dt1 date + 1 
      $('#dt2').datepicker('option', 'minDate', date2); 
     } 
    }); 
    $('#dt2').datepicker({ 
     dateFormat: "dd-M-yy", 
     onClose: function() { 
      var dt1 = $('#dt1').datepicker('getDate'); 
      var dt2 = $('#dt2').datepicker('getDate'); 
      //check to prevent a user from entering a date below date of dt1 
      if (dt2 <= dt1) { 
       var minDate = $('#dt2').datepicker('option', 'minDate'); 
       $('#dt2').datepicker('setDate', minDate); 
      } 
     } 
    }); 
}); 

Xem các jsfiddle

Answer 2

Dưới đây là làm thế nào tôi làm điều đó -

DEMO

Và mã như sau

$('#dt2').datepicker({ 
    dateFormat: "dd-M-yy" 
}); 

$("#dt1").datepicker({ 
    dateFormat: "dd-M-yy", 
    minDate: 0, 
    onSelect: function(date){    
     var date1 = $('#dt1').datepicker('getDate');   
     var date = new Date(Date.parse(date1)); 
     date.setDate(date.getDate() + 1);   
     var newDate = date.toDateString(); 
     newDate = new Date(Date.parse(newDate));      
     $('#dt2').datepicker("option","minDate",newDate);    
    } 
}); 

Answer 3

tôi chỉ cần thay đổi mã của bạn, do đó ngày phút cho date2 thiết lập tự động & nếu date1 lớn hơn date2, nó thiết lập date2 = date1

$("#dt1").datepicker({ 
      dateFormat: "dd/mm/yy", 
      onSelect: function (date) { 
       var dt1 = $('#dt1').datepicker('getDate'); 
       var dt2 = $('#dt2').datepicker('getDate'); 
       if (dt1 > dt2) { 
        $('#dt2').datepicker('setDate', dt1); 
       } 
       $('#dt2').datepicker('option', 'minDate', dt1); 
      } 
     }); 
     $('#dt2').datepicker({ 
      dateFormat: "dd/mm/yy", 
      minDate: $('#dt1').datepicker('getDate'), 
      onClose: function() { 
       var dt1 = $('#dt1').datepicker('getDate'); 
       var dt2 = $('#dt2').datepicker('getDate'); 
       //check to prevent a user from entering a date below date of dt1 
       if (dt2 <= dt1) { 
        var minDate = $('#dt2').datepicker('option', 'minDate'); 
        $('#dt2').datepicker('setDate', minDate); 
       } 
      } 
     });