驗證日期時間選擇器

Question

我需要讓用戶選擇一個日期和時間並將其作為輸入在這里我已經添加了我使用的基本代碼，我需要限制用戶只添加未來日期和時間而不是過去的日期或時間！

 $(function () { var currentDate = new Date(); $('#datetimepicker1').datetimepicker({ //viewMode: 'years', format: 'DD/MM/YYYY' }); $('#datetimepicker2').datetimepicker({ format: 'LT' }); });

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"> <div class="form-group"> <label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px">* </a>Select a date:</label> <div class="col-sm-8"> <div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;"> <div class='input-group date' id='datetimepicker1'> <input name="datepicker" id="datepicker" type='text' class="form-control" min="2015-01-01" required /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <!--Time picker--> <div class="form-group"> <label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px ; font-size:18px">* </a>Select a time:</label> <div class="col-sm-8"> <div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;"> <div class='input-group date' id='datetimepicker2'> <input name="timepicker" id="timepicker" type='text' class="form-control" required /> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div> </div> </div> </div>

我的問題是我只需要允許用戶輸入未來日期而不是過去日期！

Answer 1

使用 minDate 和 maxDate 選項限制可選日期的范圍。

$('#datetimepicker1').datepicker({ minDate: 0});

請參閱此處的官方文檔。

Answer 2

或者您可以從文檔bootstrap datetimepicker 中查看此示例

    $('.starts_on, .ends_on').datetimepicker({
        format: 'YYYY-MM-DD',
        useCurrent: false,
        minDate: moment()
    });

    $('.starts_on').datetimepicker()
    .on('dp.change', function(v){ 
        var incrementDay = moment(new Date(v.date));
        incrementDay.add(1, 'days');
        $('.ends_on').data('DateTimePicker').minDate(incrementDay);
        $(this).data("DateTimePicker").hide();
    });

    $('.ends_on').datetimepicker()
    .on('dp.change', function(v){
        var decrementDay = moment(new Date(v.date));
        decrementDay.subtract(1, 'days');
        $('.starts_on').data('DateTimePicker').maxDate(decrementDay);
        $(this).data("DateTimePicker").hide();
    });

Answer 3

嘗試這個

 $("#datetimepicker1").datepicker({
        minDate: 1,
        onSelect: function(theDate) {
            $("#datetimepicker1").datepicker('option', 'minDate', new Date(theDate));
        },
       dateFormat: 'mm/dd/yy'
    });

Answer 4

使用 minDate: 1，這應該只允許未來的日期

 $('#datetimepicker1').datetimepicker({
            minDate:1,    
            format: 'DD/MM/YYYY'
 });

Answer 5

我解決了這個問題，謝謝大家的幫助，他們非常有幫助！

$('#datetimepicker1').datetimepicker({
            //viewMode: 'years',
            //minDate:0, 
            //format: 'DD/MM/YYYY'
            format: "MM/DD/YYYY",minDate: new Date()




        });