感谢浏览,欢迎交流=。=


公司微信网页需要使用日历控件,想到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

jquery-ui-datepicker定制化,汉化,因手机布局美观化源码修改的更多相关文章

  1. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  2. jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断

    jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...

  3. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  4. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  5. 坑爹的jquery ui datepicker

    1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天 期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...

  6. [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4

    本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...

  7. jQuery UI datepicker z-index默认为1 怎么处理

    最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-inde ...

  8. jQuery LigerUI 最新版压缩包(含chm帮助文档、源码、donet权限示例)

    jQuery LigerUI 最新版压缩包 http://download.csdn.net/download/heyin12345/4680593 jQuery LigerUI 最新版压缩包(含ch ...

  9. jquery UI datepicker汉化

    由于近期工作需要,jquery ui的datepicker需要汉化,特此把代码贴在这$(function() { $.datepicker.regional["zh-CN"] = ...

随机推荐

  1. post方法

    CookieContainer cookie = new CookieContainer(); private string HttpPost(string Url, string postDataS ...

  2. 12306火车票订票网站的一个Bug

    国庆节后回上海,大家都知道的火车票灰常火爆,卧铺票一票难求.登录http://www.12306.cn 铁路公司售票网站发现北京—>上海的卧铺已经售完,考虑到北京—>蚌埠这段还是在白天及晚 ...

  3. fckeditor的用法

    1.下载解压文件 2.将解压后的文件放入webroot下 3.将js引入要使用fckeditor的页面 4.用ckeditor替换textarea <@e.textarea id="t ...

  4. T-SQL语句查看作业等信息

    因服务器需要迁移,需要将现有JOB迁移至新服务器,待服务器调整完毕,则重新迁移到原服务器,所以在做迁移之前希望将现有JOB进行备份,不至于乱了执行时间.1.查看所有作业列表USE master SEL ...

  5. java request判断微信客户端访问

    微信客户端访问时候user-agent信息如下: Mozilla/5.0 (Linux; Android 5.0.1; M040 Build/LRX22C) AppleWebKit/537.36 (K ...

  6. CSS- 控制图片显示指定大小 并超过大小自动缩小

    有时候利用css比较方便控制网页html中img图片的显示大小.这样也省得自己一个一个去定义. img,a img{ border:; margin:; padding:; max-width:600 ...

  7. innobackupex自动备份脚本(增量备份,自动压缩)

    #!/bin/bash #日期转为天数 function date2days { echo "$*" | awk '{ z=-$)/); y=$+-z; m=$+*z-; j=*m ...

  8. 使用sqlite3 有关tableview删除cell的问题

    在root页面,想要删除tableviewcell,是有一定顺序的 首先要删除 数据库sqlite3 中的数据,然后删除数组中的数据,最后删除cell 一般我们知道,删除cell要在删除数组数据之后, ...

  9. 你知道用AngularJs怎么定义指令吗?

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  10. Numeral.js 是一个用于格式化和数字四则运算的js 库

    1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包含中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral. ...