常考地址：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. Python 安装 django框架

    1.安装 pip install django 2.创建项目 d:/www/django文件夹下右键->打开dos窗口 输入: python C:\ProgramData\Miniconda3\ ...

  2. ES01 数据类型、正则表达式、身份证校验

    1 基本数据类型 参见W3C的教程即可 2 正则表达式 参考博文:点击前往 3 身份证校验 参考博文:点击前往 <div class="panel panel-primary" ...

  3. winform 公共控件 ListView

    //数据显示,刷新 public void F5() { listView1.Items.Clear(); List<Students> Stu = new StudentsData(). ...

  4. SQl Server 与数据库的第一次相遇

    数据库就是 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简单说就是存储在硬盘上的文件. 市面上常见数据库有<关系数据库系统>: ORACLE(甲骨文).DB2.S ...

  5. Entity Framework Tutorial Basics（19）：Change Tracking

    Change Tracking in Entity Framework: Here, you will learn how entity framework tracks changes on ent ...

  6. review backpropagation

    The goal of backpropagation is to compute the partial derivatives ∂C/∂w and ∂C/∂b of the cost functi ...

  7. Java 深入变量和封装思想小结

    1.变量的分类和初始值 成员变量:有初始值 局部变量:没有初始值 2.类字段 static :存在于方法区里面 实例变量(实例字段):存在于堆里面 局部变量:存在于栈里面 方法的覆盖: 子类覆盖父类: ...

  8. 基于jQuery的Tooltip

    近来,要开发一个关务管理系统,为了增加系统美观度,自己开发了一个基于jQuery框的的小插件,与大家分享一下,希望大家能给我提出宝贵修改意见. 下面开发说明使用方法和内容: 一.引用jQuery框架, ...

  9. C#字符串要点(复习专用)

    一.字符串 通过string定义一个字符串,或者通过String类来创建对象. 通过new String() 创建有一下几种构造函数(从元数据),以此顺序创建string: // // 摘要: // ...

  10. java 集合（转载）

    一.集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...