Jquery-ui-datepicker customization, Chinese-made, because the mobile phone layout beautiful source modification

Thanks for browsing, welcome to Exchange =. =

Company Web pages need to use Calendar control, think of Jquery-mobile, but CSS affects page layout, discard after use Jquery-ui-datepicker.

Words not much to say, into the topic:

1.jqueryui website customized download Jquery-ui.

Only take its core+datepicker only need 40kb, rejoice, because before want to use dialog function, find custom down more than 150 KB, too extravagant.

2. Code of Chinese

(function () {
$.datepicker.regional[' zh-cn ' = {
Cleartext: ' Clear ',
Clearstatus: ' Clear selected date ',
Closetext: ' Off ',
Closestatus: ' Do not change the current selection ',
Prevtext: ' < last month ',
Prevstatus: ' Show last month ',
Prevbigtext: ' << ',
Prevbigstatus: ' Show previous year ',
Nexttext: ' Next month > ',
Nextstatus: ' Show next month ',
Nextbigtext: ' >> ',
Nextbigstatus: ' Show next year ',
Currenttext: ' Today ',
Currentstatus: ' Show this month ',
MonthNames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December ',
Monthnamesshort: [' One ', ' two ', ' three ', ' four ', ' five ', ' six ', ' VII ', ' eight ', ' IX ', ' Ten ', ' 11 ', ' 12 '],
Monthstatus: ' Select Month ',
Yearstatus: ' Select Year ',
Weekheader: ' Week ',
Weekstatus: ' Week of the Year ',
DayNames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '],
Daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '],
Daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '],
Daystatus: ' Set DD to start one week ',
Datestatus: ' Select M-D, DD ',
DateFormat: ' Yy-mm-dd ',
Firstday:1,
Initstatus: ' Please select a date ',
Isrtl:false
};
JQuery (function ($) {
$.datepicker.setdefaults ($.datepicker.regional[' ZH-CN ');
});
})();

3.mobile adaptability modification before effect:

Post-Modification effects:

1) Modify CSS style
#ui-datepicker-div {
width:80%;

Table TD A.ui-state-default {
Text-align:center;
}
}
2) Modify Jquery-ui source code:

4. You need to use the time period in the project, then make the time period plug-in

Requirements: 1) Two text boxes by DatePicker entry start date and end date respectively, the linkage effect should meet the start date < end date

2) the start date will generally have a minimum time limit

3) In the future, you may need to restrict some days to use, you can use the Beforeshowday configuration item implementation, modify the plug-in when needed

Plugin code:

Page Call:

The code is on GitHub:

All day with others open source, we also open-source bar: Https://github.com/SoulRIver2015/jquery-plugins/tree/master/mobile/river/date-picker

Jquery-ui-datepicker customization, Chinese-made, because the mobile phone layout beautiful source modification