bootstrap-datepicker简单使用
粗略整理,可能存在其他的方式请大家多多指教
选择年份
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简单使用的更多相关文章
- bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...
- bootstrap datepicker含有hasDatepicker无法弹出
bootstrap datepicker 初始化时,会给控件添加hasDatepicker类 ,如果此时调用 $singleDay.datepicker(initDayOpts);无法弹出时间控件 需 ...
- Bootstrap框架 简单使用
目录 Bootstrap框架 简单使用 什么是Bootstrap 下载 Bootstrap 项目结构 Bootstrap 简单使用 表格格式 Bootstrap 按钮颜色 尺寸 Bootstrap框架 ...
- <day006>bootstrap的简单学习 + 轮播图
任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...
- (新手向)基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- Bootstrap非常简单实用的web前端开发框架
今天无意间用firebug看网站的代码发现了Bootstrap,之前从来没有听说过这个东东,于是对它产生了好奇感,通过百度我了解到了Bootstrap是一款非常简单,强悍,实用,移动设备端优先使用的这 ...
- require.js+bootstrap实现简单的页面登录和页面跳转
小颖的这个demo其实很简单的,大家一起来先来看看页面效果图: 目录: 代码: inde.html <!DOCTYPE html> <html> <he ...
- bootstrap 一个简单的登陆页面
效果如图:用bootstrap 写的一个简单的登陆 一.修改样式 样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以 #from { background-col ...
- bootstrap datepicker显示日历
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- BootStrap实现简单响应式导航菜单
用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明. 先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...
随机推荐
- setCapture 使用方法
setCapture 可以捕获到 移动到浏览器外的鼠标事件. 例如拖动过程中,即使鼠标移动到了浏览器外,拖动程序依然可以执行! 作用就是把 把鼠标事件 捕获到 当前文档指定的对象! setCaptur ...
- 爬虫之scrapy扩展
针对pipelines的扩展 from scrapy.exceptions import DropItem class CustomPipeline(object): def __init__(sel ...
- js 金额用逗号隔开
function money(s, n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + "") ...
- k8s重启策略
Pod 的重启策略有 3 种,默认值为 Always. Always : 容器失效时,kubelet 自动重启该容器: OnFailure : 容器终止运行且退出码不为0时重启: Never : 不论 ...
- 使用pycharm 出现 interpreter field is empty 完美解决方法(转载 记录)
使用pycharm 出现 interpreter field is empty 主要是因为你的电脑没有正确安装python或者安装python出错,重新下载安装覆盖就行 下载安装包:从Python的官 ...
- React Native笔记
① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快速开发App ④ iOS&Android大部分代码通用 ⑤ code-push能做热更新,但是用不好依旧坑
- MongoDB - 1
MongoDB - 1 一.初识MongoDB 之 什么东西都得先从理论入手,你说是不是啊? MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展 ...
- SpringBoot集成MyBatis的分页插件 PageHelper
首先说说MyBatis框架的PageHelper插件吧,它是一个非常好用的分页插件,通常我们的项目中如果集成了MyBatis的话,几乎都会用到它,因为分页的业务逻辑说复杂也不复杂,但是有插件我们何乐而 ...
- Linux(centos)下安装JDK
安装 JDK是运行java程序必不可少的环境,服务器上跑程序也不例外.首先在安装之前,要知道Linux下安装软件有两种,一种是使用yum等命令直接下载,一种是使用上传下载工具,上传至Linux下使用, ...
- Retrofit 2.0 上传文件
1.用MultipartBody.Part的方式上传文件(单文件上传)(表单方式) @Multipart @POST("xxx/xxx") Call<ResponseBody ...