日历插件:bootstrap-datetimepicker

article/2025/8/25 6:48:27

1. 简述

前端插件使用步骤:
     1)引入开发包:.js,.css
        下载开发包,拷贝到项目webapp目录下
        把开发包引入到jsp文件中:<link><script>
     2)创建容器:<input type="text"><div>
     3)当容器加载完成之后,对容器调用工具函数 

注意:引入开发包时还需引入插件所依赖的技术(bootstrap,jquery)

2. 官方文档

附上官方文档链接,需要的人们传送门。

3. 选项(属性)

总体调用格式为: 
jsp中:

<input type="text" id="demo" >

js中:

$("#demo").datetimepicker();

3.1 format — 格式

String类型 
默认值: ‘mm/dd/yyyy’ 
这个是最重要最常用的属性之一了。控制显示格式就是固定值得个性化搭配。 
比如,显示 2016-04-21 19:21

$("#demo").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

又比如,你就是喜欢反人类的格式,那你可以这样:

$("#demo").datetimepicker({format: 'hh-yyyy-ii mm:dd'});

这个是扯淡的,就是个意思,你可以自己设计样式,但是里面的字母都代表不同属性:

符号意义
p12小时制且小写(‘am’ or ‘pm’)
P12小时制且大写(‘AM’ or ‘PM’)
s秒,前面不补0
ss秒,前面补0
i分,前面不补0
ii分,前面补0
h时,24小时制,前面不补0
hh时,24小时制,前面补0
H时,12小时制,前面不补0
HH时,12小时制,前面补0
d日,前面不补0
dd日,前面补0
m月,数字表示,前面不补0 如:4
mm月,数字表示,前面补0 如:04
M月,缩写表示,前面补0 如:Apr
MM月,全称表示,前面补0 如:April
yy年,后两位 如:16
yyyy年,全部 如:2016

3.2 weekStart — 一周从哪一天开始

Integer类型 
默认值:0 
0(星期日)到6(星期六) 
例如:

$("#demo").datetimepicker({weekStart: 3});

效果: 
这里写图片描述

3.3 startDate — 开始时间

Date类型 
默认值:开始时间

之前的日期都不能选择,这个时间之后的时间才能选择。

咱们做一个常用的Demo,就是只能选现在之后的时间:

例如:

var date = new Date();
$("#demo").datetimepicker({startDate: date });
  • 1
  • 2
  • 3
  • 4

效果卡件上图中的灰色部分: 
这里写图片描述

3.4 endDate— 结束时间

Date类型 
默认值:结束时间

这个时间后面的不能再选择。 
用法同上,不再赘述。

3.5 daysOfWeekDisabled — 一周的周几不能选

String, Array类型 
默认值:”, []

0(星期日)到6(星期六) 
可以有多个。

例如:

$("#demo").datetimepicker({daysOfWeekDisabled: [0,4,6]});

或者:

$("#demo").datetimepicker({daysOfWeekDisabled: '0,4,6'});

效果: 
这里写图片描述

3.6 autoclose — 选完时间后是否自动关闭

Boolean类型 
默认值:false

当选择一个日期之后是否立即关闭此日期时间选择器。

3.7 startView — 选完时间首先显示的视图

Number, String类型 
默认值:2, ‘month’

日期时间选择器打开之后首先显示的视图。

可接受的值:

意义
0从小时视图开始,选分
1从天视图开始,选小时
2从月视图开始,选天
3从年视图开始,选月
4从十年视图开始,选年

3.8 minView — 最精确的时间

Number, String类型 
默认值:0, ‘hour’

日期时间选择器所能够提供的最精确的时间选择视图。

可接受的值:

意义
0从小时视图开始,选分
1从天视图开始,选小时
2从月视图开始,选天
3从年视图开始,选月
4从十年视图开始,选年

例如:

$("#demo").datetimepicker({minView : 2});

上例中选完日后,不在出现下级时间选择。

3.9 maxView — 最高能展示的时间

Number, String类型 
默认值:4, ‘decade’

日期时间选择器最高能展示的选择范围视图。

用法同上,不在赘述。

3.10 todayBtn — 当天日期按钮

Boolean, “linked”类型 
默认值:false’

如果此值为true 或 “linked”,则在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期。如果是true的话,”Today” 按钮仅仅将视图转到当天的日期,如果是”linked”,当天日期将会被选中。

例如:

$("#demo").datetimepicker({todayBtn : true});

效果: 
这里写图片描述

3.11 todayHighlight — 当天日期高亮

Boolean类型 
默认值:false

如果为true, 高亮当前日期。

不再举例。

3.12 keyboardNavigation — 方向键改变日期

Boolean类型 
默认值:false

是否允许通过方向键改变日期。

不再举例。

3.13 language — 语言

String类型 
默认值:’en’

中文:’zh-CN’

3.14 forceParse — 强制解析

Boolean类型 
默认值:true

就是你输入的可能不正规,但是它胡强制尽量解析成你规定的格式(format)

3.15 minuteStep — 步进值

Number类型 
默认值:5

此数值被当做步进值用于构建小时视图。就是最小的视图是每5分钟可选一次。是以分钟为单位的。

3.16 pickerPosition — 选择框位置

String类型 
默认值:’bottom-right’

还支持 : ‘bottom-left’,’top-right’,’top-left’

可以试试看,他拿出位置会发生变化。

3.17 showMeridian — 是否显示上下午

Boolean类型 
默认值:false

在日期和小时选择界面,出现上下午的选项

3.18 initialDate — 初始化日期时间

Date or String类型 
默认值:new Date()

在打开时默认选当时的时间,显示在View中。

3.19 clearBtn —清空按钮


默认值:false

如果此值为true ,则在日期时间选择器组件的底部显示一个 “clear” 按钮用以清空文本框。


http://chatgpt.dhexx.cn/article/HwpbwmiC.shtml

相关文章

最棒的 10 款 jQuery 日历插件

RT&#xff0c; 最棒的 10 款 jQuery 日历插件 做个记号&#xff0c;以后就不用再翻来翻去 1、JavaScript Calendar, JSCal2 地址&#xff1a;点击打开链接 2、Date Picker 地址&#xff1a;点击打开链接 3、 jQuery Frontier Calendar 地址&#xff1a;点击打开链接…

vue日历插件vue-calendar

原始效果&#xff1a; 修改后的效果&#xff1a; 接下来&#xff0c;我们使用它&#xff5e; 1.安装 npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 2.在使用到日历插件的文件中引入 import Calendar from vue-calendar-componen…

使用JS实现简单的日历插件

实现简单的日历插件 一、简要介绍二、基础代码html部分js部分 一、简要介绍 实现一个如下图所示的日历&#xff0c;这边主要提供html部分和js部分的代码&#xff0c;css部分大家自行编写哦。 二、基础代码 html部分 其实就是一个div容器&#xff0c;为其设置相应的id值。 <…

FullCalendar - 开源的多功能 JavaScript 日历插件

本文字数&#xff1a;747 字 9图 阅读完需&#xff1a;约 4 分钟 点击上方“青年码农”关注 回复“源码”可获取各种资料 FullCalendar 是一个支持 React、Vue、Angular 和原生 JavaScript 的日历插件&#xff0c;FullCalendar 拥有超过 300 种设置&#xff0c;支持模块化导入&…

HTML页面日历插件

web页面显示日历插件。如下图 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title><style>body,td,.p1,.p2,.i {font-family: arial}body {margin: 6px 0 0 0;background-color: #fff;color: #000;}tab…

js日历插件

日历插件&#xff1a;bootstraprap-datetimepicker 前端插件使用步骤&#xff1a; 1.引入开发包&#xff1a; js css 文件 下载开发包&#xff0c;拷贝到项目webapp目录下 把开发包引入到jsp文件中&#xff1a; <link rel"stylesheet" type"text/css&qu…

超好用的js 日历插件 日期插件 日期日历选择控件

前情提要&#xff1a; 主要是目前项目较小&#xff0c;仅需要一个日历插件&#xff0c;就没有选择引用UI框架&#xff0c;单纯找了一个日历插件&#xff0c;外观相对简单大方&#xff0c;还不错&#xff0c;而且只需要2步就可以完成引入&#xff1a; 第一步&#xff08;有2种方…

微信小程序日历插件用法-举例为(爸妈搜日历)

一、添加插件 在小程序管理后台添加插件。 小程序管理后台地址&#xff1a;https://mp.weixin.qq.com/ 设置>第三方设置>插件管理 添加插件&#xff0c;可以直接搜索名称(爸妈搜日历)或者AppID(wx23a9cef3522e4f7c) 二、在小程序app.json文件中引入插件声明 "plugi…

前端ui组件(1):日程排班—11个优秀JavaScript 日历插件

日历是我们生活中重要的一部分。在当今世界,人们大多使用网络或移动日历。它们随处可见,包括在各种软件中:预订应用、旅行软件、项目管理、管理面板等。 出于多种原因,用户可能需要在网站上使用日历。用户需要容果从日历中选择日期来填写表格,或者在填写某些信息时提供日…

好用的日历插件(三款常用的日历插件)

1、laydate https://www.layui.com/laydate/ 全面重写的 layDate 包含了大量的更新&#xff0c;其中主要以&#xff1a;年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心&#xff0c;并且均支持范围选择&#xff08;即双控件&…

【典例】链表经典题目合集

目录导航 1. 删除链表中给定值为val的所有节点2. 反转一个单链表3. 返回链表中间节点&返回链表倒数第k个节点4. 链表的回文结构5. 合并两个有序链表6. 输入两个链表&#xff0c;找出它们第一个公共节点7. 分割链表8. 判断链表是否带环&找环的入口点9. 复制复杂链表10. …

链表知识点总结

目录 一、基本概念&#xff1a; 1.定义&#xff1a; 2.性质&#xff1a; 3.链表的分类&#xff1a; 单链表&#xff1a; 双向链表 单链表和双向链表的区别&#xff1a; 双向链表的作用&#xff1a; 循环链表 二、链表的主要操作&#xff1a; 1.插入操作&#xff1a; a.重…

二级指针实现单链表的插入、删除及 linux内核源码双向链表之奇技

二级指针实现单链表的插入、删除 今天看了coolshell上关于二级指针删除单链表节点的文章。 文章中Linus 举例&#xff1a; 例如&#xff0c;我见过很多人在删除一个单项链表的时候&#xff0c;维护了一个”prev”表项指针&#xff0c;然后删除当前表项&#xff0c;就像这样…

C++实现链表

C实现链表 众所周知&#xff0c;C/C语言实现的链表是由一个一个的结点构成&#xff0c;每个结点分为数据域和指针域&#xff0c;指针域中存储了其后继结点的地址&#xff0c;通过地址来访问下一个结点。 链表是一系列节点串联形成的数据结构&#xff0c;链表存储有序的元素集合…

2130. 链表最大孪生和

地址&#xff1a; 力扣https://leetcode-cn.com/problems/maximum-twin-sum-of-a-linked-list/ 题目&#xff1a; 在一个大小为 n 且 n 为 偶数 的链表中&#xff0c;对于 0 < i < (n / 2) - 1 的 i &#xff0c;第 i 个节点&#xff08;下标从 0 开始&#xff09;的孪…

链表基础【C++实现】

平台&#xff1a;Visual Studio 2022 编程工具&#xff1a;C 目录&#xff1a; 1、链表的结构体实现 2、链表的声明、开辟空间 3、链表的初始化 4、链表的连接 5、链表输出 6、完整代码实例 1、链表的结构体实现 链表由一系列结点&#xff08;链表中每一个元素称为结点&#…

体能修复6-编程-剑指offer-JZ22 链表中倒数最后k个结点

描述 输入一个长度为的链表&#xff0c;设链表中的元素的值为&#xff0c;返回该链表中倒数第个节点。 如果该链表长度小于&#xff0c;请返回一个长度为的链表。 数据范围:&#xff0c;&#xff0c; 要求&#xff1a;空间复杂度&#xff0c;时间复杂度 进阶&#xff1a;空…

Niuke:JZ36.二叉树与双向链表

文章目录 &#xff2e;iuke:JZ36.二叉树与双向链表题目描述示例思路分析代码实现 &#xff2e;iuke:JZ36.二叉树与双向链表 题目描述 描述 输入一棵二叉搜索树&#xff0c;将该二叉搜索树转换成一个排序的双向链表。如下图所示 注意: 1.要求不能创建任何新的结点&#xff0c;…

【C/C++ 数据结构】-链表(OJ题)(4)

文章目录 题一&#xff1a;反转链表法1&#xff1a;指针反向法2&#xff1a;指针翻转法3&#xff1a;头插法 题二&#xff1a;链表的中间节点法1&#xff1a;统计节点减半法法2&#xff1a;快慢指针法 题三&#xff1a;合并两个有序链表法1&#xff1a;tail拼接法法2&#xff1…

链表面试常见考题(C++实现)

链表面试常见考题&#xff08;C实现&#xff09; 常用方法&#xff1a;画图法 常用技巧&#xff1a;用于遍历搜索的游标 ListNode* cur; 用于返回值的哑节点 ListNode* dumny new ,, 单链表更新先去考虑他的next指向问题。链表元素或者边界问题可以用前继节点pre、后继节点…