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