微信小程序怎么_bootstrap datetimepicker日期插件超详

摘要: bootstrap datetimepicker时间软件超详尽应用方式详细介绍 文中案例为大伙儿共享了bootstrap datetimepicker时间软件的简易应用,供大伙儿参照,实际內容以下最先在文档头顶部引进必需的...

bootstrap datetimepicker日期插件超详细使用方法介绍       本篇文章主要介绍了bootstrap datetimepicker日期插件超详细使用方法介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下

首先在文件头部引入必要的文件:

 link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" 
 script src="Js/bootstrap-datetimepicker.js" /script 

想用中文显示,加入bootstrap-datetimepicker.zh-CN.js文件

 script src="Js/bootstrap-datetimepicker.zh-CN.js" /script 

然后调用初始化日期插件方法:

$('.date').datetimepicker({
 language: 'zh-CN',//显示中文
 format: 'yyyy-mm-dd',//显示格式
 minView: "month",//设置只显示到月份
 initialDate: new Date(),//初始化当前日期
 autoclose: true,//选中自动关闭
 todayBtn: true//显示今日按钮
 })

引入控件

使用bootstrap的日期控件需要单独引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

详情及文件可以通过下面地址下载:

使用场景

单独引入一个日期控件可以参考上面提供的连接地址上的案例。此处介绍的是怎么使用两个日期控件,一个为开始日期,另外一个为结束日期,两个日期之间建立相互约束关系。即开始日期不能大于结束日期,结束日期不能小于开始日期。

使用方法

两个时间输入域如图:

html代码

 input size="16" type="text" id="datetimeStart" readonly 
 input size="16" type="text" id="datetimeEnd" readonly 

 js代码如下

 script type="text/javascript" 
 $("#datetimeStart").datetimepicker({
 format: 'yyyy-mm-dd',
 minView:'month',
 language: 'zh-CN',
 autoclose:true,
 startDate:new Date()
 }).on("click",function(){
 $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
 $("#datetimeEnd").datetimepicker({
 format: 'yyyy-mm-dd',
 minView:'month',
 language: 'zh-CN',
 autoclose:true,
 startDate:new Date()
 }).on("click",function(){
 $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
 /script 

 关于bootstrap插件datepicker,只选择年月;

 input type="text" readonly id="month_time"value=""/ 
$(".form_datetime_2").
datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm',
autoclose: true,
todayBtn: true,
startView: 'year',
minView:'year',
maxView:'decade'
});

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:如何自己创建网站