大多数情况下日历组件我们使用的都是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. oracle中有关表的操作

    在Oracle中查看所有的表: select * from tab/dba_tables/dba_objects/cat; 看用户建立的表 : select table_name from user_ ...

  2. Python3 面向对象编程

    小案例: #!/usr/bin/env python # _*_ coding:utf-8 _*_ # Author:Bert import sys class Role(object): n=&qu ...

  3. GitHub创建项目入门学习

    第一次创建git项目注意事项还是挺多了,这里就写个操作步骤,方便以后查看. 网页部分 1.打开自己的主页,点击“New repository”创建远程仓库. 2.填写信息 本地部分 前提: 下载git ...

  4. 2017中国大学生程序设计竞赛 - 网络选拔赛 HDU 6156 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6156 题意:如题. 解法:数位DP,暴力枚举进制之后,就转化成了求L,R区间的回文数的个数,这个直接做 ...

  5. iOS 适配/ autoLayout基本知识

    历史 iPhone3GS.iPhone4\4s:没有屏幕适配最早开发里面的程序全部都是写死的 iPad 旋转出来之后 Autoresizing问世iPhone5\5c\5s兼容各种不同的情况 系统适配 ...

  6. 10 个打造 React.js App 的最佳 UI 框架

    10 个打造 React.js App 的最佳 UI 框架 在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架.它们具备你所需要的基本 React 组件,以及易用的 API ...

  7. Leetcode 之Longest Palindromic Substring(30)

    很经典的一道题,最长回文子串,有多种方法. 首先介绍的一种方法是从中间向两边展开.注意区分aba和abba型的回文串:如果当前最长的子串已经当于两边中最长的子串了,则无需再去判断. //从中间向两边展 ...

  8. django中使用第三方包实现定时任务

    # 转载请留言联系 在做主页静态化的时候,需要定时生成主页HTML,以保持数据的最新. 定时任务可以用第三方包django-crontab来实现. 附上官方文档:https://pypi.org/pr ...

  9. hdu 2955(概率转化,01背包)

    Hot~~招聘——巴卡斯(杭州),壹晨仟阳(杭州),英雄互娱(杭州) (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? Robberies Time Limit: 2000/100 ...

  10. python资源合集

    Python 官网: https://www.python.org/ Python2.7 doc: https://docs.python.org/2/ Python Package User Gui ...