easyUI自带的时间插件日期选择、月份选择、时间选择的使用(转)
1.日期选择
只要将class设置成easyui-datebox就可以了,当然前提是已经应用了easyui的js
- <input type="text" class="easyui-datebox" id="datetime">
<input type="text" class="easyui-datebox" id="datetime">
2.时间选择
默认的时间选择是精确到年月日时分秒的,只要把class设置成easyui-datetimebox就可以实现
- <input type="text" id="datetime1" class="easyui-datetimebox">
<input type="text" id="datetime1" class="easyui-datetimebox">
- </pre><p>当然他的效果图是这样的:</p><p> <img src="https://img-blog.csdn.net/20160328112415185?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>所以如果需要自定义他的显示格式的话我们需要自己重写他的format方法:(注意下面红色部分需要加进去)</p><p><pre name="code" class="html"><input type="text" id="datetime" <span style="color:#ff0000;">data-options="<strong>formatter:ww3,parser:w3</strong>"</span> class="easyui-datetimebox">
</pre><p>当然他的效果图是这样的:</p><p> <img src="https://img-blog.csdn.net/20160328112415185?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>所以如果需要自定义他的显示格式的话我们需要自己重写他的format方法:(注意下面红色部分需要加进去)</p><p><pre name="code" class="html"><input type="text" id="datetime" <span style="color:#ff0000;">data-options="<strong>formatter:ww3,parser:w3</strong>"</span> class="easyui-datetimebox">
- <script type="text/javascript">
- function ww3(date){
- var y = date.getFullYear();
- var m = date.getMonth()+1;
- var d = date.getDate();
- var h = date.getHours();
- var str = y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+':'+(h<10?('0'+h):h);
- return str;
- }
- function w3(s){
- if (!s) return new Date();
- var y = s.substring(0,4);
- var m =s.substring(5,7);
- var d = s.substring(8,10);
- var h = s.substring(11,14);
- var min = s.substring(15,17);
- var sec = s.substring(18,20);
- if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min) && !isNaN(sec)){
- return new Date(y,m-1,d,h,min,sec);
- } else {
- return new Date();
- }
- }
- </script>
<script type="text/javascript">function ww3(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); var h = date.getHours(); var str = y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+':'+(h<10?('0'+h):h); return str; } function w3(s){ if (!s) return new Date(); var y = s.substring(0,4); var m =s.substring(5,7); var d = s.substring(8,10); var h = s.substring(11,14); var min = s.substring(15,17); var sec = s.substring(18,20); if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min) && !isNaN(sec)){ return new Date(y,m-1,d,h,min,sec); } else { return new Date(); } } </script>
上面代码是将显示格式变成:yyyy-mm-dd HH.也可以根据自己的需要修改上面的代码,比如你要精确到分或者秒,都可以的。下面是效果图:
3.月份选择
easyui自带的是没有月份选择的panel的,所以我们需要修改一下源代码:
- <input type="text" id="datetime" >
<input type="text" id="datetime" >
然后在js中:
- <script type="text/javascript">
- $(function() {
- $('#datetime1').datebox({
- onShowPanel : function() {// 显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层
- span.trigger('click'); // 触发click事件弹出月份层
- 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) + 1; // 月份
- $('#datetime1').datebox('hidePanel')// 隐藏日期对象
- .datebox('setValue', year + '-' + month); // 设置日期的值
- });
- }, 0);
- },
- parser : function(s) {// 配置parser,返回选择的日期
- 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) {
- var month = d.getMonth();
- if(month<=10){
- month = "0"+month;
- }
- if (d.getMonth() == 0) {
- return d.getFullYear()-1 + '-' + 12;
- } else {
- return d.getFullYear() + '-' + month;
- }
- }// 配置formatter,只返回年月
- });
- var p = $('#datetime1').datebox('panel'), // 日期选择对象
- tds = false, // 日期选择对象中月份
- span = p.find('span.calendar-text'); // 显示月份层的触发控件
- });
- </script>
<script type="text/javascript">
$(function() { $('#datetime1').datebox({ onShowPanel : function() {// 显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); // 触发click事件弹出月份层 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) + 1; // 月份 $('#datetime1').datebox('hidePanel')// 隐藏日期对象 .datebox('setValue', year + '-' + month); // 设置日期的值 }); }, 0); }, parser : function(s) {// 配置parser,返回选择的日期 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) { var month = d.getMonth();if(month<=10){month = "0"+month;}if (d.getMonth() == 0) { return d.getFullYear()-1 + '-' + 12; } else { return d.getFullYear() + '-' + month; } }// 配置formatter,只返回年月 }); var p = $('#datetime1').datebox('panel'), // 日期选择对象 tds = false, // 日期选择对象中月份 span = p.find('span.calendar-text'); // 显示月份层的触发控件 }); </script>
最后的效果如下图:
easyUI自带的时间插件日期选择、月份选择、时间选择的使用(转)相关推荐
- MySQL日期时间带T_Mysql 时间和日期函数
对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描述见7.3.6 日期和时间类型. 这里是一个使用日期函数的例子.下面的查询选择了所有记录,其date_col的值是在最后30天以内: my ...
- layui 日期重置_日期时间插件--日期时间组件文档 - layui.laydate
样式: /*这里我引的是我本地的js*/ layui.use('laydate', function () { var laydate = layui.laydate; var start = { / ...
- daterangepicker时间插件控制起始和截至日期的选择范围
一.时间插件使用方式 1.daterangepicker.js依赖于 Bootstrap . jQuery . Moment.js 这三个库.页面中必需包含的脚本和样式文件有 <!-- 需要引用 ...
- jQuery DateTimePicker 日期和时间插件
jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(二)
前言 JavaScript 中的日期和时间 [Ext JS 4] 实战之 带week(星期)的日期选择控件(一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Dat ...
- extjs 月份选择控件_Ext JS 4实现带week(星期)的日期选择控件(实战二)
前言 JavaScript 中的日期和时间 Ext JS 4实现带week(星期)的日期选择控件(实战一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Date 对 ...
- Layui时间插件laydate只选择时分
一.说明 二.分析 三.效果 四.代码 一.说明 需要一个只选择时分的控件,首先想到的是laydate,然后看一下控件的类型 type 可选值 名称 用途 year 年选择器 只提供年列表选择 mon ...
- laydate日期时间插件年选择器和年月选择器实现不用点击确定
laydate日期时间插件只有是日期的时候才不用点确定,年选择器和年月选择器的时候必须点确定才能选中.用起来很不方便,这里在不改变源代码的情况实现不用点击确定. 1.年选择器实现 <input ...
- java前端的日期插件_几个前端时间插件总结
几个前端时间插件总结 总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
最新文章
- 顺风详解Nginx系列—Ngx中的变量
- discuz!x2.5登录管理面板
- centos安装Ambari
- org.springframework.web.multipart.MultipartException: The current request is not a multipart request
- docker 本地部署 mysql_Docker 部署Mysql 服务和Redis 服务的方法
- c语言结构体 单科成绩排序,【查错】怎样让结构体其他信息(姓名)对应关键值(成绩)排序输出...
- 校招刷题---java选择题笔记05
- Bailian2943 小白鼠排队【排序】
- Thinkpad E431 解决无线网卡无法开启
- 周鸿祎麻辣点评中国互联网公司
- 2019年前端年度工作总结
- 【渝粤题库】陕西师范大学200031 中国现代文学 作业
- 计算机操作系统(慕课版)各章思维导图
- javascript 删除节点
- 微信发布小游戏扶持政策;滴滴上线“滴水贷”;美团将与百度合作无人驾驶送外卖丨价值早报...
- 拼多多“真香”补贴之变
- k8s裸机安装Service使用LoadBalancer
- 微信小程序幻灯片效果实现
- kswapd和pdflush
- 服务器与客户端的TCP连接
热门文章
- 玩冒险岛java卸载_如何删除冒险岛安装了,现在不想玩
- byte用json存 c++_玩转golang——JSON高性能自动字段名
- php python 混合_php-python
- matlab 安装(2018a图解版)
- 数据结构c java_Java - 数据结构
- php 添加样式,PHP实现可自定义样式的分页类
- Spring mvc 参数类型转换
- pytorch nn.CrossEntropyLoss
- pytorch Tensor.backward
- WHAT IS PYTORCH