An analysis of the DatePicker component of jquery UI

Today, you plan to add a calendar to your blog to make it easier for users to see dates. Google took a lap and finally decided to use the DatePicker widget of the jquery UI. There are three reasons: DatePicker the use of a simple configuration, a few lines of code to get a simple calendar, with detailed documentation and reference materials, extensibility, and support of the custom interface.

The first is the introduction of dependent files. You can use online resources, or you can download them locally via bower. I downloaded it to a public folder, so at the beginning of the code, add the tag:

    <Linkrel= "stylesheet"href= "Public/lib/jquery-ui/themes/flick/jquery-ui.css">Themes folder has 25 sub-folders, the introduction of jquery-ui.css under each folder, you can use different calendar background style
    <Scriptsrc= "Public/lib/jquery/dist/jquery.js"></Script>    <Scriptsrc= "Public/lib/jquery-ui/jquery-ui.min.js"></Script>    <Scriptsrc= "Public/lib/jquery-ui/ui/i18n/datepicker-zh-cn.js"></Script> //localization, the introduction of i18n under the various files, you can make the calendar display as the appropriate language, by default is English 

Easy to get started, as an example of an embedded calendar:

<class= "DatePicker"></div>
<script>
$ (". DatePicker"). DatePicker ();
</script>

You can get a simple flick-style calendar, and the contents of the calendar will be displayed in Chinese instead of English. There are several more commonly used configurations that we use to complete a more complete calendar:

<Divclass= "DatePicker"></Div><Script>$(". DatePicker"). DatePicker ({changeyear:true,//whether to display an optional year in the form of a drop-down menu on the calendar, allowing users to jump changemonth between different years:true,//whether to display the optional month showbuttonpanel on the calendar as a drop-down menu:true //displays a "Today" button for selecting the day date });</Script>

As follows:

An analysis of the DatePicker component of jquery UI