bootstrap中日历组件只显示年月
大多数情况下日历组件我们使用的都是yyyy-mm-dd的日历格式,但是有时候需求不需要我们精确到日,而是最小单位到月份(yyyy-mm),网上找了很多方法,但是都没有我想要的效果,一些属性的设置都没有起到相应的效果,最后自己查了一些资料自己改了改,起到了相对应的效果,记录一下,效果图如下,


代码js如下:
function Timeinit() {
// 时间初始化
$("#dateTime").datepicker({
startView: 'years', //起始选择范围
maxViewMode:'years', //最大选择范围
minViewMode:'months', //最小选择范围
todayHighlight : true,// 当前时间高亮显示
autoclose : 'true',// 选择时间后弹框自动消失
format : 'yyyy-mm',// 时间格式
language : 'zh-CN',// 汉化
// todayBtn:"linked",//显示今天 按钮
clearBtn : true,// 清除按钮,和今天 按钮只能显示一个
});
}
html代码如下:
<div class="col-md-1 control-label text-right">年月</div>
<div class="col-md-3">
<div class="input-group date" id="dateTime">
<input type="text" class="form-control form_datetime_2 input-sm bg-white"
id='dateVal' readonly /> <span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
相对应的代码引入的css和js如下,以下assets是我的路径,你们修改你们相对应的路径即可
<!--引入 css -->
<link href="../../assets/common/commonCss.css" rel="stylesheet" />
<link href="../../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="../../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css" rel="stylesheet" />
<!-- 引入js-->
<script src="../../assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="../../assets/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="../../assets/plugins/bootstrap-daterangepicker/moment.js"></script>
<script src="../../assets/plugins/bootstrap-eonasdan-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
还有你自己要引入的你页面对应的js
bootstrap中日历组件只显示年月的更多相关文章
- vue 日历组件只显示本月和下个月 -- 多选日期
效果就是上图 代码贴出 1.在components > calander > index.vue <template> <div class="page&quo ...
- easyui datebox时间控件如何只显示年月
easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...
- easyui的datebox只显示年月
要求点击easyui的datebox时只显示年月,隐藏日,之前百度了好多,发现有的好麻烦,有的使用没效果,也许自己没理解,改不了.最后老员工帮我搞定了,添加一个fomatter和一个parser函数就 ...
- 自定义一个只显示年月的DatePicker(UIDatePicker无法实现年月显示)
HooDatePicker 介绍(introduction) ==================================================项目需要一个DatePicker,只显 ...
- easyui datebox 扩展 只显示年月
http://blog.csdn.net/zhaobao110/article/details/47755445 一个日期控件只显示年月是很正常的事情.可是easyui datebox 不支持这种格式 ...
- bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
- zui框架配置日期控件只显示年月
zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...
- 转 EasyUi日期控件datebox设置,只显示年月,也只能选择年月
1.引入Jquery和easyui,注低版本的Jquery和easy不能使用,这里使用的Jquery是1.8.2easyui是1.6.1.1.easyui下载地址:http://www.jeasyui ...
- JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日
标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...
随机推荐
- Django-【template】自定义过滤器和自定义标签
模板语言内置的过滤器和标签比较少,往往会遇到无法满足需求的情况,所以需要我们来自定义.自定义filter和simple_tag在项目中很常用 a.首先检查settings下面INSTALLED ...
- java===java基础学习(5)---文件读取,写入操作
文件的写入读取有很多方法,今天学到的是Scanner和PrintWriter 文件读取 Scanner in = new Scanner(Paths.get("file.txt") ...
- Linux 内核通知链随笔【中】【转】
转自:http://blog.chinaunix.net/uid-23069658-id-4364171.html 关于内核通知链不像Netlink那样,既可以用于内核与用户空间的通信,还能用于内核不 ...
- core dump使用方法、设置、测试用例
core dump使用方法.设置.测试用例 http://blog.csdn.net/liuzhuchen/article/details/21975227
- HDU 5118 GRE Words Once More!
题目链接:HDU-5118 题意:给定一个有向无环图,每条边有一个权值.标定一些特定节点为“特殊节点”.从节点1出发到某“特殊节点”结束的路径,称为一个“GRE单词”.单词由路径上的权值组成.给定一组 ...
- [New learn]GCD的卡死现象分析研究
https://github.com/xufeng79x/GCDDemo 1.简介 前接[New learn]GCD的基本使用,我们分析了GCD的一般使用方法,其中比较特殊的是在分析到主队列的时候发生 ...
- 在Dubbo中使用高效的Java序列化(Kryo和FST)
在Dubbo中使用高效的Java序列化(Kryo和FST) 作者:沈理 文档版权:Creative Commons 3.0许可证 署名-禁止演绎 完善中…… TODO 生成可点击的目录 目录 序列化漫 ...
- EXT入门学习
今天,对EXT做了一下初步的了解,了解了一些基本用的函数.窗体对象.表单.文本域.按钮,一些基本的函数我列了出来,写了个登陆的demo,是根据别人的例子模仿出来的,见谅哈. 基本函数 Ext.onRe ...
- NEERC 2016-2017 Probelm G. Game on Graph
title: NEERC 2016-2017 Probelm G. Game on Graph data: 2018-3-3 22:25:40 tags: 博弈论 with draw 拓扑排序 cat ...
- hihocoder 1145 : 幻想乡的日常
#1145 : 幻想乡的日常 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 幻想乡一共有n处居所,编号从1到n.这些居所被n-1条边连起来,形成了一个树形的结构. 每处 ...