粗略整理,可能存在其他的方式请大家多多指教

选择年份

html

<div class="dropdown">
<label class="search-label">选择年份</label>
<div class="input-daterange input-group">
<input type="text" class="input-sm yearpicker" name="year" />
</div>
</div>

 js 

 $('.yearpicker').datepicker({
startView: 'decade',
minView: 'decade',
format: 'yyyy',
maxViewMode: 2,
minViewMode:2,
autoclose: true
});

只选择月份:

html

<div class="input-group col-md-4">
<span class="input-group-addon">月份</span>
<div class="input-daterange input-group">
<input type="text" class="form-control input-sm monthPicker" name="month12"/>
</div>
</div>

js

$('.monthPicker').datepicker({
language: "zh-CN",
format: 'mm',
autoclose: true,
startView: 'months',
maxViewMode:'months',
minViewMode:'months'
});

  另一种是:亲测有效

 <div class="input-group">
<span class="input-group-addon">月份</span>
<input type="text" class="input-sm form-control monthPicker" name="startTime"/>
</div> $('.monthPicker').datepicker({
language: "zh-CN",
format: "yyyy-mm",
autoclose: true,
startView:2,
minView:2,
maxViewMode:4,
minViewMode:1
});

  另外有几个属性要解释一下:

format

String. 默认值: 'mm/dd/yyyy'

日期格式, p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。

  • p : meridian in lower case ('am' or 'pm') - according to locale file
  • P : meridian in upper case ('AM' or 'PM') - according to locale file
  • s : seconds without leading zeros
  • ss : seconds, 2 digits with leading zeros
  • i : minutes without leading zeros
  • ii : minutes, 2 digits with leading zeros
  • h : hour without leading zeros - 24-hour format
  • hh : hour, 2 digits with leading zeros - 24-hour format
  • H : hour without leading zeros - 12-hour format
  • HH : hour, 2 digits with leading zeros - 12-hour format
  • d : day of the month without leading zeros
  • dd : day of the month, 2 digits with leading zeros
  • m : numeric representation of month without leading zeros
  • mm : numeric representation of the month, 2 digits with leading zeros
  • M : short textual representation of a month, three letters
  • MM : full textual representation of a month, such as January or March
  • yy : two digit representation of a year
  • yyyy : full numeric representation of a year, 4 digits

weekStart

Integer. 默认值:0

一周从哪一天开始。0(星期日)到6(星期六)

startDate

Date. 默认值:开始时间

The earliest date that may be selected; all earlier dates will be disabled.

endDate

Date. 默认值:结束时间

The latest date that may be selected; all later dates will be disabled.

autoclose

Boolean. 默认值:false

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

startView

Number, String. 默认值:2, 'month'

日期时间选择器打开之后首先显示的视图。 可接受的值:

  • 0 or 'hour' for the hour view
  • 1 or 'day' for the day view
  • 2 or 'month' for month view (the default)
  • 3 or 'year' for the 12-month overview
  • 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默认值:0, 'hour'  1, 'day'  2, 'month'  3,'year'  4 ,'10-year'

日期时间选择器所能够提供的最精确的时间选择视图。

maxView

Number, String. 默认值:4, 'decade' 表示最大的视图 比如最大可以看到10年的视图 最大可以看到一年的视图  如果你设置为年 而你希望开始展示的视图是十年 那么肯定就不行 如果你设置为天  而你希望你的minView是月 那么也肯定是不可以的

日期时间选择器最高能展示的选择范围视图。

bootstrap-datepicker简单使用的更多相关文章

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

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

  2. bootstrap datepicker含有hasDatepicker无法弹出

    bootstrap datepicker 初始化时,会给控件添加hasDatepicker类 ,如果此时调用 $singleDay.datepicker(initDayOpts);无法弹出时间控件 需 ...

  3. Bootstrap框架 简单使用

    目录 Bootstrap框架 简单使用 什么是Bootstrap 下载 Bootstrap 项目结构 Bootstrap 简单使用 表格格式 Bootstrap 按钮颜色 尺寸 Bootstrap框架 ...

  4. <day006>bootstrap的简单学习 + 轮播图

    任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  5. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  6. Bootstrap非常简单实用的web前端开发框架

    今天无意间用firebug看网站的代码发现了Bootstrap,之前从来没有听说过这个东东,于是对它产生了好奇感,通过百度我了解到了Bootstrap是一款非常简单,强悍,实用,移动设备端优先使用的这 ...

  7. require.js+bootstrap实现简单的页面登录和页面跳转

    小颖的这个demo其实很简单的,大家一起来先来看看页面效果图:          目录: 代码: inde.html <!DOCTYPE html> <html> <he ...

  8. bootstrap 一个简单的登陆页面

    效果如图:用bootstrap 写的一个简单的登陆 一.修改样式 样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以 #from { background-col ...

  9. bootstrap datepicker显示日历

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  10. BootStrap实现简单响应式导航菜单

    用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...

随机推荐

  1. MemoryStream说明

    MemoryStream 是内存流,为系统内存提供读写操作,由于 MemoryStream 是通过无符号字节数组组成的,可以说 MemoryStream 的性能可以算比较出色,所以它担当起了一些其他流 ...

  2. ftp的主动模式和被动模式的配置和区别

    原文链接: https://www.cnblogs.com/lnlvinso/p/8947369.html ftp模式分为主动模式(active mode)和被动模式(passive mode),ft ...

  3. sql两表连接

    一直以来认为exists比in效率高的说法是不准确的.如果查询的两个表大小相当,那么用in和exists差别不大.如果两个表中一个较小,一个是大表,则子查询表大的用exists,子查询表小的用in:例 ...

  4. Pycharm配置支持vue语法

    1. 2. 3. 4. 5.

  5. c语言作业01-分支、顺序结构

    1.本章思考总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 这一个星期算是我学习c语言的起点,因为暑假没有提前自学c语言,所以一上课时会觉得比较吃力也难以跟上其他大部分同 ...

  6. C语言典型编程2

    关于C的一些小而精的编程,适合希望提升编程能力的初学者学习:关键编程也就几句,但思维可以迁移到其他编程语言.同一问题,算法多种. //任意整数的任意次方取后3位(算数取位)#include<st ...

  7. nginx+ flume

    nginx 作用: 做负载均衡  nginx和lvs的区别:nginx可以做反向代理 1.上传nginx安装包  tar -zxvf tengine-2.1.02.安装环境  依赖 gcc opens ...

  8. 其他封装ui的平台

      mint平台 http://mint-ui.github.io/#!/zh-cn

  9. python note 17 random、time、sys、os模块

    1.random模块(取随机数模块) # 取随机小数 : 数学计算 import random print(random.random())# 取0-1之间的小数 print(random.unifo ...

  10. node杂谈(一)

    在node中var作用域为当前js文件 每一个js文件都是一个module对象 global为全局对象,可以用在不同js之间访问(不要设立过多的全局对象,除非必要,比如设立生产环境还是开发环境) a ...