`
fenggege
  • 浏览: 5585 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

easyui datebox 只选择月份控件

阅读更多
第一份日志,就贴昨天解决的问题吧,查了 easyui 的 datebox api,没找到只选择月份的接口。

查了类似的,感觉他们的问题复杂化,所以自己在网上贴的,按自己的思路整了个简易版的。

思路:在选择日期的时候,正上方有个月份,一点击,会让你选择月份,所以,可以用代码模拟 click 触发选择日期的事件。然后再修修补补另外的 bug。

先贴 jsp 控件。
<input type="text" name="s_order_month" id="s_order_month"/>


然后是 js 代码。

var tds = false;
$("#s_order_month").datebox({
  onShowPanel:function(){
    var p = $('#s_order_month').datebox('panel');
    p.find('span.calendar-text').trigger('click');
    p.find(".datebox-button-a").eq(0).hide();
		
    var span = p.find('span.calendar-text');
    //屏蔽选择今天的按钮
    p.find('.calendar-text').hide();
    //输入框原本可填,会触发事件,屏蔽掉
    p.find('.calendar-menu-year').attr("readonly","readonly");
    if (!tds)//初始化只需要捆绑一次事件就够了
      setTimeout(function () {
        tds =p.find('div.calendar-menu-month-inner td');
        tds.click(function (e) {
          e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件
          var year = /\d{4}/.exec(span.html())[0]//得到年份
          month = parseInt($(this).attr('abbr'), 10); //月份
          $('#s_order_month').datebox('hidePanel').datebox('setValue', year + '-' + month + '-' + '01'); //设置日期的值
        });
     });
  },
  formatter: function (d) {//设置格式
    return d.getFullYear() + '-' + (d.getMonth()<9?'0'+(d.getMonth()+1):(d.getMonth()+1));
  }
});
分享到:
评论

相关推荐

    jquery easyui 周历 周选择下拉控件

    首先,jQuery EasyUI提供了一套完整的日期选择器(datebox)和日期时间选择器(datetimebox),但它们默认并不支持直接选择一周。为了满足周选择的需求,我们需要对原有的控件进行扩展和改造。这个"周历 周选择下拉...

    easyui 日期控件选择到月份

    easyui日期控件只选择到月份,保存记录一下。 &lt;input id="month" class="easyui-datetimebox" name="month" data-options="required:true,formatter:myformatter,parser:myParser" 160px" /&gt;

    给Easyui-Datebox设置隐藏或者不可用的解决方法

    最近我在做一个安全监测系统,选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码,功能上需要加一些样式。下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的...

    给easyui datebox扩展一个清空的实例

    Datebox 是 EasyUI 中用于输入日期的控件,它提供了日历面板供用户选择日期。 首先,我们要理解 `$.fn.datebox.defaults` 是 EasyUI Datebox 插件的默认配置对象,它包含了所有预设的属性和方法。我们可以通过修改...

    EasyUI修改DateBox和DateTimeBox的默认日期格式示例

    在 EasyUI 中,DateBox 和 DateTimeBox 是两个常用的日期选择控件,它们提供了方便的方式来输入和显示日期或日期时间信息。这两款控件在功能上非常相似,主要的区别在于 DateTimeBox 还包含了时间部分。 DateBox ...

    jQuery EasyUI中的日期控件DateBox修改方法

    总结来说,通过修改`$.fn.calendar.defaults`的属性和定义自定义的`formatter`和`parser`函数,你可以灵活地调整jQuery EasyUI中的DateBox控件以满足你的特定需求,包括语言、日期格式以及大小等。这使得DateBox成为...

    浅谈如何实现easyui的datebox格式化

    在前端开发中,EasyUI 是一款基于 jQuery 的 UI 插件库,它提供了一系列美观且易于使用的组件,其中包括 DateBox。DateBox 是一个用于输入日期的控件,它可以方便地展示和编辑日期。本文将深入探讨如何实现 EasyUI ...

    jQuery EasyUI API 中文文档 - DateBox日期框

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发人员提供了构建现代 Web 应用程序的各种控件,其中 DateBox 是 jQuery EasyUI 中用于处理日期输入的控件。DateBox 控件允许用户通过一个文本输入框来选择或...

    给easyui的datebox控件添加清空按钮的实现方法

    在本文中,我们将深入探讨如何在EasyUI的DateBox控件上添加一个清空按钮,以便用户能够方便地清除已选择的日期。EasyUI是一个基于jQuery的轻量级UI框架,提供了丰富的组件,如DateBox,用于显示和选择日期。在某些...

    easyui 各种控件的例子

    DateBox 是一个组合了文本框和日历的控件,方便用户选择日期。它支持多种日期格式和日期范围限制。通过示例,你可以了解如何配置日期选择器并获取用户选定的日期。 9. **分页(Pager)** Pager 控件通常与 ...

    Jquery EasyUI 日历Demo

    &lt;input type="text" class="easyui-datebox" placeholder="选择日期"&gt; ``` EasyUI 的日历组件默认支持日期选择,用户可以通过上下箭头或者直接输入日期进行选择。此外,我们还可以通过 JavaScript 代码进一步自定义...

    javascript的年月控件,有例子

    在这个案例中,我们将讨论如何使用EasyUI 1.2.2框架中的DateBox控件进行定制,将其转化为一个只显示年份和月份的选择器。EasyUI是一个基于jQuery的轻量级前端开发框架,它提供了一系列丰富的UI组件,简化了Web应用的...

    基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用

    日期输入控件用于选择日期,EasyUI提供了`datebox`组件: ```html &lt;input class="easyui-datebox" id="date" style="width:200px;"&gt; ``` 赋值和取值: ```javascript $("#date").datebox('setValue', '2022-01-01');...

    easyui 弹窗控件

    弹窗控件可以与EasyUI的其他组件,如表格(datagrid)、下拉框(combobox)、日期选择器(datebox)等无缝集成,实现更复杂的功能。 总的来说,EasyUI的弹窗控件提供了一种简单而强大的方式来创建交互式用户界面。...

    EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法

    在使用EasyUI框架进行Web应用开发时,可能会遇到在弹出对话框后,试图对控件进行赋值,但发现赋值操作并未生效或者控件显示为空的情况。本文将详细探讨这个问题的原因及其解决方法。 首先,我们要理解EasyUI的工作...

Global site tag (gtag.js) - Google Analytics