使用Eonasdan链接DateTime Picker限制用户选择仅在月份之间的日期

时间:2015-12-04 12:45:49

标签: javascript bootstrap-datetimepicker

我正在使用Eonasdan链接日期时间选择器,并且不知道如何限制用户选择一个月之间的日期..(从第一个DateTimePicker的选定日期起一个月,即StartDate)。

HTML

<div class="col-md-9">
                  <div class='input-group date' id="FuelLogStartDate">
                        <input type='text' class="form-control" name="FuelLogStartDate" value="@Model.StartDate.ToString("dd/MM/yyyy HH:mm")" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
   </div>
</div>

<div class="col-md-9">
                    <div class='input-group date' id="FuelLogEndDate">
                        <input type='text' class="form-control" name="FuelLogEndDate" value="@Model.EndDate.ToString("dd/MM/yyyy HH:mm")" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                  </div>
</div>

的JavaScript

<script type="text/javascript">
    $(function () {    

        $('#FuelLogStartDate').datetimepicker({
            format: 'DD/MM/YYYY HH:mm'
        });
        $('#FuelLogEndDate').datetimepicker({
            format: 'DD/MM/YYYY HH:mm',
            useCurrent: false 
        });
        $("#FuelLogStartDate").on("dp.change", function (e) {
            $('#FuelLogEndDate').data("DateTimePicker").minDate(e.date);
        });
        $("#FuelLogEndDate").on("dp.change", function (e) {
            $('#FuelLogStartDate').data("DateTimePicker").maxDate(e.date);
        });

    });
</script>

1 个答案:

答案 0 :(得分:0)

添加以下行以设置最小日期和时间。日期时间选择器的最大日期(在JS中初始化选择器时)。

minDate: moment("2016-01-01T01:00:01-04:00"),
maxDate: moment("2016-01-31T01:00:01-04:00")