码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-12-19 15:37:59      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:完整   date   cal   视图   day   r.js   日期时间   auto   files   

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

雷同于python中的库的使用(安装库 导入库 引用库)
下面是个简单的Demo,  bootstrap-datetimepicker的具体使用 还是根据官方提供的文档 http://www.bootcss.com/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-static.cnblogs.com/files/We612/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="https://blog-static.cnblogs.com/files/We612/bootstrap-datetimepicker.js"></script>
<script src="https://cdn.staticfile.org/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,‘小时‘  就是说我们可以选择到小时下的分钟 比如2018-12-20 12:05

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

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

  language   默认值:‘en‘

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

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

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

  • 小时视图的0或‘小时‘
  • 日视图的1或‘天‘
  • 月视图的2或‘月‘(默认值)
  • 12个月概述的3年或“年”
  • 10年概述的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位数

 

官方文档 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

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

标签:完整   date   cal   视图   day   r.js   日期时间   auto   files   

原文地址:https://www.cnblogs.com/We612/p/10142894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!