今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始的日期才可以选择,今天以前都不可以选择
主要体现在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 startlabel> <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>Testlegend> <div class="form-group"> <label for="dtp_input1" class="col-md-2 control-label">DateTime Pickinglabel> <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 Pickinglabel> <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 Pickinglabel> <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 Pickinglabel> <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 Pickinglabel> <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 Pickinglabel> <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 startlabel> <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 endlabel> <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),
});