bootstrap-datetimepicker 日期控件的开始日期

时间:2023-03-08 17:08:38
bootstrap-datetimepicker 日期控件的开始日期

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

bootstrap-datetimepicker 日期控件的开始日期

主要体现在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),
});

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

bootstrap-datetimepicker 日期控件的开始日期

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),
});