jquery Mobile End Date (Datedropper) and Time (Timedropper) selector attached source download _jquery

We often apply it to date and time selectors, the DatePicker () of the jquery UI that we used most before, so today I'm going to introduce you to a very interesting date and time selector, It is divided into date selector datedropper and time selector timedropper, which are especially suitable for applications on the mobile end.

Online Demo Source Download

Date selector Datedropper

Very simple to use, three steps,

1, the introduction of relevant JS and CSS files. Note that Datedropper and Timedropper are all jquery based plug-ins, so you also need to introduce jquery library files.

<script src= "Jquery.js" ></script> 
<script src= "Datedropper.js" ></script> 

2, decorate the body in HTML.

3, call Datedropper

<script> 
$ ("#pickdate"). Datedropper (); 

Then, you can configure some options appropriately as needed. Datedropper provides the following basic option settings:

Animate: Displays animation effects, when set to true, the date in the selector panel is animated to scroll to the current date, and the default is true.

Init_animation: Click on the pop-up panel animation effect, there are Fadein (default), Bounce, dropdown three effects.

Format: Formatting date, I have changed the default format to y-m-d.

Lang: Language, I have translated the plugin default month and week into Chinese language.

Maxyear: Maximum year, default current year.

Minyear: Minimum year, default 1970.

Yearsrange: Year range, default 10 years.

Datedropper also provides settings for the skin style.

Time Picker Timedropper

As with the date selector, it's easy to use.

1, the introduction of JS and CSS files.

<script src= "Jquery.js" ></script> 
<script src= "Timedropper.js" ></script> 

2, decorate the body in HTML.

3, call Timedropper

<script> 
$ ("#picktime"). Timedropper (); 

Timedropper provides the following basic option settings:

Meridians: Whether 12-hour system, the default is 12-hour system, set to false 24-hour system.

Format: Formatted, hh:mm as 02:12.

Init_animation: Animated form, FadeIn (default), DropDown.

Setcurrenttime: The current time is set automatically.

Timedropper also provides settings for the skin style.

jquery Mobile End Date (Datedropper) and Time (Timedropper) selector content to introduce so many, interested friends can view the effect demo, download the source Oh!