大多数情况下日历组件我们使用的都是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中日历组件只显示年月的更多相关文章

  1. vue 日历组件只显示本月和下个月 -- 多选日期

    效果就是上图 代码贴出 1.在components > calander > index.vue <template> <div class="page&quo ...

  2. easyui datebox时间控件如何只显示年月

    easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...

  3. easyui的datebox只显示年月

    要求点击easyui的datebox时只显示年月,隐藏日,之前百度了好多,发现有的好麻烦,有的使用没效果,也许自己没理解,改不了.最后老员工帮我搞定了,添加一个fomatter和一个parser函数就 ...

  4. 自定义一个只显示年月的DatePicker(UIDatePicker无法实现年月显示)

    HooDatePicker 介绍(introduction) ==================================================项目需要一个DatePicker,只显 ...

  5. easyui datebox 扩展 只显示年月

    http://blog.csdn.net/zhaobao110/article/details/47755445 一个日期控件只显示年月是很正常的事情.可是easyui datebox 不支持这种格式 ...

  6. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

  7. zui框架配置日期控件只显示年月

    zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...

  8. 转 EasyUi日期控件datebox设置,只显示年月,也只能选择年月

    1.引入Jquery和easyui,注低版本的Jquery和easy不能使用,这里使用的Jquery是1.8.2easyui是1.6.1.1.easyui下载地址:http://www.jeasyui ...

  9. JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

    标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...

随机推荐

  1. Django-【views】decorators.csrf

      views下导入方法 from django.views.decorators.csrf import csrf_exempt,csrf_protect csrf_exempt是全局需要,唯独这个 ...

  2. Linux 内核同步之自旋锁与信号量的异同【转】

    转自:http://blog.csdn.net/liuxd3000/article/details/8567070 Linux 设备驱动中必须解决的一个问题是多个进程对共享资源的并发访问,并发访问会导 ...

  3. nodejs 使用redis 管理session

    一.在开发机安装redis并远程连接 因本人的远程开发机配置原因,使用jumbo安装redis 首先登录开发机,并使用jumbo 安装redis:jumbo install redis 查看redis ...

  4. 获取file中字段,写入到TXT文件中

    一下代码省略了很多,哈哈哈 a.txt文件 uid,type,pointx,pointy,name1,9,911233763,543857286,区间测速起点3,9,906371086,5453354 ...

  5. ASPxTreeList的右键按钮事件

    ASPxTreeList应该是比较长用的控件了~现在就来说说它的右键按钮事件 这里实现的是右键里有折合和展开所有节点的功能 code: <dx:ASPxTreeList ID="ASP ...

  6. [New Learn]被嫌弃的app的一生

    1.简介 为什么叫被嫌弃的app的一生?致敬电影<被嫌弃的松子的一生>. 自学IOS东一锄西一镐的总感觉没有一个总的概念,还是多看看官网吧,先看一下一个app的整个生命周期,本文主要是翻译 ...

  7. vue的data用到this问题

    问题:在vue中用vue-awesome-swiper,在data中初始化,用到swiper一个方法onTap,然后再调vue的一个函数,用到this,可是... data() { return { ...

  8. Python图像处理库(2)

    1.4 SciPy SciPy(http://scipy.org/) 是建立在 NumPy 基础上,用于数值运算的开源工具包.SciPy 提供很多高效的操作,可以实现数值积分.优化.统计.信号处理,以 ...

  9. [转载]Python logging模块详解

    原文地址: http://blog.csdn.net/zyz511919766/article/details/25136485 简单将日志打印到屏幕: import logging logging. ...

  10. JavaScript如何判断变量是数组还是对象

    编辑 方法一:通过判断变量的类型,并且变量的length属性(除了有一种例外是arguments对象–当给函数传参时数据存储的地方) var arr=[2,3,4]; var obj={"n ...