菜单

bootstrap-datetimepicker使用记录

2018年12月20日 - Bootstrap

版本:V2.0

官网下载的文档并从未太多详细的牵线如何利用,而且下载到的文本本地测试时其实并不曾官网的效能,那里大概介绍下在本地建个简单的页面做到官网呈现的截图效果:

  1、bootstrap-datetimepicker.min.css

manbetx2.0手机版 1manbetx2.0手机版 2manbetx2.0手机版 3

  2、bootstrap-datetimepicker.min.js

直白贴代码:

  3、bootstrap-datetimepicker.zh-CN.js

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html lang=”zh-CN” xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
manbetx2.0手机版,    <meta name=”viewport” content=”width=device-width,
initial-scale=1″>
    <!–
上述3个meta标签*必须*座落最前面,任何另外情节都*必须*跟随其后!
–>
    <title>test</title>
    <link
href=”http://cdn.bootcss.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css
rel=”stylesheet”>
    <link href=”css/bootstrap-datetimepicker.css”
rel=”stylesheet”/>

  在动用到只展现年、月时出现问题:月份在自动识别时出现多2个月,比如现在是9月,在机动加载时会采取一月份(不爽,尽管应用没啥大问题)。实现只显示时间格局:

    <!– HTML5 shim and Respond.js for IE8 support of HTML5 elements
and media queries –>
    <!– WARNING: Respond.js doesn’t work if you view the page via
file:// –>
    <!–[if lt IE 9]>
      <script
src=”http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
      <script
src=”http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    <![endif]–>
    <!– jQuery (necessary for Bootstrap’s JavaScript plugins)
–>
    <script src=”js/jquery.min.js”></script>
    <!– Include all compiled plugins (below), or include individual
files as needed –>
    <script
src=”http://cdn.bootcss.com/twitter-bootstrap/2.2.2/bootstrap.min.js"&gt;&lt;/script&gt;
    <script src=”js/bootstrap-datetimepicker.js”></script>
    <script
src=”js/bootstrap-datetimepicker.zh-CN.js”></script>
</head>
<body>
    <div class=”input-append date form_datetime”
data-picker-position=”bottom-left”>
        <input type=”text” readonly=”” value=”” size=”16″>
        <span class=”add-on”><i
class=”icon-th”></i></span>
    </div>
     
    <script type=”text/javascript”>
    $(“.form_datetime”).datetimepicker({
         minView: “month”, //采用日期后,不会再跳转去选拔时分秒
      format: “yyyy-mm-dd”, //选取日期后,文本框显示的日子格式
      language: ‘zh-CN’, //汉化
      autoclose:true //拔取日期后自行关闭
    });
    </script>
</body>
</html>

startView: 3,
minView: 3

说明:

案由:js中有处理,解决办法:为input加个div,并且div的class为“input-group”(必须)。js中就是采取那个class处理了(没时间商讨js,知道问题在哪就行了)。

急需留意两点实在即可:


1、bootstrap-datetimepicker.js和bootstrap-datetimepicker.css只需用下载包里面的文件即可;

2、可是bootstrap.min.css和bootstrap.min.js就非得用”http://cdn.bootcss.com/twitter-bootstrap/2.2.2这种bootstrap2版本的,否则如果是bootstrap3的就显示不出截图的效果了。因为官网的datetimepicker是基于bootstrap2的。

版权注明:本文为博主原创著作,未经博主允许不得转载。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图