现在位置首页 / 前端开发 /正文

jquery-ui-datepicker修改美化适应手机端选择

作者: IT小兵 | 2015年3月10日| 热度:℃ | 评论: |参与:

 

公司微信网页需要使用日历控件,想到jquery-mobile,但是css影响页面布局,放弃后使用jquery-ui-datepicker。

话不多说,进入正题:

1.jqueryui官网定制化下载jquery-ui。

只取其core+datepicker 则仅需40kb,欣喜一番,因为之前想用dialog功能,发现定制下来150多kb,太奢侈了。

2.汉化代码

(function () {
   $.datepicker.regional['zh-CN'] = {
       clearText: '清除',
clearStatus: '清除已选日期',
closeText: '关闭',
closeStatus: '不改变当前选择',
prevText: '<上月',
prevStatus: '显示上月',
prevBigText: '<<',
       prevBigStatus: '显示上一年',
nextText: '下月>',
nextStatus: '显示下月',
nextBigText: '>>',
       nextBigStatus: '显示下一年',
currentText: '今天',
currentStatus: '显示本月',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
monthStatus: '选择月份',
yearStatus: '选择年份',
weekHeader: '周',
weekStatus: '年内周次',
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
dayStatus: '设置 DD 为一周起始',
dateStatus: '选择 m月 d日, DD',
       dateFormat: 'yy-mm-dd',
       firstDay: 1,
       initStatus: '请选择日期',
isRTL: false
   };
   jQuery(function ($) {
       $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
   });
})();

3.mobile适应性改造

修改前效果:

修改后效果:

1)修改css样式
#ui-datepicker-div {
  width: 80%;

  table td a.ui-state-default {
    text-align: center;
  }
}
2)修改jquery-ui源码:如图

4.项目中需要多次使用时间段,于是制作时间段插件

需求:1)两个文本框分别通过datepicker录入开始日期和结束日期,联动效果需满足开始日期<结束日期

     2)开始日期一般会有最小时间限制

     3)将来可能需要限制某些天可以使用,可以使用beforeshowday配置项实现,需要时修改插件

插件代码:

页面调用:

代码在GitHub上:

整天用人家开源的,咱也开源吧:https://github.com/SoulRIver2015/jquery-plugins/tree/master/mobile/river/date-picker

 


参考:http://www.cnblogs.com/soulriver/archive/2015/03/08/4321273.html


[js获取日期、前天、昨天、今天、明天、后天代码实例]

[Jquery/Javascript 日期时间选择控件-时间函数/延迟执行/定时执行等时间相关总结]

[Javacript对Date日期的格式化及转换]

[Jquery/Javascript 日期时间选择控件-时间函数/延迟执行/定时执行等时间相关总结]

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询