Bootstrap datetimepicker日期时间插件使用方法(日期时间选择器)

Bootstrap datetimepicker日期时间选择器

1、概述

bootstrap有两种日历插件。datepickerdatetimepicker,后者是前者的拓展,完全可以放弃datepicker,只关注datetimepicker即可,前者能选取到年月日,后者可以选择年月日时分秒。

Bootstrap datetimepicker API官网:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm;

暂时只有datepicker的在线调试,测试网址:https://uxsolutions.github.io/bootstrap-datepicker

注:datepicker插件调用的是.datepicker()方法,datetimepicker插件调用的是.datetimepicker()方法,测试时候注意。

2、开发步骤:

2.1、下载所需datetimepicker的css和js文件,支持中文的js,在下载的文件夹下/js/locales/bootstrap-datetimepicker.zh-CN.js

地址:https://github.com/smalot/bootstrap-datetimepicker/archive/master.zip

2.2、引入文件(自行下载bootstrap和jquery相关文件):







2.3、定义文本框,为了防止自定义文本框内容可以在input里加readonly属性。

2.4、调用

2.5测试

Bootstrap datetimepicker日期时间插件使用方法(日期时间选择器)_第1张图片Bootstrap datetimepicker日期时间插件使用方法(日期时间选择器)_第2张图片

全部测试代码




	
	Document
	
	
	
        
	
	
	



	


3.选项。

format的格式参考:

  • yyyy-mm-dd
  • yyyy-mm-dd hh:ii
  • yyyy-mm-ddThh:ii
  • yyyy-mm-dd hh:ii:ss
  • yyyy-mm-ddThh:ii:ssZ

 其他选项和API可参考官网的说明或在线测试的地址测试选项

官网:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

在线测试:https://uxsolutions.github.io/bootstrap-datepicker

(完)

 

 

你可能感兴趣的:(前端知识)