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 ...

随机推荐

jquery获取元素在文档中的位置信息以及滚动条位置（转）
jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接原创 201 ...
Angular03 将数据添加到组件中
准备:已经搭建好angular-cli环境.知道如何创建组件一.将一个数据添加到组件中 1 创建一个新的组件 user-item 2 将组件添加到静态模板中 3 为组件添加属性,并利用构造器赋值 4 ...
C语言-郝斌笔记-006排序及查找
1. int partion(int *a, int low, int high) { int value = a[low]; int t; while (low < high) { while ...
Luogu 2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm
基环树森林,然而我比较菜,直接tarjan找环. 发现缩点之后变成了DAG,每一个点往下走一定会走到一个环,缩点之后搜一遍看看会走到哪个环以及那个环的编号是多少,答案就是环的$siz$$ + $要走的 ...
HDU 2819 Swap (二分匹配+破输出)
题意:给定上一个01矩阵,让你变成一个对角全是 1 的矩阵. 析:二分匹配,把行和列看成两个集合,用匈牙利算法就可以解决,主要是在输出解,在比赛时一紧张不知道怎么输出了. 输出应该是要把 match[ ...
DiscreteFrechetDist
计算离散的frechet 距离,通过计算两条曲线之间的点的距离,将两条曲线上的点按照距离以及曲线的趋势进行配对,最后根据这些配对的距离选出最后的离散frechet距离(compute discrete ...
How a web page loads
The major web browsers load web pages in basically the same way. This process is known as parsing an ...
c#链接postgresql
1.首先需要添加2个dll文件:Mono.Security.dll; Npgsql.dll. 2.配置文件增加 <appSettings> <!--<add key=" ...
ListView 动态生成 Header
//取得结果集 DataTable dt = ub.GetUser().Tables[0]; //清空原本的内容 listView1.Items.Clear(); //通过DataTable 得到当前 ...
Docker 的优势
下面我们主要从Docker对业务架构和生产实践的角度来分析. 随着业务规模的逐渐扩大,产品复杂度也随着增加,企业需要解决快速迭代.高可靠和高可用等问题,一个自然的选择是服务化的拆分,把一个单体架构拆分 ...

datetimepicker使用

datetimepicker使用的更多相关文章

随机推荐

热门专题