datetimepicker使用

常考地址：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使用的更多相关文章

Bootstap datetimepicker报错TypeError: intermediate value
Bootstrap datetimepicker有多个版本,官方的链接中,只是datepicker,没有时间的选择,原版的datetimepicker也不再更新,不能用新版的jquery.现在http ...
jQuery DateTimePicker 日期和时间插件
jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...
jQuery DateTimePicker 日期控件
在线实例实例演示使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...
物联网平台设计心得：DateTimePicker实现选择联动
所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是 ...
在asp.net mvc4项目里bootstrap datetimepicker控件的使用
前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...
DateTimePicker如何与Delphi自带Style同步
Delphi 的 DateTimePicker 组件有一个CalColors属性,可以设置 DropDown 打开的日历节目的风格.但如果不使用 Delphi 自带的 Style,在这里设置属性看不到 ...
一款基于bootstrap的datetimepicker
<!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...
datetimepicker一个不错的日历android特效
datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...
注意：DateTimePicker.Text不靠谱
这鸟属性把我害苦过,特此敬告一下大家.具体表现在: 获取时:在DateTimePicker.ValueChanged事件中,获取到的Text有可能是string.Empty!!!,特别当ValueCh ...
web 前端常用组件【04】Datetimepicker 和 Lodop
web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...

随机推荐

js面试题知识点全解(一作用域)
问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...
【总结整理】关于ArcGIS中拓扑的理解
空间拓扑: https://www.baidu.com/link?url=f8fd1d75GhwtT1JuyPDZydZlWCgEXB9DeuTzDqGQIIRpq0bM-8t3MlC5tXYvEwQ ...
POJ 1220 高精度/进制转换
n进制转m进制,虽然知道短除法但是还是不太理解,看了代码理解一些了: 记住这个就好了: for(int k=0;l; ){ for(int i=l ; i>=1 ; i--){ num[i - ...
[转]MySQL5.6.22 安装
原文路径 http://jifeng3321.iteye.com/blog/2181517?utm_source=tuicool 由于一直做银行项目,所以一直在用oracle和db2,但最近自己想 ...
php学习笔记-foreach循环
顾名思义,foreach是for each的连写,不是for reach.意思就是对数组中的每个元素都要处理一次. foreach只能用来处理数组. 有两种用法,先看第一种. foreach(arra ...
EZOJ #88
传送门分析自然想到二分我们二分一个长度,之后考虑如何线性判断是否合法我们可以维护一个单调队列表示从i开始的长度为d的区间和的最大值每次用一段区间和减去它包含的长度为d的区间最大值即可但是我 ...
树莓派研究笔记（10）-- Retropie 模拟器
前面介绍过lakka模拟器,小巧,轻便,支持中文.其实最著名的游戏系统还是要属于Retropie啊.虽然笨重了一点,但是很多树莓派系统的原汁原味还是保留的很好.这样就不需要我们自己还要对lakka的源 ...
android listview addHeaderView和addFooterView的注意事项
1. item内如果有button等控件时,在监听listview的onitemclick事件时,焦点会被item内的button. imagebutton等控件抢走,从而导致在listview设置了 ...
Java50道经典习题-程序26 求星期
题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母.分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母.周一至周日的英文单词 ...
css笔记-1
id 优先级大于 class 行间 style 优先级大于id class 和属性是并行的 !important > 行间样式 >id >class|属性 >标签选择器 &g ...

datetimepicker使用

datetimepicker使用的更多相关文章

随机推荐

热门专题