asp.net中的jquery Datepick範圍和無效日期驗證

Question

我正在使用datepicker在asp.net中的datalist控件中選擇日期。該場景是用戶選擇2個文本框的日期，然後單擊導出爲Excel按鈕，然後系統生成Excel數據文件，其中包含給定日期內的數據。問題是我想限制用戶選擇之前的日期點擊導出按鈕，第二次選擇的日期應大於使用Jquery選擇的第一次日期，下面是代碼：

<asp:Button runat="server" ID="btnExportbwDates" 
    Text="Export between Dates" onclick="btnExportbwDates_Click" /> 
    <asp:TextBox runat="server" ID="txtDateRangeOne" CssClass="txtDateRangeOne"></asp:TextBox> 
    <asp:TextBox runat="server" ID="txtDateRangeTwo" CssClass="txtDateRangeTwo"></asp:TextBox> 

    <script type="text/javascript"> 
    $(document).ready(function() { 

     var pickerOpts = { 
      dateFormat: "dd/mm/yy" 

     }; 

     $(".txtDateRangeOne").datepicker(pickerOpts); 
     $(".txtDateRangeTwo").datepicker(pickerOpts); 

    }); 
</script> 

Answer 1

$(document).ready(function() { 
      var dates = $(".txtDateRangeOne, .txtDateRangeTwo").datepicker({ 
       showOtherMonths: true, 
       selectOtherMonths: true, 
       showOn: "both", 
       showAnim: "slide", 
       showButtonPanel: true, 
       changeMonth: true, 
       changeYear: true, 
       numberOfMonths: 2, 
       buttonImageOnly: true, 
       onSelect: function (selectedDate) { 
        var option = this.className.indexOf("txtDateRangeOne") >= 0 ? "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); 
       } 
      }); 
}); 

Answer 2

試試這個。

$(document).ready(function() { 
    $(".txtDateRangeOne").datepicker({ 
     dateFormat: "dd/mm/yy" 
     onSelect: function(date){ 
      //Once you select first date set this date as the minDate 
      //of second datepicker 
      $(".txtDateRangeTwo") 
      .datepicker({ minDate: new Date(date) }); 
     } 
    }); 
    $(".txtDateRangeTwo").datepicker({ dateFormat: "dd/mm/yy" }); 

    $('#btnExportbwDates').click(function(){ 
     var startDate = $('.txtDateRangeOne').datepicker("getDate"); 
     var endDate = $('.txtDateRangeTwo').datepicker("getDate"); 
     if(!startDate){ 
      alert('Select start date'); 
      return false; 
     } 
     if(!endDate){ 
      alert('Select end date'); 
      return false; 
     } 
     if(startDate > endDate){ 
      alert('Select valid date range'); 
      return false; 
     } 

     return true; 
    }); 
});