bootstrap datetimepicker
效果预览
我们先来看一下效果
可以看到这款插件的功能很强大,涵盖了十年视图,年视图,月视图,甚至小时视图,分钟视图都有,几乎能够满足大部分人的需要。不仅如此,还有完善的文档,方便我们个性化设置噢,我们一起去看看吧!
datetimepicker
中文文档: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
插件下载地址: https://github.com/smalot/bootstrap-datetimepicker/archive/master.zip (如果点击这里无法下载插件就进入中文文档找到“下载ZIP包”进行下载)
依赖
- bootstrap.min.css
- jQuery.min.js
- bootstrap.min.js
此外,还需导入datetimepicker自身文件。
- bootstrap-datetimepicker.min.css
- bootstrap-datetimepicker.min.js
- bootstrap-datetimepicker.zh-CN.js (若要汉化要导入这个包,在js的locales目录下)
至此,导包工作完成,接下来就能使用了。每个人需求不同,建议使用前先查阅中文文档,了解常用的参数和使用方法。这里就贴个我的样例代码。
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>test</title><link rel="stylesheet" href="static/plugins/bootstrap/css/bootstrap.min.css"><script src="static/js/jQuery.js"></script><script src="static/plugins/bootstrap/js/bootstrap.min.js"></script><link rel="stylesheet"href="static/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"><script src="static/plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script><script src="static/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script></head><body><form class="form-horizontal" style="border: 1px red solid;margin-top: 30px;"><div class="container"><div class="row"><div class="form-group col-sm-6"><label for="name" class="col-sm-2 control-label">姓名</label><div class="col-sm-10"><input type="text" id="name" class="form-control"></div></div><div class="form-group col-sm-6"><label for="age" class="col-sm-2 control-label">年龄</label><div class="col-sm-10"><input type="text" id="age" class="form-control"></div></div></div><div class="row"><div class="form-group col-sm-6"><label for="salary" class="col-sm-2 control-label">薪资</label><div class="col-sm-10"><input type="text" id="salary" class="form-control"></div></div><div class="form-group col-sm-6"><label for="department" class="col-sm-2 control-label">部门</label><div class="col-sm-10"><select id="department" class="form-control"><option value="">IT</option><option value="">教育</option><option value="">服务</option><option value="">公检</option><option value="">托管</option></select></div></div></div><div class="row"><div class="form-group col-sm-6"><label for="datetime" class="col-sm-2 control-label">入职日期</label><div class="col-sm-10"><input type="text" id="datetime" class="form-control" placeholder="年 / 月 / 日"></div></div></div><div class="row"><div class="form-group col-sm-6"><div class="col-sm-offset-2 col-sm-3"><button type="submit" class="btn btn-primary form-control">提交</button></div></div></div></div></form><script type="text/javascript">$('#datetime').datetimepicker({language: 'zh-CN', //显示中文format: 'yyyy-mm-dd', //显示格式autoclose: true, //选中自动关闭todayBtn: true, //显示今日按钮todayHighlight: true, // 今日高亮显示weekStart: 1, //一周从哪一天开始。0(星期日)到6(星期六) startDate: "2021-1-1", //日期选取的起始时间minView: "month", // 最小视图为月份,如果为 day 的话还会让你选小时daysOfWeekDisabled: '0', // 哪天不可选 0(星期日)到6(星期六) endDate: new Date(), //日期选取的截止时间,因为入职日期最多填写到今天,所以可以直接用new Date(),表示当天})</script></body>
</html>
bootstrap datetimepicker相关推荐
- vue2.0 与 bootstrap datetimepicker的结合使用
vue2.0 与 bootstrap datetimepicker的结合使用 1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrap datetimepicker时发现双向 ...
- bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"><label class="control- ...
- bootstrap datetimepicker 用法+demo案例下载
bootstrap datetimepicker 用法+demo案例下载 官网文档地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ date ...
- bootstrap datetimepicker的时间变成1899年
bootstrap datetimepicker 重新加载后,日期会变1899年, 这个问题要怎么解决呢?? 先看个小例子: <%@ Page Language="C#" A ...
- bootstrap datetimepicker 复选可删除,可规定指定日期不可选
可实现类似于酒店预订的功能.支持日期多选,日期重复选择取消等功能. datetimepicker去网上下载 很多, 只需要取到 bootstrap-datetimepicker.min.js boot ...
- 使用Bootstrap DateTimePicker显示1899年的问题
时间框js和css引入 之所以会出现1899年,是因为输入框与初始化的时间格式不一致导致的,只要在Input框中加入:data-date-format='yyyy-mm-dd hh:ii:ss',初始 ...
- bootstrap datetimepicker 开始时间,结束时间
// 时间选择器初始化 $('#beginTime, #endTime').datetimepicker({language: 'zh-CN',autoclose: true,todayBtn: tr ...
- bootstrap datetimepicker的一些小总结
关于日历控件我真的就是一直就研究.我分享我自己遇到的几个问题 1.点击日历 比如 这种情况 间距的高度小于日历的高度,那我们应该让日历直接显示在左上方 解决办法:修改插件库 var一个当前文本的一个高 ...
- 日历插件:Bootstrap的datetimepicker插件
注意:可以选择性引入 bootstrap.min.css和bootstrap.min.js,引入样式更好控制 option选项 0-hour 1-day 2-month 3-year 4-all ye ...
最新文章
- 数据加载很慢_Vaex真香!几秒钟就能处理数十亿行数据,比Pandas、Dask更好用
- 【技术好文转载】为什么AI芯片是当今热点
- 吾解——HTTP(超文本传输协议)
- 基于docker-compose的Gitlab CI/CD实践排坑指南
- centos7升级openssh
- 正则表达式中,[\s\S]*
- Linux学习总结(72)——Linux系统安全加固
- HDU2546 饭卡【贪心+0-1背包】
- 数学_最小二乘问题的求解
- oracle9i阻塞,Oracle 9i 整体性能优化概述(zt)
- 计算机矢量图的优点,矢量图与位图的区别,各自的优缺点……
- ahk写入excel单元格_【进阶】Excel 自动化教程
- html可以播放所有本地视频播放器,VR播放器有哪些 能播放本地视频的VR播放器推荐...
- iphone4s在ios7下解决卡顿问题
- HTML5期末大作业:动漫网站设计——千与千寻(10页) 含设计报告 HTML+CSS+JavaScript 学生动漫网页设计模板下载 海贼王大学生HTML网页制作作品 简单漫画网页设计成品 drea
- 人民的名义1-55集全 已看完(观后感)
- Win10提示无法更新正在撤销安装怎么解决
- 程序设计入门C语言 --- 素数和
- 操作系统第三次实验——线程基础总结
- 格式化的u盘怎么恢复数据?