写在前面:

　　日期组件有很多,这里简单的记录下bootstrap的一个日期插件datetimepicker，使用方法比较简单，基本上看一些就会了，但是还是记录下。

　　这个就不过多的说了，简单粗暴上代码

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>datetimpicker测试</title>

    <!--图标样式-->

    <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" />

    <link href="${baseURL}/Bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>

    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>

    <script src="${baseURL}/Bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

    <script src="${baseURL}/Bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <style type="text/css">

    </style>

</head>

<body>

    <div style="height:500px;border: 1px solid #f79646">

        <div>

            <form id="header_form" method="" action="" >

                &nbsp;&nbsp;&nbsp;

                <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Date</label>

                <input type="text"  id="input_date" name="recordDate" style="border:0.5px solid #fac090"/>

            </form>

        </div>

    </div>

</body>

<script type="text/javascript">

    $(function(){

        $("#input_date").datetimepicker({

            bootcssVer:3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头

            format: 'yyyy-mm-dd',

            minView: 'month',//设置时间选择为年月日 去掉时分秒选择

            todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。

            language: 'zh-CN',

            autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。

            keyboardNavigation: true, //是否允许通过方向键改变日期。

            forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。

            todayHighlight: 1  //如果为true, 高亮当前日期

        }).on("click", function () {

            //設置可选的最后日期為當前日期

            $("#input_date").datetimepicker("setEndDate", getToday())

        });

    });

    //獲取當前日期

    function getToday(){

        var today = new Date()

        var year = today.getFullYear();

        var month = today.getMonth() + 1;

        var day = today.getDate();

        var todayStr = year+"-"+month+"-"+day;

        return todayStr;

    }

</script>

</html>

　　代码没什么好说的，大概看下就懂了，也写了很多的注释...........

Bootstrap-datetimepicker日期插件简单使用的更多相关文章

  1. bootstrap datetimepicker 日期插件超详细使用方法

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  2. bootstrap datetimepicker日期插件美化

    效果 https://segmentfault.com/img/bVbieIp?w=1029&h=461 原文链接:https://segmentfault.com/a/11900000167 ...

  3. bootstrap的日期插件datetimepicker有问题

    bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...

  4. yii2.0使用bootstrap中日期插件

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...

  5. 使用bootstrap的日期插件

    1.  需要用的js包点击下载,在项目中引入该js. <script language="JavaScript" src="${pageContext.reques ...

  6. 常见问题：bootstrap datepicker日期插件汉化

    引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...

  7. jsp笔记----97DatePicker日期插件简单使用

    <s:form action="" theme="simple"> <s:hidden name="keyword3" v ...

  8. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  9. Bootstrap日期插件中文实现

    Bootstrap的相关JS和CSS直接跳过. <script type="text/javascript" src="static/js/jquery-1.9.1 ...

随机推荐

  1. im4java学习---阅读documentation文档

    Utilities----im提供的一些工具类 ①.读取图片文件信息---Info类 我们之前的做法: op.format("width:%w,height:%h,path:%d%f,siz ...

  2. 数据结构之DFS与BFS

    深度搜索(DFS) and  广度搜索(BFS) 代码如下: #include "stdafx.h" #include<iostream> #include<st ...

  3. 图论：Gale-Shapley算法

    Gale-Shapley算法又叫做延迟认可算法,它可以解决这么一个问题 一共有N位男士和N位女士 每位男士对每位女士都有一个好感度,让他们结合成为N对夫妻,要求男士优先表白,最后问结合情况 第一轮,每 ...

  4. CF502C The Phone Number

    C. The Phone Number time limit per test 1 second memory limit per test 256 megabytes     Mrs. Smith ...

  5. 计算代码行数Demo源码

    源码下载:04-计算代码行数.zip24.1 KB////  main.m//  计算代码行数////  Created by apple on 13-8-12.//技术博客http://www.cn ...

  6. swift出师作，史丹佛大学游戏制作案例，计算器，小游戏

    这两个案例得好好弄清楚,感觉在任何方面既然能够作为公开课被提到这所名校的课程里面自然有不得不学习的理由,感觉应该去入手一下,毕竟这种课,价格不匪,难以接触,能看到就当再教育了.

  7. bzoj 1009 DP+矩阵加速

    我们用DP来解决这个问题 W[I,J]表示准考证的第I位,和不吉利的数匹配到了第J位的方案数,这个状态的表示也可以看成 当前到第I位了,准考证的后J位是不吉利的数的前J位,的方案数 那么我们最后的an ...

  8. CSS3动画(重要)

    CSS3 动画 CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyfr ...

  9. Linux 添加PPA源

    我们在使用Ubuntu安装程序时经常会遇到添加软件源的操作,最常见的是ppa软件源. 例如:sudo add-apt-repository ppa:rvm/smplayer 这就是添加smplayer ...

  10. Linux进程冻结技术【转】

    转自:http://blog.csdn.net/zdy0_2004/article/details/50018843 http://www.wowotech.net/ 1 什么是进程冻结 进程冻结技术 ...