首页 > 编程 > JavaScript > 正文

bootstrap日历插件datetimepicker使用方法

2019-11-19 18:29:19
字体:
来源:转载
供稿:网友

如何使用bootstrap日历datetimepicker插件?

一、引入文件

1、css样式

<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

2、js文件

<script type="text/javascript" src="/js/bootstrap-datetimepicker.js" charset="UTF-8"></script><script type="text/javascript" src="/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

二、 布局代码

1、 布局代码:

<div class="input-group date form_date col-sm-2 col-md-2 col-lg-2 floatLeft" data-date="" data-date-format="dd MM yyyy" data-   link-field="dtp_input2" data-link-format="yyyy-mm-dd"><input class="form-control" id="birthdays" 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>

三、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实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表