html4 form日期,bootstrap4日期时间选择器插件
这是一款bootstrap4日期时间选择器插件。该bootstrap4日期时间选择器插件提供大量配置参数,可以基于bootstrap4制作出简单实用的日期选择器效果。它的特点还有:
支持语言国际化和timezone。
支持日期选择模式和时间选择模式。
支持最大和最小日期选择。
可自定义触发日期选择器的图标。
支持禁用指定的日期。
支持年/星期预览模式。
支持某个星期中禁用某些天。
可自定义日期格式。
提供大量的配置参数和API接口。
使用方法
在页面中引入jquery和bootstrap4相关文件,以及moment.js和tempusdominus-bootstrap-4.min.js文件。
HTML结构
一个最基本的bootstrap4日期时间选择器的HTML结构如下。
初始化插件
在页面DOM元素加载完毕之后,通过datetimepicker方法来初始化该bootstrap4日期选择器插件。
$(function () {
$('#datetimepicker1').datetimepicker();
});
配置参数
该bootstrap4日期选择器插件的可用配置参数有:
$('#datetimepicker-demo').datetimepicker({
// requires moment-timezone.js
timeZone: '',
// date format
// http://momentjs.com/docs/#/displaying/format/
format: false,
dayViewHeaderFormat: 'MMMM YYYY',
extraFormats: false,
// step size
stepping: 1,
// min/max dates
minDate: false,
maxDate: false,
// uses current date/time
useCurrent: true,
// uses Bootstraps collapse to switch between date/time pickers
collapse: true,
// https://github.com/moment/moment/tree/develop/locale
locale: moment.locale(),
// default date
defaultDate: false,
// disabled dates
// array of [date, moment, string]
disabledDates: false,
// enabled dates
// array of [date, moment, string]
enabledDates: false,
// default icons
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
up: 'fa fa-arrow-up',
down: 'fa fa-arrow-down',
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-calendar-check-o',
clear: 'fa fa-delete',
close: 'fa fa-times'
},
// tooltip options
tooltips: {
today: 'Go to today',
clear: 'Clear selection',
close: 'Close the picker',
selectMonth: 'Select Month',
prevMonth: 'Previous Month',
nextMonth: 'Next Month',
selectYear: 'Select Year',
prevYear: 'Previous Year',
nextYear: 'Next Year',
selectDecade: 'Select Decade',
prevDecade: 'Previous Decade',
nextDecade: 'Next Decade',
prevCentury: 'Previous Century',
nextCentury: 'Next Century',
pickHour: 'Pick Hour',
incrementHour: 'Increment Hour',
decrementHour: 'Decrement Hour',
pickMinute: 'Pick Minute',
incrementMinute: 'Increment Minute',
decrementMinute: 'Decrement Minute',
pickSecond: 'Pick Second',
incrementSecond: 'Increment Second',
decrementSecond: 'Decrement Second',
togglePeriod: 'Toggle Period',
selectTime: 'Select Time',
selectDate: 'Select Date'
},
// uses strict
useStrict: false,
// displays side by side
sideBySide: false,
// disabled days of the week
daysOfWeekDisabled: false,
// shows the week of the year
calendarWeeks: false,
// 'decades','years','months','days'
viewMode: 'days',
// toolbar placement
toolbarPlacement: 'default',
// enable/disable buttons
buttons: {
showToday: false,
showClear: false,
showClose: false
},
// widget position
widgetPositioning: {
horizontal: 'auto',
vertical: 'auto'
},
// string or jQuery object
widgetParent: null,
// ignore read only input
ignoreReadonly: false,
// always keep open
keepOpen: false,
// shows on focus
focusOnShow: true,
// inline mode
inline: false,
// makes the date picker not revert or overwrite invalid dates
keepInvalid: false,
// debug mode
debug: false,
// shows on focus and icon click
allowInputToggle: false,
// disables time selection
disabledTimeIntervals: false,
// disables/enables hours
disabledHours: false,
enabledHours: false,
// changes the viewDate without changing or setting the selected date
viewDate: false,
// allows multiple dates
allowMultidate: false,
// custom separator
multidateSeparator: ','
});
html4 form日期,bootstrap4日期时间选择器插件相关推荐
- flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
- 顶级的 Bootstrap 日期选择器和时间选择器插件(附免费下载链接)
顶级的 Bootstrap 日期选择器和时间选择器插件 Bootstrap的Datepicker元素是一种用户友好和直观的方式,可以轻松选择日期.它可用于移动端和PC端,还可以选择以 "从右 ...
- bootstrap4日期时间选择器插件
一.引入文件 bootstrap的版本号是个很令人头大的问题,这里提供一下我使用的版本号 <link rel="stylesheet" href="https:// ...
- bootstrap时间选择器-datetimepicker
接上一篇文章,写引用不同的js的时间选择器,参考连接:https://github.com/uxsolutions/bootstrap-datepicker 引入连接为: <link href= ...
- bootstrap4日期选择器插件tempusdominus-bootstrap-4具体实例
先上图 代码 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" lang="en&qu ...
- 日期时间选择器bootstrap(手机适应)
使用的是开源的架构 可以git clone git://github.com/smalot/bootstrap-datetimepicker.git 截图 十年视图 年视图 月视图 日视图* 小时视 ...
- html5 酒店入住插件,jQuery酒店类入住日期时间范围选择器插件
t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件.该jquery日期选择器提供多个配置参数和方法,可以创建响应式的.灵活的.多种主题效果的日期范围选择器.它的特点还有: 内置 ...
- Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案
官方文档 https://element.eleme.cn/#/zh-CN/component/datetime-picker 问题分析 el-date-picker组件需要 :picker-opti ...
- php中日期选择代码,实现JS日期时间选择器
这次给大家带来实现JS日期时间选择器,实现JS日期时间选择器的注意事项有哪些,下面就是实战案例,一起来看一下. flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScrip ...
最新文章
- 少年郎,你为什么没有对象?是缺点“土味情话”
- Centos查找命令清单
- 数字签名和数字证书详解
- Oracle和Mysql获取uuid的方法对比
- Netty源码分析第1章(Netty启动流程)----第4节: 注册多路复用
- 【Jmeter】压力测试工具 Jmeter 使用
- 机器学习Machine learning in action实战相关资料
- Kafka、RabbitMQ、RocketMQ等 消息中间件 介绍和对比
- 串口通信中接收数据时延迟处理与缓存处理的解决方案(C#)
- python 图片 变清晰_python模糊图片过滤的方法
- linux 分区顺序 boot,关于Liunx下的硬盘分区问题(/boot分区)?
- 视频教程 | 3D 跑酷小游戏实战开发(上)
- python判断用户名密码是否正确_Python 判断输入的用户名和密码是否正确
- NFS 服务器启动失败
- 武林外传自动寻路CALL
- 【手把手教你Ubuntu】Ubuntu 13.04 Linux 3D桌面完全教程,显卡驱动安装方法
- 2016/7/4日-你若安好,便是晴天.
- python绘制对比分析图(柱状图、折线图)
- webpack打包工具的基本使用
- C#基础代码笔记(五)
热门文章
- cube一站式云原生机器学习平台-推理服务的工程化加速
- jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
- Echarts数据可视化series-scatter散点图,开发全解+完美注释
- Crackme014
- .bash_profile和.bashrc的什么区别
- 编写一个程序,将 d:\java 目录下的所有.java 文件复制到 d:\jad 目录下,并将原来文件的扩展名从.java 改为.jad。...
- Http 四种请求访问代码 HttpGet HttpPost HttpPut HttpDelete
- httplib模块,测试cdn节点文件同步
- Folder and jar
- Linq之动态条件(1)