Javascript is applicable to the date and time picker and javascript picker on the Mobile End.

Javascript is applicable to the date and time picker and javascript picker on the Mobile End.

This is a date and time picker suitable for mobile device WEB applications. In the desktop version, we generally use the datepicker plug-in of jQuery UI, the Mobile phone version's Date Picker can select the mobiscroll that works with jQuery Mobile based on project requirements. js plug-in, which provides a friendly Date and Time Selection operation interface, and is easy to configure and use.

HTML
First, we load the relevant plug-ins and style files. This plug-in is based on jQuery and jQuery. mobile. Therefore, we need to first load these two library files, and then load the mobiscroll. js plug-in and related CSS files.

<script src="js/jquery.min.js"></script> <script src="js/jquery.mobile-1.3.0.min.js"></script> <script src="js/mobiscroll.js" type="text/javascript"></script> <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> 

Next, place the input box in the body. This is a common text input box. When you click the input box to obtain the cursor, The mobiscroll pop-up date picker is triggered.

<input id="date" name="date" /> 

JavaScript
Mobiscroll provides many options, including defining the display mode, maximum date, minimum date, date format, and end year of the pop-up panel. You can also localize the plug-in, including setting Chinese buttons and instructions. The call is also very simple. The following is the sample code:

$ (Function () {var opt = {preset: 'date', // date theme: 'sense-Ui', // skin style display: 'modal ', // display mode: 'scroler', // Date selection mode dateFormat: 'yy-mm-dd', // Date Format setText: 'OK ', // confirm the button name cancelText: 'cancel', // cancel the button name from my dateOrder: 'yymmdd', // The date arrangement format in the panel: dayText: 'day', monthText: 'month', yearText: 'Year', // specifies the hour, minuteText: "Minute", ampmText: "morning/afternoon", endYear: 2020 // End Year}; $ ("# date "). mobiscroll (). date (opt );});

If you only select time, you can write as follows:

$("#time").mobiscroll().time(opt); 

To display the date and time on the panel, call:

$("#datetime").mobiscroll().datetime(opt); 

Source code download: javascript is suitable for Date and Time picker on mobile terminals

A simple and generous javascript is suitable for the date and time picker on the mobile end. I hope you will like it.