Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >easyUI 日期控件修改...

easyUI 日期控件修改...

作者头像
微风-- 轻许--
发布于 2022-04-13 00:47:14
发布于 2022-04-13 00:47:14
1.7K00
代码可运行
举报
文章被收录于专栏:java 微风java 微风
运行总次数:0
代码可运行

个人觉得easyUI挺好用的。

它的中文文档地址: http://www.zi-han.net/case/easyui/

日期本来效果是这样的:

改为中式的,方法如下:

首先是月份的,找到下面的代码:

(这段代码在 jquery.easyui.min.js 中,Ctrl+F 查找"Jan",一下就找到了。)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1 $.fn.calendar.parseOptions=function(_454){
2 var t=$(_454);
3 return $.extend({},$.parser.parseOptions(_454,["width","height",{firstDay:"number",fit:"boolean",border:"boolean"}]));
4 };
5 $.fn.calendar.defaults={width:180,height:180,fit:false,border:true,firstDay:0,weeks:["S","M","T","W","T","F","S"],months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],year:new Date().getFullYear(),month:new Date().getMonth()+1,current:new Date(),onSelect:function(date){
6 }};
7 })(jQuery);

改成下面的对应的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1 $.fn.calendar.parseOptions=function(_454){
2 var t=$(_454);
3 return $.extend({},$.parser.parseOptions(_454,["width","height",{firstDay:"number",fit:"boolean",border:"boolean"}]));
4 };
5 $.fn.calendar.defaults={width:180,height:180,fit:false,border:true,firstDay:0,weeks:["一", "二", "三", "四", "五", "六", "日"], months:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], year:new Date().getFullYear(),month:new Date().getMonth()+1,current:new Date(),onSelect:function(date){
6 }};
7 })(jQuery);

today、close 改为 :今天、关闭。 方法同上。

格式修改,默认的是月/日/年的格式,如果换成的2016-07-28这样的,官方也给出了代码,如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Basic DateBox - jQuery EasyUI Demo</title>
 6 <link rel="stylesheet" type="text/css" href="css/easyui.css">
 7 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
 8 <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
 9 </head>
10 <body>
11 <div class="date">
12 <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
13 </div>
14 </body>
15 <script type="text/javascript">
16 function myformatter(date){
17 var y = date.getFullYear();
18 var m = date.getMonth()+1;
19 var d = date.getDate();
20 return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
21 }
22 function myparser(s){
23 if (!s) return new Date();
24 var ss = (s.split('-'));
25 var y = parseInt(ss[0],10);
26 var m = parseInt(ss[1],10);
27 var d = parseInt(ss[2],10);
28 if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
29 return new Date(y,m-1,d);
30 }else{
31 return new Date();
32 }
33 }
34 </script>
35 </html>

就是在自己的代码里给日期标签 加上属性:data-options="formatter:myformatter,parser:myparser" 并且如图写上那两个 function... 就行了。

现在效果:

其实我还想改它的基调色彩,还在找改法。 谁知道怎么改,请告诉我。

在管网上似乎看到过我想要的那个效果,基调是gray色调的。

参考:http://www.cnblogs.com/asqq/archive/2013/05/27/3195001.html

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/07/28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
EasyUI日期选择框
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="js/easyui.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> </head> <body> 开始日
似水的流年
2018/01/18
2.4K0
EasyUI日期选择框
探索 JQuery EasyUI:构建简单易用的前端页面
当我们站在网页开发的浩瀚世界中,眼花缭乱的选择让我们难以抉择。而就在这纷繁复杂的技术海洋中,JQuery EasyUI 如一位指路明灯,为我们提供了一条清晰的航线。
繁依Fanyi
2024/04/25
7880
easyui 日期控件清空值
近期用了Easyui的日期控件datebox,项目中要将选中值清空,于是就研究了一下。
全栈程序员站长
2022/07/07
2.2K0
easyui 日期控件清空值
利用easyui实现增删改查:easyui样式的日期的显示
如何实现以上的样式呢? <%--datebox日期框--%> <input id="dd" type="text" class="easyui-datebox" data-options="editable:false,currentText:'今天',closeText:'关闭'"> 以上弄完之后,我们选择了一个日期,那么在框里面的时间就是这样的 但是我想要修改时间的格式,后台要的格式不是这样的,需要自己修改,咋修改 使用 解释 formatter : 这个
一写代码就开心
2020/11/19
7670
利用easyui实现增删改查:easyui样式的日期的显示
MVC5+EasyUI+EF6增删改查以及登录登出的演示
创建StudentController、 及Index视图, 在Index上按F5运行
明志德道
2023/10/21
2760
MVC5+EasyUI+EF6增删改查以及登录登出的演示
EasyUI学习笔记
所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如,对话框属性定义在jQuery.fn.dialog.defaults里面。 jQuery.fn.panel.defaults可以给组件添加默认的配置项
全栈程序员站长
2022/06/30
10.5K0
EasyUI学习笔记
最新jquery+easyui_api培训文档
1 Accordion(可折叠标签) 1.1 实例 1.1.1 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text
用户1112962
2018/07/03
3.3K0
ssm之八 时间日期格式转换取值
点击编辑,emp/getEmp/${emp.empno},首先要获得当前编号的员工数据,相关dao层等代码,去系列教程前几章查看,本处不再赘述。
张哥编程
2024/12/17
770
ssm之八 时间日期格式转换取值
jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)
本文主要介绍了EasyUI中的一些组件和模块,包括表格、日历、表单、对话框、颜色选择器等。通过这些组件和模块,可以快速搭建出各种类型的应用程序。同时,还介绍了一些EasyUI中的实用工具,包括easyui-lang-zh、easyui-validate、easyui-component-extend等。这些工具可以帮助开发者更加灵活地开发和管理系统。
别先生
2018/01/02
4.4K1
jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)
easyUI的常用API[通俗易懂]
大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说easyUI的常用API[通俗易懂],希望能够帮助大家进步!!!
Java架构师必看
2022/07/25
2.6K0
EasyUI之Tabs基本用法 原
(adsbygoogle = window.adsbygoogle || []).push({});
tianyawhl
2019/04/04
2.2K0
easyui+nodejs+sqlserver增删改查实现
用到的模块或者技术: Express: http://www.expressjs.com.cn/4x/api.html#express Easyui: http://www.jeasyui.com
用户1141560
2017/12/26
3.1K0
easyui+nodejs+sqlserver增删改查实现
golang学习之beego框架配合easyui实现增删改查及图片上传
demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DOCTYPE html> <html lang="en"> <head>
用户1141560
2017/12/26
1.9K0
golang学习之beego框架配合easyui实现增删改查及图片上传
jQuery EasyUI 详解
easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。
老马
2018/07/31
9.3K0
jQuery EasyUI 详解
使用SSM+easyui做个简单的增删改查
使用SSM+easyui做个简单的增删改查
Java架构师必看
2021/04/13
1.9K0
jeDate日期控件在项目中实际应用
需求: 1:可提供日期不超过当前日期或者(验证选中日期是否超过今天) 2:日期验证 3:input表格里面获取当前系统默认日期 4:选着日期点击选中后点确定按钮才关闭 5:验证结束日期大于开始日期
王小婷
2019/09/20
6720
EasyUI表单验证
EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性。
张哥编程
2024/12/17
2440
EasyUI表单验证
jquery easyui datagrid 保存/加载自定义配置每列属性
直接附上源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Format DataGrid Columns - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="css/material/easyui.css"> <script type="text/javascript" src="js/jquery.mi
阿新
2019/10/06
1.3K0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(2)-easyui构建前端页面框架[附源码]
前言 为了符合后面更新后的重构系统,本文于2016-10-31日修正一些截图,文字 我们有了一系列的解决方案,我们将动手搭建新系统吧。 后台系统没有多大的UI视觉,这次我们采用的是标准的左右分栏,左边是系统菜单,右边是一个以tabs页组成的页面集合,每一个tab都可以单独刷新和关闭 开发工具 Visual Studio 2012(以上) 开始搭建 打开我们熟悉的VS创建一个空解决方案。我起了个名字叫Apps,类库命名空间将与Apps开头 如Apps.BLL,Apps.Web等命名 1. 新建MVC5.
用户1149182
2018/01/16
2.3K0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(2)-easyui构建前端页面框架[附源码]
jQuery EasyUI+ashx实现数据库的CIUD操作
对上一个小项目做一个回顾总结,涉及到了jQuery EasyUI+ashx实现数据库的CIUD操作,和大家分享一下。基本思路是用easyui做前端,ashx做后端,中间使用json格式交换数据,其中json主要使用Newtonsoft.Json来序列化和反序列化,为简单起见,后端没有分层,数据都是靠拼接sql,使用一个简单封装的DBHelper来时间数据库的操作。
全栈程序员站长
2022/11/15
1K0
jQuery EasyUI+ashx实现数据库的CIUD操作
相关推荐
EasyUI日期选择框
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验