300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 日历插件bootstrap-datetimepicker的使用感悟

日历插件bootstrap-datetimepicker的使用感悟

时间:2021-11-17 01:04:33

相关推荐

日历插件bootstrap-datetimepicker的使用感悟

首先队长先综述一下插件的使用三步流程:即 1、引入插件 2、使用jquery选择器选择目标标签 3、对目标标签绑定插件函数来触发插件

雷同于python中的库的使用(安装库 导入库 引用库)

下面是个简单的Demo, bootstrap-datetimepicker的具体使用 还是根据官方提供的文档 /p/bootstrap-datetimepicker/index.htm

<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- Meta, title, CSS, favicons, etc. --><meta charset="utf-8"><script src="https://blog-/files/We612/bootstrap-datetimepicker.zh-CN.js"></script>

<script src="https://blog-/files/We612/bootstrap-datetimepicker.js"></script>

<script src="/jquery/1.10.2/jquery.min.js">

</script></head><body class="nav-md"><input class="calendar" value="" id="rz1"><script>$(function () {

$(".calendar").datetimepicker({

language: 'zh-CN',

format: 'yyyy-mm-dd hh:ii',//显示格式

todayHighlight: 1,//今天高亮

minView: 0,//设置显示到分钟

startView: 2,

weekStart: 1,

forceParse: 0,

showMeridian: 1,

autoclose: 1,

});

})</script></body></html>

这里说明一下几个易混常用参数:

minView 默认值:0,'小时' 就是说我们可以选择到小时下的分钟 比如-12-20 12:05

minView: "month", 规定我们能够选择到某月某日 比如-12-20

todayHighlight 布尔。默认值:false 如果为true,高亮当前日期。

language 默认值:'en'

minuteStep 数。默认值:5 此数值被当做步进值用于构建小时视图。每个对于minuteStep都会生成一组预设时间(分钟)用于选择。

autoclose: 布尔。默认值:false 当选择一个日期之后是否立即关闭此日期时间选择器

startView 数字,字符串。默认值:2,'月' 日期时间选择器打开之后首先显示的视图。可接受的值:

小时视图的0或'小时'日视图的1或'天'月视图的2或'月'(默认值)12个月概述的3年或“年”概述的4年或“十年”。适用于出生日期datetimepickers。

weekStart 整数。默认值:0 一周从哪一天开始0.0(星期日)到6(星期六)

format 输出的时间格式 默认值:'mm / dd / yyyy' 还可以如下格式:

日期格式,p,P,h,hh,i,ii,s,ss,d,dd,m,mm,M,MM,yy,yyyy的任意组合。

p:小写子句('am'或'pm') - 根据语言环境文件P:大写的子午线('AM'或'PM') - 根据语言环境文件s:没有前导零的秒数ss:秒,带前导零的2位数我:没有领先零的分钟ii:分钟,带前导零的2位数h:小时没有前导零 - 24小时格式hh:小时,带有前导零的2位数 - 24小时格式H:没有前导零的小时 - 12小时格式HH:小时,带有前导零的2位数 - 12小时格式d:没有前导零的月中的某天dd:每月的某天,前导零的2位数m:没有前导零的月份的数字表示mm:月份的数字表示,带前导零的2位数M:一个月的短文本表示,三个字母MM:一个月的全文表示,例如1月或3月yy:一年的两位数表示yyyy:一年的完整数字表示,4位数

官方文档 /p/bootstrap-datetimepicker/index.htm

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。