Bootstrap-datetimepicker

其他 2018-06-08 05:08:10 阅读次数: 2

Bootstrap-datetimepicker日期时间选择器示例（下面列出了未搞明白的问题，及版本待优化的问题）；

jquery、bootstrap-datetimepicker的css和js也要各位自己引入了。

bootstrap-datetimepicker-ext.css只是自己修改hover时的背景色，和对.old、.new、.disabled字体颜色深浅做了调整。

bootstrap-datetimepicker-ext.css

/*将各按钮hover时的背景色改变；disabled的字体颜色更淡化，直观地知道不能选；*/
.datetimepicker table tr td.old, .datetimepicker table tr td.new {
	color: #999;
}
.datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot th:hover, 
.datetimepicker table tr td .minute:hover, .datetimepicker table tr td .hour:hover, 
.datetimepicker table tr td.day:hover, .datetimepicker table tr td .month:hover, 
.datetimepicker table tr td .year:hover {
	background: #00a258;
	color: #fff;
}
/*让disabled的日期字体颜色更淡，更直观知道不能选；这里还需要加background: none;是保证disabled的背景色样式不被覆盖；*/
.datetimepicker table tr td.disabled,
.datetimepicker table tr td.disabled:hover {
	background: none;
	color: #ddd;
}
页面 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>Bootstrap-datetimepicker</title>
  <meta charset="utf-8"/>
  <!-- 需要引入bootstrap.min.css样式，否则无法有浮动的datetimepicker -->
  <link href="../public/bs3/css/bootstrap.min.css" rel="stylesheet">
  <link href="../public/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
  <link href="../static/css/bootstrap-datetimepicker-ext.css" rel="stylesheet">
</head>

<body>
<div class="container">
  <form action="" class="form-horizontal"  role="form">
	<fieldset>
	  <legend>bootstrap-datetimepicker样式</legend>
	
	  <div class="form-group col-md-6">
	    <label for="dtp_input1" class="col-md-5 control-label">基本样式：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input1" class="form-control" type="text" value="">
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input2" class="col-md-5 control-label">添加属性：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input2" class="form-control" type="text">
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
		<label for="dtp_input3" class="col-md-5 control-label">清空按钮和日期选择按钮：</label>
		<div id="dtp_input3" class="input-group date col-md-7" data-date-format="dd-mm-yyyy">
		  <input class="form-control" type="text" value="12-02-2012">
		  <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>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input19" class="col-md-5 control-label">自定义样式：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input19" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>	  
	</fieldset>

	<fieldset>
	  <legend>bootstrap-datetimepicker视图</legend>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input4" class="col-md-5 control-label">(startView)开始视图：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input4" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input5" class="col-md-5 control-label">minView和maxView：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input5" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input6" class="col-md-5 control-label">viewSelect：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input6" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
		
	  <div class="form-group col-md-6">
	    <label for="dtp_input7" class="col-md-5 control-label">showMeridian：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input7" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input8" class="col-md-5 control-label">weekStart：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input8" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input9" class="col-md-5 control-label">minuteStep：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input9" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input10" class="col-md-5 control-label">keyboardNavigation：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input10" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input11" class="col-md-5 control-label">startDate和endDate：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input11" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input12" class="col-md-5 control-label">daysOfWeekDisabled：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input12" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input13" class="col-md-5 control-label">forceParse：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input13" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input14" class="col-md-5 control-label">pickerReferer：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input14" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input15" class="col-md-5 control-label">initialDate：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input15" class="form-control" type="text">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input16" class="col-md-5 control-label">日期1：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input16" class="form-control" type="text" placeholder="日期1">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input17" class="col-md-5 control-label">日期2：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input17" class="form-control" type="text" placeholder="大于日期1">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	  
	  <div class="form-group col-md-6">
	    <label for="dtp_input18" class="col-md-5 control-label">日期3：</label>
	    <div class="input-group col-md-7">
		  <input id="dtp_input18" class="form-control" type="text" placeholder="大于日期2">
		  <span class="input-group-addon">
		    <span class="glyphicon glyphicon-th"></span>
		  </span>
	    </div>
	  </div>
	</fieldset>
	
	<hr>
	1.视图只能选到分钟，秒为当前时间的秒数，如何选取秒；<br/>
	2.<code>input框右侧的日期选择按钮和清空值按钮</code>体验不友好；加了清空值和选取日期按钮为什么对pickerPosition有影响；<br/>
	3.<code>pickerPosition</code>不能根据控件位置自动决定位置；<br/>
	4.<code>startDate</code>和<code>endDate</code>,到最后十年视图的时候选不到2016，只能点箭头翻页去选；<br/>
	也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，
	并将解析后的正确值按照给定的格式<code>format</code>设置到输入框中。
	输入不为日期，返回"1899-12-31",具体格式参考<code>format</code>;
	输入日期缺少时分秒，参考<code>format</code>以0补全;年月日缺少,则日期返回"1899-12-31";<br/>
	5.<code>daysOfWeekDisabled</code>可禁止星期几可选;在startDate和endDate之间是否有相应参数可禁止具体日期和日期范围可选;<br/>
	6.<code>viewSelect</code>Number or String.（未见到效果） 默认值值: <code>same as minView</code> (supported values are: 'decade', 'year', 'month', 'day', 'hour')<br/>
        With this option you can select the view from which the date will be selected.<br/>
	    By default it's the last one, however you can choose the first one, so at each click the date will be updated.<br/>
	7.<code>autoClose</code>可为Boolean和"linked";如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。（未看出true和"blinked"的区别）<br/>
	8.<code>pickerReferer</code>String. 默认值: 'default' (other value available : 'input');
      The referer element to place the picker for the component implementation. 
	  If you want to place the picker just under the input field, just specify input.（没看到效果）<br/>
	9.手工录入日期时间，无法验证值是否在startDate和endDate之间或者是否为daysOfWeekDisabled，格式是否满足format等等；<br/>
	10.先选日期1，再选日期3，如果选取日期3 < 日期1，则日期2无日期可选取；
                  或者：先选日期3，再选日期1，如果选取日期3 < 日期1，则日期2无日期可选取；
	        因为如果不是从日期1 -> 日期2 -> 日期3 或者 日期3 -> 日期2 -> 日期1 或者先选可将日期1和日期3构建关系的日期2，则会造成日期2没得选的情况，所以；日期1和日期3中也要设置其日期关系。<br/>
	11.日期时间选择器，常用的参数比较固定；是否考虑提供默认参数配置；或自行进行自定义包装方法调用；
  </form>
</div>

<script type="text/javascript" src="../public/js/jquery-1.x.min.js" charset="UTF-8"></script>
<!-- 
<script type="text/javascript" src="../public/bs3/js/bootstrap.min.js"></script>
 -->
<script type="text/javascript" src="../public/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../public/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
	//.datetimepicker(options)初始化日期时间选择器;
	$("#dtp_input1").datetimepicker();
	
	$("#dtp_input2").datetimepicker({
	  format: 'yyyy-mm-dd hh:ii:ssZ P',//格式化日期时间(一位和两位的区别，是否有前导0;具体见：http://www.bootcss.com/p/bootstrap-datetimepicker/)
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  todayHighlight : true,//如果为true, 高亮当前日期。(默认值：false;format只能是年月日才能高亮显示今天的日期;选择了其他日期，再选日期就可以看到浅橙色)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false;)
	});
	
	$('#dtp_input3').datetimepicker({
	  language : 'zh-CN',//本地化（需要引入locales里的js，例如：bootstrap-datetimepicker.zh-CN.js）
	  format: 'yyyy-mm-dd hh:ii:ss',//格式化日期时间
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  pickerPosition : 'bottom-left',//此选项当前只在组件实现中提供支持。
	  //通过设置选项可以讲选择器放倒输入框下方。(默认值：'bottom-right';有'top-left','top-right','bottom-left','bottom-right'四个选项)
	});
	
	$('#dtp_input4').datetimepicker({
	  language : 'zh-CN',//本地化（需要引入locales里的js，例如：bootstrap-datetimepicker.zh-CN.js）
	  format: 'yyyy-mm-dd hh:ii:ss',//格式化日期时间
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  startView : 3,//0 == 'hour'; 1 == 'day'; 2 == 'month'; 3 == 'year'; 4 == 'decade';(默认值值：2,'month')
	});
	
	$('#dtp_input5').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  minView : 2,//最精确时间视图;0 == 'hour'; 1 == 'day'; 2 == 'month'; 3 == 'year'; 4 == 'decade';(默认值值：0,'hour')
	  maxView : 3,//最大范围时间视图;0 == 'hour'; 1 == 'day'; 2 == 'month'; 3 == 'year'; 4 == 'decade';(默认值值：4,'decade')
	});
	
	$('#dtp_input6').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  viewSelect : 'month',//同minView
	});
	
	$('#dtp_input7').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  showMeridian : true,//用于day视图时选择几点,作用于day、hour视图(默认值：false)
	});
	
	$('#dtp_input8').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  weekStart : 5,//一周从哪一天开始。0（星期日）到6（星期六）;(默认值：0,星期天)
	});
	
	$('#dtp_input9').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  minuteStep : 2,//此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。(默认值：5)
	  pickerPosition : 'top-right',
	});
	
	$('#dtp_input10').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  minuteStep : 2,//此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。(默认值：5)
	  keyboardNavigation : false,//是否允许通过方向键改变日期(默认值：true)
	});
	
	$('#dtp_input11').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  startDate : '2016-11-11',//最早日期时间(可'±d'(天)、'±w'(周)、'±m'(月)、'±y'(年))
	  //startDate : '-1d',//最早日期时间(可'±d'(天)、'±w'(周)、'±m'(月)、'±y'(年));超过日期范围左右箭头消失;
	  endDate : new Date(),//最晚日期时间;(当前日期2017-09-11);超过日期范围左右箭头消失;
	});
	
	$('#dtp_input12').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  startDate : '-3m',//最早日期时间(可'±d'(天)、'±w'(周)、'±m'(月)、'±y'(年));超过日期范围左右箭头消失;
	  endDate : '+1d',//最晚日期时间;(当前日期2017-09-11);超过日期范围左右箭头消失;
	  daysOfWeekDisabled : '0,6',//每周禁止选的日期;可为String, Array. (默认值: '', [])
	});
	
	$('#dtp_input13').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  startDate : '-1w',//最早日期时间(可'±d'(天)、'±w'(周)、'±m'(月)、'±y'(年));超过日期范围左右箭头消失;
	  endDate : '+1w',//最晚日期时间;(当前日期2017-09-11);超过日期范围左右箭头消失;
	  forceParse : false,//当选择器关闭的时候，是否强制解析输入框中的值。(默认值：true)
	  //也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，
	  //并将解析后的正确值按照给定的格式format设置到输入框中。
	});
	
	$('#dtp_input14').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  pickerReferer : 'input',	  
	});
	
	$('#dtp_input15').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  initialDate : '-2d',//为页面加载时，蓝色聚焦日期;每次选择过后,值将会变成对应的值;  
	});
	
	$('#dtp_input16').datetimepicker({
		language: 'zh-CN',
		format : 'yyyy-mm-dd',
		startView : 2,
		minView : 2,
		todayBtn : true,
		autoclose : true,
		endDate : new Date()
	}).on('changeDate',function(e){
		var startTime = e.date;
		$('#dtp_input17').datetimepicker('setStartDate',startTime);
	});
	
	$('#dtp_input17').datetimepicker({
		language: 'zh-CN',
		format : 'yyyy-mm-dd',
		startView : 2,
		minView : 2,
		todayBtn : true,
		autoclose : true,
	}).on('changeDate',function(e){
		var endDate = e.date;
		//24*60*60*1000 = 86400000;
		var startDate = new Date(e.date.getTime()+86400000);
		$('#dtp_input16').datetimepicker('setEndDate',endDate);
		$('#dtp_input18').datetimepicker('setStartDate',startDate);
	});
	
	$('#dtp_input18').datetimepicker({
		language: 'zh-CN',
		format : 'yyyy-mm-dd',
		startView : 2,
		minView : 2,
		todayBtn : true,
		autoclose : true,
	}).on('changeDate',function(e){
		//24*60*60*1000 = 86400000;
		var endDate = new Date(e.date.getTime()-86400000);
		$('#dtp_input17').datetimepicker('setEndDate',endDate);
	});
	
	
	$('#dtp_input19').datetimepicker({
	  language : 'zh-CN',
	  format : 'yyyy-mm-dd hh:ii:ss',
	  todayBtn : true,//显示今日按钮,选取当前日期时间(默认值：false)
	  autoclose : true,//选好日期时间后datetimepicker自动关闭(默认值：false)
	  startDate : '-4y',//最早日期时间(可'±d'(天)、'±w'(周)、'±m'(月)、'±y'(年));超过日期范围左右箭头消失;
	  endDate : '+3m',//最晚日期时间;(当前日期2017-09-11);超过日期范围左右箭头消失;
	  daysOfWeekDisabled : [3],
	});
	
</script>
</body>
</html>


猜你喜欢

转载自blog.csdn.net/u013142248/article/details/78079645
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022