jQuery mobile date (datedropper) and time (timedropper) selector with source code download_jquery

We often apply date and time pickers. The one we used most before was the datepicker() of jQuery UI. So today I will introduce to you a very interesting date and time picker, which is divided into date pickers. datedropper and timepicker timedropper, both of them are especially suitable for mobile applications.

Online Demonstration Source code download

datedropper

Using is very simple, in three steps,

1. Introduce relevant js and css files. Note that datedropper and timedropper are both jQuery-based plug-ins, so jQuery library files must also be introduced.

<script src="jquery.js"></script> 
<script src="datedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="datedropper.css"> 

2. Arrange the html in the body.

<input type="text" id="pickdate" /> 

3. Call datedropper

<script> 
$("#pickdate").dateDropper(); 
</script> 

Then, you can configure some options appropriately according to your needs. datedropper provides the following basic option settings:

animate: Display animation effect. When set to true, the date in the selector panel will animate and scroll to the current date. The default is true.

init_animation: The animation effect when clicking on the pop-up panel, including fadeIn (default), bounce, and dropDown.

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

lang: Language, I have translated the default month and week of the plug-in into Chinese language.

maxYear: maximum year, defaults to the current year.

minYear: minimum year, default 1970.

yearsRange: year range, default is 10 years.

dateDropper also provides skin style settings.

timedropper timedropper

Like the date picker, it is easy to use.

1. Import js and css files.

<script src="jquery.js"></script> 
<script src="timedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="timedropper.css"> 

2. Arrange the html in the body.

<input type="text" id="picktime" /> 

3. Call timedropper

<script> 
$("#picktime").timeDropper(); 
</script> 

timeDropper provides the following basic option settings:

meridians: Whether to use 12-hour format. The default is 12-hour format. If set to false, it will be 24-hour format.

format: format, HH:mm such as 02:12.

init_animation: animation form, fadeIn (default), dropDown.

setCurrentTime: Automatically set the current time.

timeDropper also provides skin style settings.

This is all about the jQuery mobile date (datedropper) and time (timedropper) selectors. Interested friends can view the effect demonstration and download the source code!