jquery-ui-datepicker定制化,汉化,因手机布局美观化源码修改

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



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

时间: 2024-08-19 10:34:59

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

Adding a Timepicker to jQuery UI Datepicker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

jquery UI datepicker 添加时间的选择。

仅有日期的原始效果图: 支持时间选择的目标效果图: 第一步:引入几个重要的jquery UI 文件,其中zh-CN.js是支持中文的 <script href="Js/Jquery/jquery.js"/><script/> <script href="Js/jqueryui/jquery.ui.js"/><script/> <script href="Js/jqueryui/i18n/zh-CN.js

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

最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-index比1大的标签.我在网上搜了一下,发现有好多人都遇到了同样的问题.解决方法大体上有两种. 下面我结合demo,一起看一下. 我们先按照jQuery UI datepicker API 文档(地址我就不写了,应该能搜得到)写一个基本的demo,body中的代码如下: 1 <body> 2 3 <

jQuery UI Datepicker使用介绍

本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨论jQuery UI Datepicker的使用,和中文本地化配置. 1.jQuery UI介绍 jQuery UI是一套基于jQuery控件和动画效果Javascript类库.可以用来构建交互式的互联网应用程序.最新版本1.10.4.基于jQuery 1.6+jQuery UI官方网站 2.jQu

[转]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-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4 This tutorial will teach you the basics of how

JQuery UI datepicker 使用方法

官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/ DatePicker基本使用方法: 代码如下: <!DOCTYPE html> <html> <head> <link href="http://ajax.g

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

jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="adv_start_time" id="adv_start_time" class="txt date"> <script type="text/javascript" src="xxxx路径/jquery.ui.js&q

JQuery UI datepicker 使用方法(转)

官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/ DatePicker基本使用方法: 代码如下: <!DOCTYPE html> <html> <head> <link href="http://ajax.g

58红包APP系统定制搭建,58红包APP系统开发现成源码,58红包APP系统搭建

58红包APP系统搭建找[蔡经理 136-1236-3414 微|电]58红包APP系统定制搭建,58红包APP系统开发现成源码,58红包APP系统开发多少钱,58红包APP系统专业开发: 提示:专业软件开发公司,非运营方 58红包扫雷区: 10元5包奖励:小顺(1.88)小豹子(2.66)5.20(9.99)13.14(13.14) 20元5包奖励:小顺(1.88)小豹子(2.66)大顺(3.33)大豹(6.66)5.20(9.99)13.14(13.14) 50元6包奖励:小顺(1.88)小