首页>>表单>>选择时间范围的层 弹出选择时间层(2014-02-20)

选择时间范围的层 弹出选择时间层

选择时间范围的层 弹出选择时间层
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="dialog" title="Select Date Range">  
  2. <div id="message"></div>  
  3.     <form name="dateRange" id="dateRangeForm" action="index.cfm" method="post">  
  4.     <label for="startdate">Start Date</label>  
  5.     <input id="startdate" type="text" readonly /><input type="hidden" name="startdate" id="start_alternate" />  
  6.     <label for="enddate">End Date</label>  
  7.     <input id="enddate" type="text" readonly /><input type="hidden" name="enddate" id="end_alternate" />  
  8.     </form>  
  9. </div>  
  10. </div>  

 

JavaScript Code
  1. <script type="text/javascript" language="javascript">  
  2.   
  3. $(function() {  
  4.           
  5.         $("#startdate").datepicker({altField: '#start_alternate',altFormat: 'yy-mm-dd',minDate: '-1y'});  
  6.         $("#enddate").datepicker({altField: '#end_alternate',altFormat: 'yy-mm-dd',minDate: '-1y'});      
  7.       
  8.         $('button#selectDateRange').click(function(){  
  9.             $('#dialog').dialog('open');  
  10.         });  
  11.                               
  12.     $('#dialog').dialog({  
  13.         autoOpen: false,  
  14.         width: 400,  
  15.         modal: true,  
  16.         resizable: false,  
  17.         close: function() {  
  18.             $('#message').html("");  
  19.             $('#dateRangeForm :input').each(function() {  
  20.                 $(this).val('');  
  21.             });  
  22.          },  
  23.         buttons: {  
  24.             "Close": function() {   
  25.                         $(this).dialog("close");   
  26.                         $('#message').html("");  
  27.                         $('#dateRangeForm :input').each(function() {  
  28.                         $(this).val('');  
  29.                      });  
  30.             },  
  31.             "Submit": function() {   
  32.                 var errors = 0;  
  33.               
  34.                 $('#dateRangeForm :input').each(function() {  
  35.                     if($(this).val() == ''){   
  36.                         $(this).prev().prev().css("color", "red");   
  37.                         $(this).prev().val('Click box and use calendar to enter date.');  
  38.                         errors++;  
  39.                     } else {  
  40.                         $(this).prev().css("color", "black");  
  41.                     }  
  42.                  });  
  43.               
  44.                 if (errors == 0){  
  45.                     // js method to compare dates  
  46.                     var start_date = new Date($("#startdate").val());  
  47.                     var end_date = new Date($("#enddate").val());  
  48.                     if(end_date < start_date){  
  49.                         $('#message').html("<p class='alert alert-error'>Date range is invalid.</p>");   
  50.                     }else{  
  51.                         $('#message').html("<p class='alert alert-success'>Date range is valid.</p>");  
  52.                     }  
  53.                       
  54.                     /* ajax function to compare dates 
  55.                     dataString = $('form').serialize(); 
  56.                     $.ajax({ 
  57.                     type: "POST", 
  58.                     url: "dateRange.php", 
  59.                     data: dataString, 
  60.                     dataType: "json", 
  61.                     success: function(data) { 
  62.                         if(data.error == "invalid"){  
  63.                             $('#message').html("<div class='errorMessage'>Date range is invalid.</div>");  
  64.                         } else { 
  65.                             $('#message').html("<div class='successMessage'>Date range is valid.</div>"); 
  66.                         } 
  67.                     } //end of success 
  68.                      
  69.                     }); //end of ajax   */        
  70.                 } //end of if(errors == 0)  
  71.             } //end of Submit button function  
  72.         } //end of buttons:  
  73.     }); //end of dialog  
  74. });  
  75. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_272.html