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插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。