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

试试这个

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

Answer 2

使用minDate和maxDate选项限制可选日期的范围。

var parent = this;

请参阅官方文档here。

Answer 3

使用minDate：1，这应该只允许将来的日期

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

Answer 4

我的问题解决了，谢谢大家的帮助，他们非常有帮助！

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




        });

Answer 5

或者您可以查看此示例

    $('.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();
    });

验证日期时间选择器

5 个答案: