bootstrap-datetimepicker的使用方法和兼容问题

jinja2模版的{%block head%}中引入js文件



<script type="text/javascript" src="/static/JS/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/static/JS/bootstrap.min.js"></script>
<!-- bootstrap日期选择器 -->
    <script type="text/javascript" src="/static/JS/datetimepicker.min.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="/static/CSS/bootstrap-datetimepicker.min.css">
     <script type="text/javascript" src="/static/JS/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>


 
 
</pre><pre name="code" class="javascript">绑定表单,class="form-control <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255); "><strong>datetimepicker</strong></span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">"</span>
{{ internform.start(required='', value=internship.start,class="form-control datetimepicker") }}

在{%block script%}中设置datetimepicker控件的相关参数

    <!-- bootstrap日期选择器 -->
    <script type="text/javascript">
        $('.datetimepicker').datetimepicker({
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
            pickDate: true,
            inputMask: true,
            autoclose: true,
            todayBtn: 'linked',
            todayHighlight: true,
            minView: "month"
        });
    </script>
兼容问题:
在chrome中没有发现错误,而在firefox和ie中会显示不出来
用firefox的插件firebug控制台可看到有一个错误:
TypeError: (intermediate value).toString(...).split(...)[1] is undefined
把插件bootstrap-datetimepicker.min.js里的
this.defaultTimeZone=(new Date).toString().split("(")[1].slice(0,-1);
改为
this.defaultTimeZone='GMT '+(new Date()).getTimezoneOffset()/60;
并把bootstrap-datetimepicker.min.js重命名datetimepicker.min.js或其他js名称,即可解决。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值