Question

我试图动态添加范围datePicker但是为了更好地理解它我创建了4个字段并尝试使用它但我被卡住了。第三个字段保持第一个字段与第四个和第二个字段相同的数据，当我在第三个字段中更改数据时，它会改变第一个字段中的数据...

这是我的HTML代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Select a Date Range</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="Scripts/Calendrier.js">
      <script type="text/javascript" src="Scripts/Adresse.js">
    </script>
  </head>
  <body>

    <div id="periodes" >
      <a>Période 1:</a> <br>
      <label for="dateFrom">Du</label>
      <input type="text" id="dateFrom" name="dateFrom" class="dateFrom">
      <label for="dateTo">Au</label>
      <input type="text" id="dateTo" name="dateTo" class="dateTo">
    </div>

    <div id="periodes" >
      <a>Période 2:</a> <br>
      <label for="dateFrom">Du</label>
      <input type="text" id="dateFrom" name="dateFrom" class="dateFrom">
      <label for="dateTo">Au</label>
      <input type="text" id="dateTo" name="dateTo" class="dateTo">
    </div>
  </body>
</html>

这里是我的功能：

 $( function() {
  var dateFormat = "dd-mm-yy",
      dateFrom = $( ".dateFrom" )
  .datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1
  })
  .on( "change", function() {
    dateTo.datepicker( "option", "minDate", getDate( this ) );
  }),
      dateTo = $( ".dateTo" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
  .on( "change", function() {
    dateFrom.datepicker( "option", "maxDate", getDate( this ) );
  });

  function getDate( element ) {
    var date;
    try {
      date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
      date = null;
    }
    console.log(date);
    return date;
  }
} );

Answer 1

你应该尝试更改“periodes2”中第二个div的id以及id =“dateFrom2”和id =“dateTo2”中的输入：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Select a Date Range</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="Scripts/Calendrier.js">
      <script type="text/javascript" src="Scripts/Adresse.js">
    </script>
  </head>
  <body>

    <div id="periodes" >
      <a>Période 1:</a> <br>
      <label for="dateFrom">Du</label>
      <input type="text" id="dateFrom" name="dateFrom" class="dateFrom">
      <label for="dateTo">Au</label>
      <input type="text" id="dateTo" name="dateTo" class="dateTo">
    </div>

    <div id="periodes2" >
      <a>Période 2:</a> <br>
      <label for="dateFrom">Du</label>
      <input type="text" id="dateFrom2" name="dateFrom" class="dateFrom">
      <label for="dateTo">Au</label>
      <input type="text" id="dateTo2" name="dateTo" class="dateTo">
    </div>

<script>
    $( function() {
  var dateFormat = "dd-mm-yy",
      dateFrom = $( ".dateFrom" )
  .datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1
  })
  .on( "change", function() {
    dateTo.datepicker( "option", "minDate", getDate( this ) );
  }),
      dateTo = $( ".dateTo" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
  .on( "change", function() {
    dateFrom.datepicker( "option", "maxDate", getDate( this ) );
  });

  function getDate( element ) {
    var date;
    try {
      date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
      date = null;
    }
    console.log(date);
    return date;
  }
} );
</script>

</body>
</html>

范围datepicker多个输入仅适用于第一个字段

1 个答案: