BootStrap表单时间选择器详解


Posted in Javascript onMay 09, 2017

前言

在大多数项目中 用户界面的时间选择是必不可少的,在项目的用户体验友好度这个大前提下,不让用户自己输入时间就显得格外的重要。而且用户输入时间还会存在格式不固定的问题,加大后台的开发量。
在这个时候就需要用到时间输入插件了,格式由我们自己设置,还减少了用户的输入环节提高了用户体验友好度

使用

bootStrap的时间插件datetimepicker支持界面多元化有专门的的一个网址来说明这个时间选择器

BootStrap时间选择器

Demo

利用插件所带的方法和时间。可以做一个简单的demo
demo功能点:

1.输入日期格式为yyyy-MM-dd hh:ii:ss(格式可以自定义)。

2.前一个日期的时间输入以后,后面一个日期的输入值不能小于前一个日期

3.后一个日期的时间输入以后,前面一个日期的输入值不能大于前一个日期

需要bootstrap提供封装的css和js

<link href="bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" />
<script src="bootstrap-datetimepicker.js"></script>
<script src="bootstrap-datetimepicker.zh-CN.js"></script>
<script>
 $.fn.datetimepicker.defaults = {
  //默认语言
  language: 'zh-CN',
  //默认选择格式
  format: "yyyy-mm-dd hh:ii:ss",
  autoclose: true,
  todayBtn: true,
  //选择板所在输入框位置
  pickerPosition: "bottom-left"
 };
</script>
<div class="input-append date form_datetime">
 <input size="16" type="text" value="" id="startTime" readonly>
 <input size="16" type="text" value="" id="endTime" readonly>
</div>

<script>
 $(function () {

  var picker1 = $('#startTime').datetimepicker();
  var picker2 = $("#endTime").datetimepicker();

  //动态设置最小值(选择前面一个日期后:后面一个日期不能小于前面一个)
  picker1.on('changeDate', function (e) {
   picker2.datetimepicker('setStartDate', e.date);
  });
  //动态设置最大值(选择后面一个日期后:前面一个日期不能大于前面一个)
  picker2.on('changeDate', function (e) {
   picker1.datetimepicker('setEndDate', e.date);
  });

 });

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 #Javascript
JS触摸与手势事件详解
May 09 #Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 #Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 #Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 #Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
JavaScrpt的面向对象全面解析
May 09 #Javascript
You might like
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP实现计算器小功能
2020/08/28 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python机器学习之神经网络(三)
2017/12/20 Python
基于python实现高速视频传输程序
2019/05/05 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python批量图片处理简单示例
2019/08/06 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
最新销售员个人自荐信
2013/09/21 职场文书
机电一体化自荐信
2013/12/10 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
应用数学专业求职信
2014/03/14 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
小学见习报告
2014/10/31 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB