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 相关文章推荐
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 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中socket通信机制实例详解
2015/01/03 PHP
php提高网站效率的技巧
2015/09/29 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python设计模式之建造者模式实例详解
2019/01/17 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
利用Python计算KS的实例详解
2020/03/03 Python
python实现自动打卡的示例代码
2020/10/10 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
学习党章思想汇报
2014/01/07 职场文书
2013年军训通讯稿
2014/02/05 职场文书
绿色城市实施方案
2014/03/19 职场文书
高三语文复习计划
2015/01/19 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
美元符号 $
2022/02/17 杂记