bootstrap-datetimepicker 的使用-阿里云开发者社区

开发者社区> 子璐> 正文

bootstrap-datetimepicker 的使用

简介:           在web开发中,难免会用到时间选择控件,也正好也在使用bootstrap,所以就找到了bootstrap-datetimepicker 这个插件,下面把这个插件的使用记录一下,以做备忘。
+关注继续查看

          在web开发中,难免会用到时间选择控件,也正好也在使用bootstrap,所以就找到了bootstrap-datetimepicker 这个插件,下面把这个插件的使用记录一下,以做备忘。

1、前期准备(以下文件在下载的附件中已经下载,如果不想下载,可以下载附件即可)

          bootstrap-combined.min.css

          bootstrap-datetimepicker.min.css

          jquery.min.js

          bootstrap.min.js

          bootstrap-datetimepicker.min.js

          glyphicons-halflings.png

  2、使用方法

        (1)带有日期和时间的实例,截图如下所示:

         

      相应的代码如下:

   

<!DOCTYPE HTML>
<html>
  <head>
    <link href="css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"  href="css/bootstrap-datetimepicker.min.css">
  </head>
  <body>
    <div id="datetimepicker" class="input-append date">
      <input type="text" name="time" id="time"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
    </div>
    <script type="text/javascript"  src="js/jquery.min.js"></script> 
    <script type="text/javascript"  src="js/bootstrap.min.js"></script>
    <script type="text/javascript"  src="js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'MM/dd/yyyy hh:mm',
        language: 'en',
        pickDate: true,
        pickTime: true,
        hourStep: 1,
        minuteStep: 15,
        secondStep: 30,
        inputMask: true
      });
    </script>
  </body>
<html>

控件的操作也比较简单,点击顶部的年月或底部的时间区域,会进入相应的选择界面,比较方便使用,具体使用方法就不再详细描述了。

从图例中我们可以看到,日期显示的格式是“MM/dd/yyyy hh:mm”这种格式的,当然我们也可以转化成别的格式:

格式名称
展示效果 属性设置
日期加时间 2014-01-23 11:10:12        format: 'yyyy-MM-dd hh:mm:ss',
        language: 'en',
        pickDate: true,
        pickTime: true,
        hourStep: 1,
        minuteStep: 15,
        secondStep: 30,
        inputMask: true
日期加时间(12小时制) 2014-01-23 23:13:52 PM        format: 'yyyy-MM-dd HH:mm:ss PP',
        language: 'en',
        pickDate: true,
        pickTime: true,
        hourStep: 1,
        minuteStep: 15,
        secondStep: 30,
        inputMask: true,
        pick12HourFormat: true
只显示时间 23:13:52         format: 'hh:mm:ss',
        language: 'en',
        pickDate: false,
        pickTime: true,
只显示日期 2014-01-23         format: 'yyyy-MM-dd',
        language: 'en',
        pickDate: true,
        pickTime: false

   (2)上面插件展示的都是显示的中文,其实我们可以通过配置文件来扩展成中文格式的。

打开bootstrap-datetimepicker.min.js找到

var dates=$.fn.datetimepicker.dates={en:{days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],daysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"],daysMin:["Su","Mo","Tu","We","Th","Fr","Sa","Su"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}}};

目前的解决办法是在该配置文件中添加一个中文的配置,修改后的片断如下图所示

var dates=$.fn.datetimepicker.dates={en:{days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],daysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"],daysMin:["Su","Mo","Tu","We","Th","Fr","Sa","Su"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},ch:{days:["星期天","星期一","星期二","星期三","星期四","星期五","星期六","星期天"],daysShort:["周日","周一","周二","周三","周四","周五","周六","周天"],daysMin:["周日","周一","周二","周三","周四","周五","周六","Su"],months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthsShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]}};

页面中的配置如下即可

        format: 'yyyy-MM-dd hh:mm:ss',
        language: 'ch',
        pickDate: true,
        pickTime: true,
        hourStep: 1,
        minuteStep: 15,
        secondStep: 30,
        inputMask: true

实例下载地址:

       http://download.csdn.net/detail/xiaofenglu/6876861


参照地址:

        http://tarruda.github.io/bootstrap-datetimepicker/

        http://www.open-open.com/lib/view/open1356568521682.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用 Arthas 排查开源 Excel 组件问题
有了实际的使用之后,不免会想到,Arthas 是如何做到在程序运行时,动态监测我们的代码的呢?带着这样的问题,我们一起来看下 Java Agent 技术实现原理。
13046 0
PS批处理的使用
一、 前言   做开发的时候,最多的时候就是图片的使用了。有时候图片的处理都按照同样的步骤,比如说统一将图片的大小调整为固定大小,或者统一在所有的图片的的某个位置上加入文字或者小图片等等,这时候PS的批处理可以帮你完成这些重复性的工作。
470 0
Observability:使用 Elastic Stack 分析地理空间数据
在今天的文章中,我们将参考之前的文章 “如何使用 Elasticsearch ingest 节点来丰富日志和指标”。我们可以利用 Elasticsearch ingest 节点来更加丰富我们的数据,并对这些数据做更进一步的的分析。
1291 0
MaxCompute Studio使用心得系列6——一个工具完成整个Python UDF开发
2017/12/20 北京云栖大会上阿里云MaxCompute发布了最新的功能Python UDF,万众期待的功能终于支持啦,我怎么能不一试为快,今天就分享如何通过Studio进行Python udf开发。
6870 0
如何使用云排查:开发者日志查询、联调问题排查工具&注意事项
说明:云排查是开发者接入支付宝的过程中,对接口自助化调试的工具。    开发者通过云排查,可以获取到与支付宝交互的日志,自己可以通过日志更直观的看到向支付宝上送的参数, 以便出现问题时可以对比文档排查是否参数设置出现问题,同时工具通过智能化分析该日志,对于异常订单进行智能化定位,对于成功的交易可以对其进行可能出现问题的提醒如(如单品,授权,返佣参数为空可能   出现的问题) 并给出相应的解决方案。
739 0
【bootstrapValidator 不验证】使用bootstrapValidator 验证效果不起作用
虽然在页面ready的时候 就绑定了验证表单 ,但是在点击提交按钮之后 依旧没有验证的效果 。   那就在提交按钮的点击事件中 添加一句话: 1 $(document).ready( function () { 2 3 //为添加产品的表单加验证效果 4 $('#form-product-add').
2255 0
bootstrap-datetimepicker 的使用
          在web开发中,难免会用到时间选择控件,也正好也在使用bootstrap,所以就找到了bootstrap-datetimepicker 这个插件,下面把这个插件的使用记录一下,以做备忘。
1414 0
js正则函数match、exec、test、search、replace、split使用介绍集合
match 方法 使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。 stringObj.match(rgExp) 参数 stringObj 必选项。对其进行查找的 String 对象或字符串文字。
563 0
+关注
子璐
java,前端相关技术专家
24
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载