easyui-datebox设置只能选择年月,设置当前月的第一天和最后一天

时间:2022-08-28 17:54:09

来源:https://www.cnblogs.com/xiaoxiao0314/p/7041731.html

1. 设置只能控件只能显示年月:search_date_monthreport为控件id,直接将以下代码复制到js中后替换id为你自己的id即可。

$(function () {
setDateToMonth('search_date_monthreport');
});
function setDateToMonth(id) {
var db1=document.getElementById(id);
var db = $(db1);
db.datebox({
onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层
span.trigger('click'); //触发click事件弹出月份层
//fix 1.3.x不选择日期点击其他地方隐藏在弹出日期框显示日期面板
if (p.find('div.calendar-menu').is(':hidden')) p.find('div.calendar-menu').show();
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];//得到年份
var month = parseInt($(this).attr('abbr'), 10); //月份,这里不需要+1
month = month < 10 ? '0' + month : month;
db.datebox('hidePanel')//隐藏日期对象
.datebox('setValue', year + '-' + month); //设置日期的值
});
}, 0);
yearIpt.unbind();//解绑年份输入框中任何事件
},
parser: function (s) {
if (!s) return new Date();
var arr = s.split('-');
return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
},
formatter: function (d) {
return d.getFullYear() + '-' + (d.getMonth() + 1);/*getMonth返回的是0开始的,忘记了。。已修正*/
}
});
var p = db.datebox('panel'), //日期选择对象
tds = false, //日期选择对象中月份
aToday = p.find('a.datebox-current'),
yearIpt = p.find('input.calendar-menu-year'),//年份输入框
//显示月份层的触发控件
span = aToday.length ? p.find('div.calendar-title span') ://1.3.x版本
p.find('span.calendar-text'); //1.4.x版本
if (aToday.length) {//1.3.x版本,取消Today按钮的click事件,重新绑定新事件设置日期框为今天,防止弹出日期选择面板 aToday.unbind('click').click(function () {
var now=new Date();
now = now < 10 ? '0' + now : now;
db.datebox('hidePanel').datebox('setValue', now.getFullYear() + '-' + (now.toString() + 1));
});
}
}; //设置默认时间,默认为当月
$(function (){
setDateToDateBox();
});

2. 附:字符串日期处理:

//格式化日期
function dateFormatHsbc(myDate) {
// alert(myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate());
year = myDate.getFullYear();
month = (myDate.getMonth()+1)>9?(myDate.getMonth()+1):("0"+(myDate.getMonth()+1));
day = myDate.getDate()>9?myDate.getDate():("0"+myDate.getDate());
var str = year+"-"+month+"-"+day;
return str;
}

  //给easyui控件设置值为当月的第一天和最后一天
  var date = $("#search_date_monthreport").datebox('getValue').replace(/-/g,"/");
  var myDate = new Date(Date.parse(date));
  year = myDate.getFullYear();
  month = myDate.getMonth();
  $("#search_sconsigedate").datebox('setValue',dateFormatHsbc(new Date(year,month,1)));
  $("#search_econsigedate").datebox('setValue',dateFormatHsbc(new Date(year,(month+1),0)));

3.附:ajax同步加载,未得到后台结果之前页面显示loading...,使页面无法重复操作

$.ajax({
url:"${path}/path1/method1",
type:'post',
data:{'ckDate':ckDate1},
//dataType:'json',
beforeSend:function(XMLHttpRequest){
$("#dg").datagrid("loading");
},
success:function(data1){
if("success" == data1){
$.messager.alert('My Title','操作成功!','info');
$("#dg").datagrid('reload');
}else{
$.messager.alert('My Title','操作失败!','error');
$("#dg").datagrid('reload');
}
},
error:function(data1){
$.messager.alert('My Title','操作失败!','error');
$("#dg").datagrid('reload');
}
});

easyui-datebox设置只能选择年月,设置当前月的第一天和最后一天的更多相关文章

  1. easyui datebox 扩展 只显示年月

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

  2. Python 学习笔记:根据输入年月获取该月的第一天和最后一天

    目的: 给定一个时间,比如:2020.02,要求返回所输入月份的第一天及最后一天,比如:('2020.02.01', '2020.02.29') 参考博客:https://blog.csdn.net/ ...

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

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

  4. easyui时间框只选择年月

    html: <input type="text" id="datetime" > js: <script type="text/ja ...

  5. Easyui控制combotree只能选择叶子节点

    $(function() { $('#tt').combotree({ url: 'getTree.do', onBeforeSelect: function(node) { if (!$(this) ...

  6. elementUI 日期时间选择器 只能选择当前及之后的时间

    日期时间选择器  只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...

  7. My97设置开始、结束 时间区间及输入框不能输入只能选择的方法

    时间区间开始: <input type="text" id = "first_time" name="first_time" valu ...

  8. easyui datebox 设置不可编辑

    easyui datebox不允许编辑可以输入 editable="false"<input class="easyui-datebox" editabl ...

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

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

随机推荐

  1. 003-常用的Meta标签写法和作用

    页面关键词<meta name="keywords" content="your,tags"/> 页面描述<meta name="d ...

  2. python socket 学习

    Python在网络通讯方面功能强大,今天学习一下Socket通讯的基本方式,分别是UDP通讯和TCP通讯. UDP通讯 upd 服务端 #!/usr/bin/env python # -*- codi ...

  3. java进程状态

    A thread state. A thread can be in one of the following states: NEWA thread that has not yet started ...

  4. POJ 3172 Scales &lpar;01背包暴力&rpar;

    题意:给定 n 个数,保证下一个数比上一个数和前一个数之和大,然后给定一个背包,问你最多放多少容积. 析:应该是很明显的01背包,但是可惜的是,数组开不出来,那就得考虑暴力,因为数不多,才几十而已,要 ...

  5. Jboss wildfly add JDBC driver

    Jboss wildfly  添加 JDBC driver 我这里使用的是 wildfly-8.0.0.Final 第一步: 首先在modules里面添加mysql的驱动包 例如:modules\sy ...

  6. dll signing issue

    1. Verify if a dll has been signed sn.exe -v module.dll Scenario: sometimes for security reasons, a ...

  7. CSS中display&colon;block的使用介绍

    在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...

  8. C&plus;&plus;调用C&num;之C&plus;&plus;DLL调用C&num; COM控件

    1. 新建项目 这里我们使用ATL,来接受C# COM控件向外发送的事件. 2. 初始化ATL #include "stdafx.h" CComModule _module; BO ...

  9. BZOJ 3993&colon; &lbrack;SDOI2015&rsqb;星际战争 &lbrack;二分答案 二分图&rsqb;

    3993: [SDOI2015]星际战争 题意:略 R1D2T1考了裸二分答案+二分图最大匹配... #include <iostream> #include <cstdio> ...

  10. python3 发生器 迭代器 内置函数 协程 哈哈我又回来啦

    唉 犯傻了,干了一件虽有一点点道理的事情,但是却完全没有效果,我是不是傻,浪费了这么多时间在一件不可能的事情上,果然效果比道理更重要... 被一些琐事耽搁几天,python的学习都给我停了,擦!不过一 ...