JavaScript is suitable for moving end date time picker _javascript tips

This is a date and time picker for mobile device Web applications, in the desktop version of the date picker we typically use the jquery UI DatePicker plug-in, while the mobile phone version of the date picker can be selected according to the project requirements and jquery Mobile with the Mobiscroll.js plug-in, which provides a friendly date and time selection operation interface, and easy to configure and use.

Html
First we load the relevant plug-ins and style files, which are based on jquery and Jquery.mobile, so we first need to load the two library files, and then load the mobiscroll.js plug-ins 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 "/>" 

Then place the input box in the body, which is an ordinary text input box that triggers the Mobiscroll pop-up date picker when the mouse clicks the input box to obtain the cursor.

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

Javascript
Mobiscroll offers a number of options to set up, including defining pop-up display, maximum date, minimum date, date format, end year, etc., or localizing plug-ins, including setting Chinese buttons, 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 
 Mode: ' Scroller ',//date selection mode 
 dateformat: ' Yy-mm-dd ',//date format 
 setText: ' OK ',///Confirm button name 
 canceltext: ' Cancel ',// Cancel button name I 
 dateorder: ' YYMMDD ',///panel date arrangement format 
 daytext: ' Day ', Monthtext: ' Month ', Yeartext: ' Year ',//panel 
 Hourtext: ' When ', Minutetext: "Minute", Ampmtext: "Morning/Afternoon", 
 endyear:2020//End year 
 }; 
 $ ("#date"). Mobiscroll (). Date (opt); 
}); 

If only the time is selected, you can write this:

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

If you want to display the date and time on the panel, this is called:

SOURCE download: JavaScript for mobile end of the date time picker

A simple and generous javascript for the mobile end of the date time picker is finished, I hope you like.