<!DOCTYPE HTML>
02 <html>
03   <head>
04     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
05     <link rel="stylesheet" type="text/css" media="screen"
06      href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
07   </head>
08   <body>
09     <div id="datetimepicker" class="input-append date">
10       <input type="text"></input>
11       <span class="add-on">
12         <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
13       </span>
14     </div>
15     <script type="text/javascript"
16      src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
17     </script>
18     <script type="text/javascript"
19      src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
20     </script>
21     <script type="text/javascript"
22      src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
23     </script>
24     <script type="text/javascript">
25       $('#datetimepicker').datetimepicker({
26         format: 'MM/dd/yyyy hh:mm',
27         language: 'en',
28         pickDate: true,
29         pickTime: true,
30         hourStep: 1,
31         minuteStep: 15,
32         secondStep: 30,
33         inputMask: true
34       });
35     </script>
36   </body>
37

<html>

格式如下：

<input id="to_datetime" type="text" class="zc_input" value="结束日期" data-date-format="yyyy-mm-dd hh:ii" data-date="<?php echo date('Y-m-d',time())?>T05:25:07Z">

<script>

$('#from_datetime').datetimepicker({
        language:  'zh-CN',
        format: 'yyyy-mm-dd hh:ii',
        weekStart: 1,
        todayBtn:  1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  forceParse: 0,
        showMeridian: 1,
  initialDate:2013-12-23
        //pickerPosition: "bottom-left"
    });

</script>

　　　　　　　　　　　　　　by:yttsic

bootstrap日期时间插件datetimepicker的更多相关文章

  1. Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

  2. boostrap日期时间插件datetimepicker使用过程的一些问题总结

    1.汉化问题 虽然有转门的汉化脚本,不过如果简单使用的话自己稍微改一下源码就行了: var dates = $.fn.datetimepicker.dates = { en: { days: ['Su ...

  3. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  4. Bootstrap日期/日历插件Datepicker 时间加标记

    由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...

  5. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  6. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  7. dateTimePicker日期时间插件-----限定节假日调休的可选择性

    需求:在项目中需要一款这样的日期插件,可以选择年月日,时分秒,对法定节假日不能选择,因法定节假日进行的调休可以选择: 现在使用的比较多的日期插件比如:Wdatepicker,jqueryUI的date ...

  8. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  9. 【bootstrap】时间选择器datetimepicker和daterangepicker

    在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件:   需要的文件: <link rel= ...

随机推荐

  1. ACM1024动态规划

    #include <cstdio> #include <algorithm> #define FI(a, b, c) for(int a = (b); a <= (c); ...

  2. Sicily1151：魔板搜索及优化

    最终优化代码地址: https://github.com/laiy/Datastructure-Algorithm/blob/master/sicily/1151.c 题目如下 Constraints ...

  3. Eclipse如何生成带有自定tag的Java Doc

    1. 选择要生成Java Doc的工程,单击鼠标右键,在弹出菜单中选择[Export],会弹出以下对话框: 2. 选择[Java]--->[Javadoc],点击[Next]按钮,弹出以下对话框 ...

  4. Android开发ImageView控件缩放图片

    首先还是最基础的ImageView控件如何显示图片: <ImageView                Android:id="@+id/imgView"          ...

  5. Linux Resin 安装

    1 Resin 下载 Resin 官方下载网址. 最新版下载 resin-4.0.36.tar.gz(免费版) resin 安装须要提前配置好jdk.配置jdk请看上面文章 2 Resin 安装 (1 ...

  6. docker-compose 工具安装

    centos 7 安装 之前测试过相关安装方法 pip python 安装不行 还是用下面这个办法搞定 curl -L https://github.com/docker/compose/releas ...

  7. android 14 进度条和拖动条

    进度条: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l ...

  8. 计算机体系结构 -内存优化vm+oom

    http://www.cnblogs.com/dkblog/archive/2011/09/06/2168721.htmlhttps://www.kernel.org/doc/Documentatio ...

  9. GUI编程笔记（java）11：使用Netbeans工具进行GUI编程

    Netbeans工具:是基于java语言进行GUI界面设计的工具 Visual Studio工具:是基于C#语言进行GUI界面设计的工具

  10. UVA - 11572 Unique Snowflakes

    /* STLsort离散化==T 手工sort离散化==T map在线==T map离线处理c==A 240ms */ #include<cstdio> #include<map&g ...