Question

我有一个日期时间选择器控件（Datestpicker for Bootstrap 3 * version：4.15.35）。如果开始日期是今天，并且如果用户选择开始时间作为过期时间，我想限制它。用户不应该选择过期时间。我的意思是，如果当前时间是9 A.M，那么用户不应该在上午9点之前选择任何时间。但是，如果开始日期是明天，那么用户可以随时选择。

用户应该能够选择大于当前日期时间的任何日期时间。我目前的代码如下：

的index.html

<div class="row">
    <div class="col-sm-6">
        <label class="control-label">Start date:<em style="color:red">*</em></label>
        <div class="form-group">
            <div class="input-group date" id="startDatepicker">
                <input type="text" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate">
                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <label class="control-label">End date:<em style="color:red">*</em></label>
        <div class="form-group">
            <div class="input-group date" id="endDatepicker">
                <input type="text" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultEndDate" name="endDate">
                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

    <!--/col-->
    <div class="col-sm-6">
        <label class="control-label">Start Time:<em style="color:red">*</em></label>
        <div class="form-group">
            <div class="input-group" id="startTimepicker">
                <input type="text" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultStartTime" name="startTime">
                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <label class="control-label">End Time:<em style="color:red">*</em></label>
        <div class="form-group">
            <div class="input-group" id="endTimepicker">
                <input type="text" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultEndTime" name="endTime">
                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-time"></span>

                </span>
            </div>
        </div>

    </div>
</div>

在controller.js

中

 var setDefaultDate = new Date();
    $scope.defaultStartDate = moment(setDefaultDate).format('MM/DD/YYYY');
    $scope.defaultEndDate = moment(setDefaultDate).add(1, 'day').format('MM/DD/YYYY');
    $scope.defaultStartTime = moment(setDefaultDate).format("hh:mm a");
    $scope.defaultEndTime = moment(setDefaultDate).format("hh:mm a");
    jQuery('#startDatepicker').datetimepicker({
        format: 'MM/DD/YYYY',
        defaultDate: new Date()
    });
    jQuery('#endDatepicker').datetimepicker({
        format: 'MM/DD/YYYY',
        useCurrent: false
    });
    jQuery('#startDatepicker').data("DateTimePicker").minDate($scope.defaultStartDate);
    jQuery('#endDatepicker').data("DateTimePicker").minDate($scope.defaultEndDate);

    jQuery("#startDatepicker").on("dp.change", function(e) {        
        jQuery('#startDatepicker').focus();        
        jQuery('#endDatepicker').data("DateTimePicker").minDate(e.date);
    });
    jQuery("#endDatepicker").on("dp.change", function(e) {
        jQuery('#endDatepicker').focus();
        jQuery('#startDatepicker').data("DateTimePicker").maxDate(e.date);
    });
    jQuery('#startTimepicker').datetimepicker({
        format: 'LT'
    });
    jQuery('#endTimepicker').datetimepicker({
        format: 'LT'
    });

如何设置验证？感谢

根据AngularJs中的日期限制时间

0 个答案: