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 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
小程序如何构建骨架屏
May 29 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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单件模式结合命令链模式使用说明
2008/09/07 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python文件操作相关知识点总结整理
2016/02/22 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
洗发水广告词
2014/03/13 职场文书
小学总务工作总结
2015/08/13 职场文书
开网店计划分析
2019/07/30 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书