JavaScript date and time picker suitable for mobile terminal_javascript skills

This is a date and time picker suitable for mobile device WEB applications. For the desktop version of the date picker, we generally use the datepicker plug-in of jQuery UI, while for the mobile version of the date picker, you can choose to use jQuery according to project needs. The mobiscroll.js plug-in provided by Mobile 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. The plug-in is based on jQuery and jQuery.mobile, so we first need to 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" /> 

Then place an input box in the body, which is an ordinary text input box. When the mouse clicks on the input box to get the cursor, mobiscroll will be triggered to pop up the date picker.

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

JavaScript
mobiscroll provides many options that can be set, including defining the pop-up panel display method, maximum date, minimum date, date format, end year, etc. 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', //日期 
 theme: 'sense-ui', //皮肤样式 
 display: 'modal', //显示方式 
 mode: 'scroller', //日期选择模式 
 dateFormat: 'yy-mm-dd', // 日期格式 
 setText: '确定', //确认按钮名称 
 cancelText: '取消',//取消按钮名籍我 
 dateOrder: 'yymmdd', //面板中日期排列格式 
 dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 
 hourText: '时',minuteText: "分",ampmText:"上午/下午", 
 endYear:2020 //结束年份 
 }; 
 $("#date").mobiscroll().date(opt); 
}); 

If you only select time, you can write like this:

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

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

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

Source code download: Javascript date and time picker suitable for mobile terminals

A simple and elegant JavaScript date and time picker suitable for mobile terminals has been created. I hope you like it.