日期控件--bootstrap && jquery

今天做日期控件，需求要求设置一个时间范围限制，选择从今天开始的日期才可以选择，今天以前都不可以选择

主要体现在bootstrap-datetimepicker控件下面的2个日期参数

weekStart: 1, startDate:new Date(日期),

引用的基础库有

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script><script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script><script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

HTML代码

<div class="form-group">    <label for="dtp_input3" class="col-md-2 control-label">time start</label>    <div class="input-group date form_date_start col-md-3">        <input class="form-control" size="16" type="text" value="" readonly>        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>        <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>    </div>    <input type="hidden" id="dtp_input3" value="" /></div>

JS代码

    var newDate = new Date();    var t       = newDate.toJSON();     $('.form_date_start').datetimepicker({        format: 'yyyy-mm-dd',        language:  'fr',        weekStart: 1,        todayBtn:  1,        autoclose: 1,        todayHighlight: 1,        startView: 2,        minView: 2,        forceParse: 0,        weekStart: 1,          startDate:new Date(t),    });

 

 

 

附：精确到分的时间、年月日、时间、年月、月日、从今天开始、到今天结束

HTML

<div class="container">    <form action="" class="form-horizontal"  role="form">        <fieldset>            <legend>Test</legend>            <div class="form-group">                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>                <div class="input-group date form_datetime col-md-5"   >                    <input class="form-control" size="16" type="text" value="" readonly>                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>                </div>                <input type="hidden" id="dtp_input1" value="" /><br/>            </div>            <div class="form-group">                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>                <div class="input-group date form_date col-md-5" >                    <input class="form-control" size="16" type="text" value="" readonly>                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>                </div>                <input type="hidden" id="dtp_input2" value="" /><br/>            </div>            <div class="form-group">                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">                    <input class="form-control" size="16" type="text" value="" readonly>                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>                </div>                <input type="hidden" id="dtp_input3" value="" /><br/>            </div>            <div class="form-group">                <label for="dtp_input3" class="col-md-2 control-label">month Picking</label>                <div class="input-group date form_month col-md-5">                    <input class="form-control" size="16" type="text" value="" readonly>                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>                </div>                <input type="hidden" id="dtp_input3" value="" /><br/>            </div>            <div class="form-group">                <label for="dtp_input3" class="col-md-2 control-label">month date Picking</label>                <div class="input-group date form_month_date col-md-5">                    <input class="form-control" size="16" type="text" value="" readonly>                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>                </div>                <input type="hidden" id="dtp_input3" value="" /><br/>            </div>            <div class="form-group">                <label for="dtp_input3" class="col-md-2 control-label">year Picking</label>                <div class="input-group date form_year col-md-5">                    <input class="form-control" size="16" type="text" value="" readonly>                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>                </div>                <input type="hidden" id="dtp_input3" value="" /><br/>            </div>            <div class="form-group">                <label for="dtp_input3" class="col-md-2 control-label">time start</label>                <div class="input-group date form_date_start col-md-3">                    <input class="form-control" size="16" type="text" value="" readonly>                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>                </div>                <input type="hidden" id="dtp_input3" value="" />            </div>            <div class="form-group">                <label for="dtp_input3" class="col-md-2 control-label">time end</label>                <div class="input-group date form_date_end col-md-3">                    <input class="form-control" size="16" type="text" value="" readonly>                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>                </div>                <input type="hidden" id="dtp_input3" value="" />            </div>        </fieldset>    </form></div>

JS

$('.form_datetime').datetimepicker({    //精确到分的时间    format: 'yyyy-mm-dd - HH:ii p',    weekStart: 1,    todayBtn:  1,    autoclose: 1,    todayHighlight: 1,    startView: 2,    forceParse: 0,    showMeridian: 1,    minuteStep : 1});$('.form_date').datetimepicker({    //年月日    format: 'yyyy-mm-dd',    language:  'fr',    weekStart: 1,    todayBtn:  1,    autoclose: 1,    todayHighlight: 1,    startView: 2,    minView: 2,    forceParse: 0});$('.form_time').datetimepicker({    //时间    format:"hh:ii",    language:  'fr',    weekStart: 1,    todayBtn:  1,    autoclose: 1,    todayHighlight: 1,    startView: 1,    minView: 0,    maxView: 1,    forceParse: 0,    minuteStep : 1});$('.form_month').datetimepicker({    //年月    format: 'yyyy-mm',       weekStart: 1,       autoclose: true,       startView: 3,       minView: 3,       forceParse: false,       language: 'zh-CN'});$('.form_month_date').datetimepicker({    //月日    format:"mm-dd",    language:  'fr',    weekStart: 1,    todayBtn:  1,    autoclose: 1,    todayHighlight: 1,    startView: 2,    minView: 2,    forceParse: 0});$('.form_year').datetimepicker({    format: 'yyyy-mm',       weekStart: 1,       autoclose: true,       startView: 4,       minView: 4,       forceParse: false,       language: 'zh-CN'     });var newDate = new Date();var t       = newDate.toJSON(); $('.form_date_start').datetimepicker({    //从今天开始    format: 'yyyy-mm-dd',    language:  'fr',    weekStart: 1,    todayBtn:  1,    autoclose: 1,    todayHighlight: 1,    startView: 2,    minView: 2,    forceParse: 0,    weekStart: 1,     startDate:new Date(t),});$('.form_date_end').datetimepicker({    //到今天结束    format: 'yyyy-mm-dd',    language:  'fr',    weekStart: 1,    todayBtn:  1,    autoclose: 1,    todayHighlight: 1,    startView: 2,    minView: 2,    forceParse: 0,    weekEnd: 1,     endDate:new Date(t),});