验证minDate引导日期时间选择器格式(HH:mm)

时间:2018-07-15 12:38:07

标签: momentjs datetimepicker datetime-format bootstrap-datetimepicker angular-moment

我正在系统中使用引导日期时间选择器功能。

,第一个datetimepicker格式为YYYY-MM-DD,第二个datetimepicker格式为HH:mm

我尝试以下验证:当第一个datetimepicker选择日期时,第二个datetimepicker minDate将成为HH:mm格式的选择日期。
               但是失败了: 我在今天设置了第一个datetimepicker minDate,并且在尝试使用minDate库时,第二个datetimepicker验证moment()失败:

 $('#datetimepicker5').datetimepicker({
        format: 'L',
        showTodayButton: true,
        minDate: new Date()-1,
        format: 'YYYY-MM-DD'
    }).on('dp.change', function(e) {

            var fromDate =    $("#datetimepicker5").data("date");
            var chosenTime =  $("#datetimepicker6").data("date");

            if(moment(moment(e.date).format( 'YYYY-MM-DD'), 'YYYY-MM-DD',true).isValid()){
                  if( moment(e.date).isSame(formatDate(new Date)) ){
                    alert("SAME DATE")
                    console.log("SAME DATE")
                    var nowTime =  moment().format('HH:mm');
                    if(nowTime  > formatHourAndMinute(new Date (0, 0, 0, chosenTime.split(":")[0],chosenTime.split(":")[1]))){
                          $('#datetimepicker6').data("DateTimePicker").date(nowTime);
                          $('#datetimepicker6').data("DateTimePicker").minDate(nowTime);
                    }
                }      
            }else{
                alert(" Sorry the date you selec is not valid.");
                $scope.dateTimePickerFailed = false;
            }
    });

    $('#datetimepicker6').datetimepicker({
        format: 'HH:mm',
        showTodayButton: true,
        minDate:   $("#datetimepicker5").data("date"),

    }).on('dp.change', function(e) {
         var beginningTime = moment({h: +e.date.format('HH'), m: +e.date.format('mm')});
          var nowTime = moment().format('HH:mm');

          var choosenDate =    $("#datetimepicker5").data("date");
          var chosenTime =  $("#datetimepicker6").data("date");
             var selectedTime = $("#selectedTime").val();

             if(moment(moment(e.date).format( 'HH:mm'),'HH:mm',true).isValid()){

                    if( moment(choosenDate).isSame(formatDate(new Date)) ){
                        if(nowTime  > formatHourAndMinute(new Date (0, 0, 0, chosenTime.split(":")[0],chosenTime.split(":")[1])) ){
                              $('#datetimepicker6').data("DateTimePicker").date(nowTime);
                              $('#datetimepicker6').data("DateTimePicker").minDate(nowTime);
                        }
                    }   
             }else{
                    alert(" Sorry the date you selec is not valid.");
                    $scope.timePickerFailed = false;
                }        

        });
    function formatHourAndMinute(date) {
        var d = new Date(date),
            hour = '' + parseInt(d.getHours()+1),
            minute = '' + d.getMinutes();

        if (hour.length < 2) hour = '0' + hour;
        if (minute.length < 2) minute = '0' + minute;

        return [hour, minute].join(':');
    }
    function formatDate(date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('-');
    }

这是HTML:

 <div class="form-group"
                     data-ng-class="{true: 'error'}[submitted && userForm.pickDate.$invalid]">
                <div class="col-sm-6">
                        <label class="control-label">Date :</label>
                         <div class="form-group">   
                            <div class="input-group date" id="datetimepicker5">
                                    <input type="text" 
                                           id="selectedDate"
                                           class="form-control"
                                           name="pickDate" 
                                           required="required"  
                                           required />  
                               <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
                            </div>
                        </div>
                     </div>
                     <span class="help-inline" data-ng-if="submitted && userForm.pickDate.$error.required">Pick date is required.</span>
                </div>  

                  <div class="form-group"
                         data-ng-class="{true: 'error'}[submitted && userForm.pickTime.$invalid]">
                        <div class="col-sm-6">
                            <label class="control-label">Time  :</label>
                            <div class="form-group">
                                <div class="input-group date" id="datetimepicker6">
                                    <input data-format="hh:mm"
                                           type="text"
                                           id="selectedTime" 
                                           class="form-control"
                                           name="pickTime" 
                                          required="required"  required />  <span class="input-group-addon"><span class="glyphicon-time glyphicon"></span></span>
                                </div>
                            </div>  
                        </div>  
                         <span class="help-inline" data-ng-if="submitted && userForm.pickTime.$error.required">Pick time is required.</span>
                    </div>      

0 个答案:

没有答案