今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始的日期才可以选择,今天以前都不可以选择
主要体现在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), });