常考地址：http://www.bootcss.c

直接上代码：

步骤：1.http://www.bootcss.com/p/bootstrap-datetimepicker/下载包

2.将里面的js,css脚本引入

就oK了

<!DOCTYPE html>

<html>

<head>

    <!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->

    <title></title>

    <!--<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">-->

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

</head>

<body>

<div class="container">

    <form action="" class="form-horizontal"  role="form">

        <fieldset>

            <legend>Test</legend>

            <div class="form-group">

                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>

                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

                </div>

                <input type="hidden" id="dtp_input1" value="" /><br />

            </div>

            <div class="form-group">

                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>

                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">

                    <input class="form-control" size="16" type="text" id="datetimepicker" value="" readonly>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>

                </div>

                <input type="hidden" id="dtp_input2" value="" /><br />

            </div>

            <div class="form-group">

                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>

                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">

                    <input class="form-control" size="16" type="text" value="" readonly>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>

                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

                </div>

                <input type="hidden" id="dtp_input3" value="" /><br />

            </div>

        </fieldset>

    </form>

</div>

<!--<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>-->

    <script src="jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

    <!--<script src="js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>-->

<script type="text/javascript" charset="utf-8">

    (function ($) {

        $.fn.datetimepicker.dates['zh-CN'] = {

            days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],

            daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],

            daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],

            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

            monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

            today: "今天",

            suffix: [],

            meridiem: ["上午", "下午"]

        };

    }(jQuery));

    $('.form_datetime').datetimepicker({

        format: 'yyyy-mm-dd',

        language: 'zh-CN',

        weekStart: 1,

        todayBtn: 1,

        autoclose: 1,

        todayHighlight: 1,

        startView: 2,

        forceParse: 0,

        showMeridian: 1,

    });

    $('.form_date').datetimepicker({

        format: 'yyyy-mm-dd',

        language: 'zh-CN',

        weekStart: 1,

        todayBtn: 1,

        autoclose: 1,

        todayHighlight: 1,

        startView: 2,

        minView: 2,

        forceParse: 0

    })

    .on('changeDate', function (ev) {

        alert("ces测试");

        //if (ev.date.valueOf() < date-start-display.valueOf()){

        //    ....

        //}

    });;

    $('.form_time').datetimepicker({

        language: 'zh-CN',

        weekStart: 1,

        todayBtn: 1,

        autoclose: 1,

        todayHighlight: 1,

        startView: 1,

        minView: 0,

        maxView: 1,

        forceParse: 0

    });

</script>

</body>

</html>

om/p/bootstrap-datetimepicker/

datetimepicker使用的更多相关文章

  1. Bootstap datetimepicker报错TypeError: intermediate value

    Bootstrap datetimepicker有多个版本,官方的链接中,只是datepicker,没有时间的选择,原版的datetimepicker也不再更新,不能用新版的jquery.现在http ...

  2. jQuery DateTimePicker 日期和时间插件

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...

  3. jQuery DateTimePicker 日期控件

    在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...

  4. 物联网平台设计心得：DateTimePicker实现选择联动

    所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是 ...

  5. 在asp.net mvc4项目里bootstrap datetimepicker控件的使用

    前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...

  6. DateTimePicker如何与Delphi自带Style同步

    Delphi 的 DateTimePicker 组件有一个CalColors属性,可以设置 DropDown 打开的日历节目的风格.但如果不使用 Delphi 自带的 Style,在这里设置属性看不到 ...

  7. 一款基于bootstrap的datetimepicker

    <!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...

  8. datetimepicker一个不错的日历android特效

    datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...

  9. 注意：DateTimePicker.Text不靠谱

    这鸟属性把我害苦过,特此敬告一下大家.具体表现在: 获取时:在DateTimePicker.ValueChanged事件中,获取到的Text有可能是string.Empty!!!,特别当ValueCh ...

  10. web 前端常用组件【04】Datetimepicker 和 Lodop

    web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...

随机推荐

  1. java 类中 static 的使用

    在类中 static 主要修饰变量,方法及代码块.大致的执行和使用,据个人理解如下: 1.修饰变量: 在修饰变量时,如 ,表示该变量是静态变量,也可称为类变量.当当前变量是静态变量时,该变量被该类的所 ...

  2. 第2章 构建springboot工程 2-1 构建SpringBoot第一个demo

    以后的趋势肯定是以一个微服务为主导的, Spring-Boot的指导 Maven整个环境构建之前的整个项目其实是一个很普通的J2SE项目,它构建完之后会进行重构,重构为Maven的一个项目路径.可以看 ...

  3. R: 常用操作：

    ################################################### #清除所有变量: rm(list=ls()) #查看变量类型 getwd() setwd() i ...

  4. 1027C Minimum Value Rectangle

    传送门 题目大意 有n个木棍,让你选4根使得组成的矩形的周长的平方除以面积最小. 分析 这个题看起来就是一个需要证明的贪心,下面我们来证明一下: 所以我们只需要枚举一边所有的a的可能值,然后b就是比a ...

  5. for与break的用法

    # Auther: Aaron Fan age_of_oldboy = 56 #执行3次循环for i in range(3): guess_age = int(input("猜一下oldb ...

  6. Jtabbedpane设置透明、Jpanel设置透明

    摘自 https://zhidao.baidu.com/question/983204331427010139.html java中如何设置Jtabbedpane为透明 20 在Jtabbedpane ...

  7. Python程序设计8——网络编程

    Python是一个很强大的网络编程工具,python内有很多针对场景网络协议的库,在库顶部可以获得抽象层,这样就可以集中精力在程序的逻辑处理上,而不是停留在网络实现的细节中. 1 少数几个网络设计模块 ...

  8. C# 使用SendMessage 函数

    在C#中,程序采用了的驱动采用了事件驱动而不是原来的消息驱动,虽然.net框架提供的事件已经十分丰富,但是在以前的系统中定义了丰富的消息对系统的编程提供了方便的实现方法,因此在C#中使用消息有时候还是 ...

  9. org.apache.commons.lang3包中的isEmpty和isBlank

    主要为了区分一下empty和blank的用法,先看源码: isEmpty public static boolean isEmpty(CharSequence cs) { return cs == n ...

  10. kolla-build镜像时，问题汇总

    记录下kolla-build镜像时,遇到的一些问题,既为了方便自己以后问题的查找,也为了帮助别人避免踩这些坑.遇到的问题会持续更新在博客里面. 问题1:使用的kolla 版本是ocata版本,本地已经 ...