Question

我需要使用插件DateTimePicker以及此范围之后的特定第三个日期设置一系列日期。

这是我到目前为止的代码：

HTML

<div class="form-group">
  <label for="startdate" class="control-label">Start Date</label>
  <div class="input-group date" id="startdate">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon-calendar glyphicon text-primary"></span>
    </span>
  </div><!-- input-group -->
</div><!-- form-group -->

<div class="form-group">
  <label for="enddate" class="control-label">End Date</label>
  <div class="input-group date" id="enddate">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon-calendar glyphicon text-primary"></span>
    </span>
  </div><!-- input-group -->
</div><!-- form-group -->

<div class="form-group">
  <label for="thirddate" class="control-label">Third Date</label>
  <div class="input-group date" id="thirddate">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon-calendar glyphicon text-primary"></span>
    </span>
  </div><!-- input-group -->
</div><!-- form-group -->

JAVASCRIPT

$(function () {

    //Enablabling linked pickers
    $('#startdate,#enddate,#thirddate').datetimepicker({
      format: 'MM/DD/YYYY',
      useCurrent: false
    });

    //Setting the range of dates
    $("#startdate").on("dp.change", function (e) {
      $('#enddate').data("DateTimePicker").minDate(e.date);
    });
    $("#enddate").on("dp.change", function (e) {
      $('#startdate').data("DateTimePicker").maxDate(e.date);
    });

    //Setting a third date in the future after the range
    $("#thirddate").on("dp.change", function (e) {
      $('#enddate').data("DateTimePicker").minDate(e.date);
    });
});

该范围的DateTimePickers工作正常，但第三个不正常，因为它没有正确获取minDate值。

Answer 1

希望这会有所帮助。第三个日期选择器允许在结束日期之后选择日期。

<script>
    $(document).ready(function () {
        //Enablabling linked pickers
        $('#startdate,#enddate,#thirddate').datetimepicker({
            format: 'MM/DD/YYYY',
            useCurrent: false
        });

        //Setting the range of dates
        $("#startdate").on("dp.change", function (e) {
            $('#enddate').data("DateTimePicker").minDate(e.date);
        });
        $("#enddate").on("dp.change", function (e) {
            $('#startdate').data("DateTimePicker").maxDate(e.date);
            $('#thirddate').data("DateTimePicker").minDate(e.date); //Added this 
        });

        /* Remove this */

        //Setting a third date in the future after the range
        //$("#thirddate").on("dp.change", function (e) {
        //   $('#enddate').data("DateTimePicker").minDate(e.date);
        //});
    })
</script>

DateTimePicker：设置日期范围和之后的第三个日期

1 个答案: