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

选择年份

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. Spring再接触 简单属性注入

    <bean name="userDAO" class="com.bjsxt.dao.impl.UserDAOImpl"> <property ...

  2. 小乌龟 coding 克隆、提交一直提示无权限

    因为之前设置过账号,但是网上各种命令行清除都没有用,进入小乌龟设置删除全局配置,系统配置,保存就可以克隆等操作了

  3. 项目(九) 企业级Memcached服务应用实践

    一, Memcached介绍   1.1 Memcached与常见同类软件对比 (1)Memcached是什么? Memcached是一个开源的,支持高性能,高并发的分布式内存缓存系统,由C语言编写, ...

  4. 一个简单的struts2上传图片的例子

    https://www.cnblogs.com/yeqrblog/p/4398914.html 在我的大创项目中有对应的应用

  5. 云笔记项目- 上传文件报错"java.lang.IllegalStateException: File has been moved - cannot be read again"

    在做文件上传时,当写入上传的文件到文件时,会报错“java.lang.IllegalStateException: File has been moved - cannot be read again ...

  6. Game Engine Architecture 4

    [Game Engine Architecture 4] 1.a model of multiple semi-independent flows of control simply matches ...

  7. centos7 安装mongodb

    1. 创建mongodb数据,日志,配置文件存放目录# mkdir  /data# tar xzf mongodb-linux-x86_64-rhel70-4.0.8.tgz# mv mongodb- ...

  8. 算法练习LeetCode初级算法之其他

    位1的个数 解法一: class Solution { // you need to treat n as an unsigned value public int hammingWeight(int ...

  9. Find out where to contain the smartforms

    Go to table E071 and give smarforms name and it will give the transport req for that. Run SE03, choo ...

  10. Android Studio 的 build 过程

    如图, 编译器将源代码(包括 Application Module 及其所依赖的所有 Library 源代码)转换成 DEX(Dalvik Executable)文件(其中包括运行在 Android ...