easyUI日期控件只选择月份和日期

最近的工作中,有块业务要求只选择月份和日期,翻遍了easyUI的API和网络资料也没找到方法,网上几乎都是只要年份或者年月,没有我需要的场景。遂自己琢磨了下,最终成功只选择月份和日期,过滤掉了年份。

我想要的是这样的↓

我修改后的效果是这样的↓

现分享代码如下

 1 $("#"+param).datebox({
 2     showSeconds: false,
 3     required:true,
 4     onShowPanel: function () {// 隐藏年的选择
 5         $(".calendar-prevyear").hide();
 6         $(".calendar-nextyear").hide();
 7         $(".calendar-menu-year-inner").hide();
 8     },
 9     formatter: function(date){
10         if(date){
11             var m = date.getMonth()+1;
12             var d = date.getDate();
13             m = m<10?(‘0‘+m):m;
14             d = d<10?(‘0‘+d):d;
15             return m+‘-‘+d;
16         }
17     },
18     parser: function (date) {
19         if (!date) return new Date();
20        var array = date.split(" ");// 分成日期和时间两部分
21        var arrayDate = array[0].split("-");
22        var monthStr = arrayDate[0];
23        var dayStr = arrayDate[1];
24         var month = parseInt(monthStr,10);// 月份
25         var day = parseInt(dayStr,10);// 日
26         if (month && day){
27           return new Date(null,month-1,day,null,null,null);
28         } else {
29           return new Date();
30         }
31     }
32 });  
1 var p = $("#"+param).datebox(‘panel‘); //日期选择对象
2 p.find(‘span.calendar-text‘).on(‘DOMSubtreeModified‘,function(e){
3     var text = $(e.target).html();
4     var onlyMonth = text.split(‘ ‘);
5     if(onlyMonth.length > 1){
6         $(".calendar-text").html(onlyMonth[0]);// 不显示年份
7     }
8 });

其实解决思路就是隐藏面板中年的切换icon和年的点击面板,然后在选中日期后把年份切割掉就好了。如果要选择时分,把代码中的datebox改成datetimebox即可。

原文地址:https://www.cnblogs.com/ywy8/p/12506757.html

时间: 2024-11-05 16:04:42

easyUI日期控件只选择月份和日期的相关文章

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

zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jquery-1.11.3.min.js"></script> <script src="~/res/zui-1.9.1-dist/dist/js/zui.min.js"></script> <script src="~/res

ExtJs4.0日期控件只显示年月按年月格式会跳月的解决办法

如果是Ext.form.panel的话,只要设置一下属性就可以.如下代码: { text : '期间', width : 80, sortable : true, dataIndex : 'accountPeriod', format : 'Ym' } 如果是Ext.grid.panel的话,比较麻烦.网上也有各位大神的解决方法,不过都比较麻烦,要重写控件,我向一位大牛请教后整理出一个非常简单的方法,代码: Ext.define('Dpap.branchWithHold.WithHoldGrid

[技术分享]20171127_Kendo UI _ datePicker日期控件只能选择,不能手动输入如何实现?

demo如下: var start = $("#start").kendoDatePicker().data("kendoDatePicker"); start.element[0].disabled=true; 以下是通过ID的方式初始化datePicker控件: var start = $("#start").kendoDatePicker().data("kendoDatePicker"); 这个控件默认是可以手动输入,

elementui 日期控件设置选择范围

that.end  即为结束日期 原文地址:https://www.cnblogs.com/wurui-0922/p/10348709.html

移动端日期控件

最近在写微信端的页面,要用到日期控件,得知其内置浏览器支持HTML5的时候,我笑了(so easy~),<input type="date" />两秒钟搞定.然后找了三种机型,你是不是猜到了已经?!没错,Android,iPhone,winphone,,,奇葩的winphone内置浏览器竟然是IE.醉了,疯狂搜索,找到一篇博客mobiscroll,照着敲下来都达不到人家的效果,搞了半天,终于,,,实现了哈哈. 说到这,有人就要骂了,你傻逼啊,为啥不用jquery  mobi

Jquery Mobile日期控件mobiscroll

1.日期控件 参考:http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html http://www.wglong.com/main/artical!details?id=11 <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> <script sr

miniui日期控件mini-datepicker禁止选中日期

mini-datepicker日期控件利用js禁止选中日期 html代码: <input id="ToDate" name="ToDate" class="mini-datepicker" allowInput="false" showTodayButton="false" ondrawdate="onDrawDate" /> js代码: <script type=&q

My97DatePicker日期控件的使用

本文演示如何在MyEclipse项目中使用My97DatePicker日期控件 1.下载My97DatePicker日期控件, My97DatePicker日期控件下载地址 2.在MyEclipse项目中安装My97DatePicker,把下载后的My97DatePicker解压后放在WebRoot子目录下,如WebRoot/dd/js/My97DatePicker(我把My97DatePicker放在WebRoot/dd/js/目录下,My97DatePicker为解压后的文件夹) 3.引用M

My97DatePicker日期控件实现按日、周、月、季、年选择时间段

 http://www.cnblogs.com/kevin-zlg/p/4631413.html 前台页面需要使用日期控件时,同事选择了My97DatePicker,功能还是挺强大的,在使用过程中需要实现按日.按周.按月.按季度.按年选择时间的功能. 控件自身提供了按日.按月和按年选择的功能,但是选择周和选择季度没有,鉴于方便,在选择周时就使用了选择日的状态,选择了日后再计算这一天所属的周的起始和结束日期. 在选择季度时,使用了选择月份的状态,选择月份后计算所属的季度的开始和结束日期. 控件本身