bootstrap-datepicker的简单使用

原创 2016年08月28日 18:19:32

前端开发总结

bootstrap-datepicker(时间控件)

  • bootstrap-datepicker是一款时间选择插件,但默认显示的文字格式是英文,所以得先引入中文包
<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src='bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js'></script>
<script>
  • 简单的介绍一下bootstrap-datepicker一些基本属性
$(function(){
         $('#datetimepicker').datetimepicker({
           language:"zh-CN",    //语言选择中文
           format:"yyyy-mm",    //格式化日期
           timepicker:true,     //关闭时间选项
           yearEnd:2050,        //设置最大年份
           todayButton:false    //关闭选择今天按钮
           autoclose: 1,        //选择完日期后,弹出框自动关闭
           startView:3,         //打开弹出框时,显示到什么格式,3代表月
           minView: 3,          //能选择到的最小日期格式
    });
  • 举个2个简单的案例
    • 只显示年月
$('#datetimepicker').datetimepicker({
         language:"zh-CN",
         format:'yyyy-mm',
         autoclose: 1,
         startView:3, 
         minView: 3,
       });

年月

  • 显示年月日
            language:  'zh-CN',  
            minView:2,
            autoclose: 1,
            startView:3, 
            format:'yyyy-mm-dd',

年月日

注意点:可能会发生选择日历的样式问题
左右两边的按钮图片没有
这里写图片描述
这个应该是bootstrap的版本问题,在2的版本上会显示,但在3的版本上就显示不出来了,这时候给input添加form-control类名就能解决

    <input id="datetimepicker" class="form-control" type="text">

这里写图片描述

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

相关文章推荐

bootstrap-datepicker 日期格式设置

datepicker插件默认是时间格式为mm/dd/yyyy,如何更改时间的格式呢? 1、设置 data-date-format 属性

在angular 下使用bootstrap 的datepicker

如果想要在angular 下使用bootstrap 的datepicker,首先需要引入必要的js和css包。然后将bootstrap 的datepicker 用directive 封装起来,代码如下...

BootStrap中datepicker的使用和修改

笔者的应用场景是angular封装下的bootstrap中datepicker的使用。并一定程度上展示这个插件的diy修改.这两天用到了bootstrap中的datepicker插件。然后查阅了一下各...

bootstrap-datepicker 的正确使用方式

moment 需要引用 moment.js 专门用来处理日期的, 可以扩展日期的功能. 例如 format 等功能. moment.locale('zh_cn');var sd = moment()...
  • phker
  • phker
  • 2016-11-16 13:30
  • 1430

日期 bootsrtap-datatimepicker and bootstrap-datepicker 控件支持中文

引用 bootsrtap-datatimepicker and bootstrap-datepicker 控件,发现官方控件不支持中文 1,bootstrap-datepicker - 》解决方...

Louis Vuitton wallet M60007 Of the United States imposed antidumping and countervailing duty oil drill pipe

7 U.S. International Trade Commission Final Decision on China's exports to the United States from oi...

bootstrap datepicker日期插件汉化

bootstrap datepicker日期插件汉化

jQuery Valdate、bootstrap-datepicker和distpicker的一些简单用法

引言:前端有很多有意思的插件,让我们的开发效率因此变得极高,用起来也感觉很好,本人也就刚刚接触了几个有意思的插件,给大家分享一下,如果想要了解更多的功能,可以搜索去官网看。以下三个都附有官网链接。**...

第3.1.3章 WEB系统最佳实践 js控件之bootstrap-datepicker的使用

bootstrap-datepicker沙箱环境 1 requirejs配置requirejs.config({ baseUrl: '../pages/modules', // url...

使用bootstrap-datepicker的beforeShowDay给日历添加特殊日期及样式

使用Bootstrap-datepicker实现日历,以及使用beforeShowDay给日历的特殊日期添加样式 bootstrap-datepicker在线文档网址:http://bootstra...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)