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

这里写图片描述

Bootstrap3 datetimepicker控件的使用

Bootstrap3 日期+时间选择控件 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 缺点:    目前没有中文包,只有英文版 官网地址:http://eonasdan.gi...
  • u011127019
  • u011127019
  • 2016年06月21日 09:51
  • 57665

bootstrap-datepicker 的正确使用方式

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

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

日期时间选择器 目前,bootstrap有两种日历。datepicker和datetimepicker,后者是前者的拓展。 Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图、年...
  • qq_28633249
  • qq_28633249
  • 2017年08月13日 15:00
  • 8013

bootstrap-datepicker使用总结

详见:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm bootstrap-datepicker 插件修改为默认中文 - cnh...
  • huang100qi
  • huang100qi
  • 2016年10月14日 11:45
  • 854

BootStrap中datepicker的使用和修改

笔者的应用场景是angular封装下的bootstrap中datepicker的使用。并一定程度上展示这个插件的diy修改.这两天用到了bootstrap中的datepicker插件。然后查阅了一下各...
  • ouyangyanlan
  • ouyangyanlan
  • 2015年10月31日 17:33
  • 23514

bootstrap的datepicker、datetimepicker和jquery的datepicker使用心得

bootstrap的datepicker、datetimepicker和jquery的datepicker使用区别,API调用区别
  • u011623918
  • u011623918
  • 2015年11月04日 09:55
  • 13936

bootstrap-datepicker日历控件的使用心得

1.导入文件 bootstrap-datepicker/dist/css/bootstrap-datepicker3.css bootstrap-datepicker/dist/css/bootst...
  • G_honey
  • G_honey
  • 2016年12月23日 17:57
  • 2193

bootstrap datepicker使用中遇到的小问题

项目中的日历控件统一使用datepicker, 统计分析中会默认给开始结束时间赋值(默认统计一年时间段的数据信息,规定结束时间必须大于等于结束时间,当结束时间小于开始时间时,则开始时间会自动更改为所设...
  • who_is_xiaoming
  • who_is_xiaoming
  • 2017年07月19日 15:49
  • 552

bootstrap的datepicker在选择日期后调用某个方法

首先感谢网易LOFTER博主Ivy的博客,我才顿悟了问题所在,希望给后面用这几款插件的童鞋一个提醒,别犯和我同样的错误! 这里是lvy博主写的博客:http://10305101ivy.blog.1...
  • huanghanqian
  • huanghanqian
  • 2016年11月08日 15:14
  • 12601

bootstrap datepicker日期插件汉化

bootstrap datepicker日期插件汉化
  • john1337
  • john1337
  • 2017年06月08日 09:56
  • 4432
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap-datepicker的简单使用
举报原因:
原因补充:

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