bootstrap日历插件datetimepicker使用方法
如何使用bootstrap日历datetimepicker插件?
一、引入文件
1、css样式
<linkhref="/css/bootstrap-datetimepicker.min.css"rel="stylesheet"media="screen">
2、js文件
<scripttype="text/javascript"src="/js/bootstrap-datetimepicker.js"charset="UTF-8"></script> <scripttype="text/javascript"src="/js/bootstrap-datetimepicker.zh-CN.js"charset="UTF-8"></script>
二、布局代码
1、布局代码:
<divclass="input-groupdateform_datecol-sm-2col-md-2col-lg-2floatLeft"data-date=""data-date-format="ddMMyyyy"data-link-field="dtp_input2"data-link-format="yyyy-mm-dd"> <inputclass="form-control"id="birthdays"size="16"type="text"value=""readonly> <spanclass="input-group-addon"><spanclass="glyphiconglyphicon-remove"></span></span> <spanclass="input-group-addon"><spanclass="glyphiconglyphicon-calendar"></span></span> </div>
三、js调用代码:
$(function(){ /*主要为:startView:2, maxViewMode:1, minViewMode:1, 这三个参数,第一个表示起始选择范围,0为日,1为月,2为年, 第二个参数表示最大选择范围, 第三个表示最小选择范围。数字意义同第一个参数。 */ //选择年的startView:4,minView:4,format:'yyyy', $('.form_date').datetimepicker({ format:'yyyy', startView:4, minView:4, language:'zh-CN', forceParse:false, autoclose:true, pickerPosition:"bottom-left" }); //可选择年月日 $('.form_date').datetimepicker({ language:'zh-CN', minView:'month', format:'yyyy-mm-dd', autoclose:true, startView:2, showMeridian:1, pickerPosition:"bottom-left" }); });
手册地址:http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#startdate
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
BootstrapTable使用教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。