如何指定日期范围 javascript/jquery答案

【问题标题】：How to specified a date's range javascript/jquery如何指定日期范围 javascript/jquery
【发布时间】：2018-04-24 12:55:47
【问题描述】：

<html lang="es">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Solicitud De Vacaciones</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
  <style>
    .bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso 
      form{
        font-family: Arial, Helvetica, sans-serif; color: black
      }
    .bootstrap-iso form button, .bootstrap-iso form button:hover{
      color: white !important;
    } 
    .asteriskField{
      color: red;
    }
  </style>
</head>

<body>              
  <div class="bootstrap-iso">
   <div class="container-fluid">
    <div class="row">
     <div class="col-md-6 col-sm-2 col-xs-12">
      <form action="MovimientoBancario" class="form-horizontal" method="post">

         <div class="form-group ">
          <label class="control-label col-sm-2 requiredField" for="date">
           Desde
           <span class="asteriskField">
            *
           </span>
          </label>
          <div class="col-sm-10">
           <div class="input-group">
            <div class="input-group-addon">
             <i class="fa fa-calendar">
             </i>
            </div>
            <input class="form-control" id="date" name="from" placeholder="YYYY/MM/DD" type="text" required/>
           </div>
          </div>
         </div>
         <div class="form-group ">
          <label class="control-label col-sm-2 requiredField" for="date">
           Hasta
           <span class="asteriskField">
            *
           </span>
          </label>
          <div class="col-sm-10">
           <div class="input-group">
            <div class="input-group-addon">
             <i class="fa fa-calendar">
             </i>
            </div>
            <input class="form-control" id="date" name="to" placeholder="YYYY/MM/DD" type="text" required/>
           </div>
          </div>
         </div>  

         <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
           <input name="_honey" style="display:none" type="text"/>
           <button class="btn btn-primary " name="submit" type="submit">
            Buscar
           </button>
          </div>
         </div>
      </form>
     </div>
    </div>
   </div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

  <!-- Include Date Range Picker -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

  <script>
    $(document).ready(function(){
            var date_input=$('input[id="date"]');
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            date_input.datepicker({
                format: 'yyyy-mm-dd',
                container: container,
                todayHighlight: true,
                autoclose: true,
            })

    })
  </script>
</body>

这是我的代码，我已经在 stackoverflow 上进行了全面搜索，但我找到的解决方案都不适合我，我需要做两件事。

日期二必须大于日期一
日期一必须为您提供从当前日期开始的选项。

我试过这些 Jquery datepicker restrict dates in second date field based on selected date in first date field https://jqueryui.com/datepicker/#min-max

【问题讨论】：

请注意有不同的datepicker 插件。您正在使用引导日期选择器。其他问题的链接使用 jQueryUI datepicker。它们每个都有不同的 API，因此一个解决方案不适用于另一个
在哪里可以找到这些 API 的链接？
简单的网络搜索“bootstrap datepicker”

标签： javascript jquery date

【解决方案1】：

您可以使用 startDate 来限制从当前日期开始。

试试下面的代码，希望能解决你的问题。

<html lang="es">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Solicitud De Vacaciones</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
    <style>
      .bootstrap-iso .formden_header h2,
      .bootstrap-iso .formden_header p,
      .bootstrap-iso form {
        font-family: Arial, Helvetica, sans-serif;
        color: black
      }

      .bootstrap-iso form button,
      .bootstrap-iso form button:hover {
        color: white !important;
      }

      .asteriskField {
        color: red;
      }

    </style>
  </head>

  <body>
    <div class="bootstrap-iso">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6 col-sm-2 col-xs-12">
            <form action="MovimientoBancario" class="form-horizontal" method="post">

              <div class="form-group ">
                <label class="control-label col-sm-2 requiredField" for="date">
           Desde
           <span class="asteriskField">
            *
           </span>
          </label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i class="fa fa-calendar">
             </i>
                    </div>
                    <input class="form-control" class="from_date" id="dpd1" name="from" placeholder="YYYY/MM/DD" type="text" required/>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <label class="control-label col-sm-2 requiredField" for="date">
           Hasta
           <span class="asteriskField">
            *
           </span>
          </label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i class="fa fa-calendar">
             </i>
                    </div>
                    <input class="form-control" id="dpd2" name="to" placeholder="YYYY/MM/DD" type="text" required/>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                  <input name="_honey" style="display:none" type="text" />
                  <button class="btn btn-primary " name="submit" type="submit">
            Buscar
           </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- Include Date Range Picker -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />

    <script>
      $(document).ready(function() {
        var date_input = $('input[id="date"]');
        var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
        var currDate = new Date();
        var date = new Date();
        date.setDate(date.getDate());
        $('#dpd1').datepicker({
          format: 'yyyy-mm-dd',
          startDate: date,
          container: container,
          todayHighlight: true,
          autoclose: true,
        })

        $('#dpd1').datepicker().on('changeDate', function() {
          $('#dpd2').val('')
        })


        $('#dpd2')
          .datepicker()
          .on('show', function(ev) {
            var toDate = $('#dpd1').datepicker("getDate");
            toDate.setDate(toDate.getDate() + 1);
            $('#dpd2').datepicker("setStartDate", toDate);
          })
          .on('changeDate', function(ev) {
            var date1 = $('#dpd1').datepicker("getDate").valueOf();
            var date11 = $('#dpd1').datepicker("getDate");
            date11.setDate(date11.getDate() + 1);
            var date2 = ev.date.valueOf();
            if (date2 <= date1) {
              alert("Second date bigger than first!");
              $('#dpd2').datepicker("setDate", date11);
            }

          });

      })

    </script>
  </body>

DEMO

【讨论】：

【解决方案2】：

我注意到您在两个具有不同 name 属性的文本框上使用了相同的 id。对所有控件使用不同的 ID 是一种很好的做法。

不管怎样，这是您需要在 jquery 中进行的更改

$(document).ready(function() {
  var date_input = $('input[name="from"]');
  var date1_input = $('input[name="to"]');
  var container =
    $(".bootstrap-iso form").length > 0
      ? $(".bootstrap-iso form").parent()
      : "body";
  date_input
    .datepicker({
      format: "yyyy-mm-dd",
      container: container,
      todayHighlight: true,
      autoclose: true,
      startDate: new Date()
    })
    .on("changeDate", function(e) {
      var desdeDate = e.date;
      desdeDate.setDate(desdeDate.getDate() + 1);
      date1_input.datepicker({
        format: "yyyy-mm-dd",
        autoclose: true
      });
      date1_input.datepicker("setStartDate", desdeDate);
      date1_input.focus();
    });
});

请注意，我使用名称属性来选择文本框，changeDate 事件是计算第二个文本框的新开始日期值，然后使用 datepicker 插件的setStartDate 方法初始化。

您可以在their website 找到许多其他调整选项。

【讨论】：