今天做日期控件，需求要求设置一个时间范围限制，选择从今天开始的日期才可以选择，今天以前都不可以选择
主要体现在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),
});
相关推荐
bootstrap-datetimepicker是一个简单好用的日历时间插件，在bootstrap首页上也有推荐。使用起来也很简单： 1，必须引入Jquery文件。 2，引入日历插件JS代码：bootstrap-datetimepicker.min.js 3，如果需要使用非英文...
Bootstrap-Datetimepicker是一款基于Bootstrap框架的日期和时间选择插件，它为网页应用程序提供美观、易用的日历组件。这个压缩包包含该插件运行所需的JavaScript（js）和样式表（css）文件，使得开发者能够方便地在...
Bootstrap-Datetimepicker.js是一款基于Bootstrap框架的日期时间选择器插件，它为用户提供了便捷的方式来选取日期和时间，尤其在Web应用中常用于表单输入。这个插件的设计风格与Bootstrap一致，确保了与Bootstrap...
Bootstrap-datetimepicker是一款基于Bootstrap框架的日期时间选择插件，它允许用户方便地选择精确到秒的时间和日期。这个插件极大地增强了Bootstrap原有基础组件的功能，使得开发者在构建交互式Web应用时，能够提供...
以上代码创建了一个基本的Bootstrap-Datetimepicker时间控件DEMO，用户可以点击日历图标或者直接在输入框中输入日期和时间。`format`参数定义了日期和时间的显示格式，`locale`参数设置了中文语言，`sideBySide`参数...
Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件，它提供了美观、易用的用户界面，用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本，确保了与不同Bootstrap设计...
Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间和日期选择插件，它为用户提供了直观、易用的界面来选择日期和时间。这款插件广泛应用于网页应用中，以增强用户体验，简化日期与时间输入的过程。 Bootstrap...
基于bootstrap-datetimepicker的日期选择中文汉化，同时可以获取选择到的日期 使用说明可见博客： https://blog.csdn.net/qq_41986312/article/details/83750975
时间控件 中文 可以设置日历为中文 帮助开发 * Simplified Chinese translation for bootstrap-datetimepicker * Yuan Cheung <advanimal@gmail.com>
Bootstrap-Datetimepicker是一款基于Bootstrap框架的日期时间选择插件，它极大地增强了HTML5原生日期输入控件的功能。在原始版本中，用户通常只能选择日期和小时，但在这个修改后的版本中，它增加了选择秒的功能，...
bootstrap日历控件datetimepicker，所需工具类：bootstrap.css；bootstrap-datetimepicker.min.css；bootstrap.min.js；bootstrap-datetimepicker.min.js
react-bootstrap-datetimepicker 时间选择控件
Bootstrap-Datetimepicker是一款基于Bootstrap框架的插件，用于在网页中添加日期和时间选择功能。这个插件大大增强了Bootstrap原生的输入控件，提供了更丰富的用户交互体验和灵活的配置选项。对于初学者，理解并正确...
在本压缩包“bootstrap-datetimepicker-master.zip”中，包含了一个基于Bootstrap的日期时间选择器插件，这是一款用于在网页上方便用户选择日期和时间的交互控件。 这个插件的核心功能是提供一个用户友好的界面，...
bootstrap-datetimepicker时间控件的js和css包括：bootstrap-datetimepicker.js；moment-with-locales.min.js（汉化js）；bootstrap-datetimepicker.min.css
Bootstrap-Datetimepicker是一款基于Bootstrap框架的插件，用于在网页中添加日期和时间选择功能。这个控件提供了用户友好的界面，使得用户可以方便地选取日期和时间，从而提高网站或应用的交互体验。以下是对该插件...
js的date控件样式优化
js的date选择控件需要的js文件.