日历插件bootstrap-datetimepicker的使用感悟
首先队长先综述一下插件的使用三步流程:即 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的使用感悟的更多相关文章
- 日历插件:Bootstrap的datetimepicker插件
注意:可以选择性引入 bootstrap.min.css和bootstrap.min.js,引入样式更好控制 option选项 0-hour 1-day 2-month 3-year 4-all ye ...
- bootstrap datetimepicker 日期插件超详细使用方法
日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...
- Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min ...
- Bootstrap日期/日历插件Datepicker 时间加标记
由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...
- 日历插件FullCalendar应用:(二)数据增删改
接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
- 【UI插件】简单的日历插件(下)—— 学习MVC思想
前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- php使用fullcalendar日历插件
最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 <!DOCTYPE html> <html> < ...
- bootstrap-year-calendar全年日历插件
使用方法使用bootstrap-year-calendar插件需要引入jQuery.Bootstap3的相关依赖文件和插件本身需要的js和css文件. <link rel="style ...
- bootstrap datetimepicker 格式化yyyymmdd时,无法读取yyyymmdd格式
不知为何,java程序员爱用yyyymmdd格式化日期?导致bootstrap datetimepicker无法解析正确的日期 发现js中yyyymmdd不是正常能够解析的日期 查看datetimep ...
随机推荐
- 【js】使用javascript 实现静态网页分页效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...
- 004_Python之all()\any()
http://www.jianshu.com/p/65b6b4a62071 一.待验证整理
- 在flask中使用swagger(flasgger使用方法及效果展示)
一. 部分代码及效果 from flask import Flask from flasgger import Swagger import config app = Flask(__name__) ...
- openvon安装
一.安装环境 1.阿里云centos7 2.关闭防火墙,selinux 临时关闭:setenforce 0 永久关闭:vim /etc/selinux/config 3.修改yum源 1)备份原有的y ...
- ORACLE存储过程中%TYPE和%ROWTYPE的区别
ORACLE存储过程中%TYPE和%ROWTYPE的区别 在存储过程中%TYPE和%ROWTYPE常用来在PL/SQL中定义变量 因为 t_emp emp%rowtype ;这个语句的意思是 定义一个 ...
- Gym101194J Mr.Panda and TubeMaster 二分图、费用流
传送门 看到这张图,是一个网格图,而且有回路限制,不难想到黑白染色. 一般来说我们对一张图黑白染色之后都是黑色点向白色点连边,但是这道题往这边想似乎就想不出建图方法了,因为"一个格子强制流满 ...
- [翻译] ASP.NET Core 利用 Docker、ElasticSearch、Kibana 来记录日志
原文: Logging with ElasticSearch, Kibana, ASP.NET Core and Docker 一步一步指导您使用 ElasticSearch, Kibana, ASP ...
- Django Restframework 过滤器
一.基本配置: 1.安装:pip install django-filter 2.将 django_filters 配置到INSTALLED-APPS中 3.对 REST_FRAMEWORK 配置: ...
- 06_Hadoop分布式文件系统HDFS架构讲解
mr 计算框架 假如有三台机器 统领者master 01 02 03 每台机器都有过滤的应用程序 移动数据 01机== 300M >mr 移动计算 java程序传递给各个机器(mr) ...
- Linux 环境变量梳理
Linux中的环境变量有两种:全局变量和局部变量: 定义.访问.删除局部变量 查看全局变量 可以使用printenv或者env命令来打印所有的全局变量. 访问某一项全局变量,可以使用printenv ...