BootStrap表单时间选择器详解

 更新时间:2017年05月09日 14:43:45   作者:bestfeng1020  
这篇文章主要为大家详细介绍了BootStrap表单时间选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

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

使用

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> 

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

相关文章

  • JS获得一个对象的所有属性和方法实例

    JS获得一个对象的所有属性和方法实例

    下面小编就为大家带来一篇JS获得一个对象的所有属性和方法实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • javascript insertAfter()定义与用法示例

    javascript insertAfter()定义与用法示例

    这篇文章主要介绍了javascript insertAfter()定义与用法,实例分析了javascript节点后插入元素的实现与使用方法,需要的朋友可以参考下
    2016-07-07
  • JS实现动画兼容性的transition和transform实例分析

    JS实现动画兼容性的transition和transform实例分析

    这篇文章主要介绍了JS实现动画兼容性的transition和transform方法,结合实例形式分析了transition和transform方法针对手机端浏览器兼容性问题上的相关处理技巧,需要的朋友可以参考下
    2016-12-12
  • Js利用console计算代码运行时间的方法示例

    Js利用console计算代码运行时间的方法示例

    最近看了一本书,发现了个计算代码执行时间的方法,感觉还挺有用的,所以这篇文章主要给大家介绍了关于Javascript利用console计算代码运行时间的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-09-09
  • JS使用Chrome浏览器实现调试线上代码

    JS使用Chrome浏览器实现调试线上代码

    这篇文章主要介绍了JS使用Chrome浏览器实现调试线上代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 基于JavaScript制作霓虹灯文字 代码 特效

    基于JavaScript制作霓虹灯文字 代码 特效

    这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字,也可以叫他文字变色效果,下面跟着小编一起学习JavaScript制作霓虹灯文字 代码特效,需要的朋友一起学习吧
    2015-09-09
  • 微信小程序实现的canvas合成图片功能示例

    微信小程序实现的canvas合成图片功能示例

    这篇文章主要介绍了微信小程序实现的canvas合成图片功能,结合实例形式分析了微信小程序canvas合成图片相关组件使用、操作步骤与注意事项,需要的朋友可以参考下
    2019-05-05
  • 一个超简单的JS拖拽实现代码(兼容IE,Firefox)

    一个超简单的JS拖拽实现代码(兼容IE,Firefox)

    网上找的一个超简单的JS拖拽,喜欢拖拽效果的朋友可以参考下。
    2010-04-04
  • js实现手机发送验证码功能

    js实现手机发送验证码功能

    本文主要介绍了js实现手机发送验证码功能的示例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 信息页文内画中画广告js实现代码(文中加载广告方式)

    信息页文内画中画广告js实现代码(文中加载广告方式)

    一般来说文章内容中的广告点击率更好,也更容易被访客看到,如果直接将广告放到页面头部会影响网站的速度,所以一般都比较喜欢这种方法,这里分享下实现方法
    2016-01-01

最新评论