日期选择器范围

版权声明:本文为博主原创文章,未经博主允许不得转载。一旦发现,后果自负. https://blog.csdn.net/qq_40884473/article/details/79801538

拿过去就可直接用,你只需要下载引入一个js

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器(Datepicker) - 选择一个日期范围</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>
<body>
 
<label for="from">从</label>
<input type="text" id="from" name="from">
<label for="to">到</label>
<input type="text" id="to" name="to">
 
 
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_40884473/article/details/79801538