How to Use the date plug-in Mobiscroll in jQueryMobile development _ jquery

This article describes how to use the date plug-in Mobiscroll in jQueryMobile development. If you need it, refer to the recent Mobile development and use jQuery Mobile, mobile plug-ins are less powerful than Web plug-ins, with fewer choices and some need to be encapsulated by themselves.

Date plug-in JQM also provides built-in, but the style is not good looking, had to Baidu, Google, found two jquery-mobile-datebox and mobiscroll-2.3

JqueryMobileDatebox is not performing well on the board and has a point card in performance.

The performance of mobiscroll is better than that of the former, the effect is more concise, and the movement is smoother.

Put together for comparison

Which one do you think looks better?

Anyway, I think the effects of mobiscroll are better. Let's take a look at how this guy works.

Step 1: Go to the official website to download a compressed package. You must register the package before downloading it. During the download, you can select the frame and skin style you are using.

Assume that you have successfully registered and downloaded

Step 2: Create an HTML5 file, introduce necessary files such as jquery. js and jquerymobile. js, and write the following code into your file:

 
     Date of birth:      

We can initialize the date control as follows:

$('input:jqmData(role="datebox")').mobiscroll().date();

Preview It. Can it be used! This interface is only in English. It is a bit uncomfortable for Chinese people. The Chinese Language Pack is not provided on the official website, but it does not matter. The APIs on the official website are still good, we can set some common attributes to conform to the regular date format.

// Initialization date control var opt = {preset: 'date', // date theme: 'jqm ', // skin style display: 'modal', // display mode: 'clickpick', // Date selection mode dateFormat: 'yy-mm-dd', // Date Format setText: 'OK', // confirm the button name cancelText: 'cancel ', // cancel the button name. My dateOrder: 'yymmdd', // The date arrangement format in the panel: dayText: 'day', monthText: 'month', yearText: 'Year ', // In the panel, the year, month, and day text endYear: 2020 // end year };$ ('input: jqmData (role = "datebox ")'). mobiscroll (opt );

Let's take a look.

Let's see it clearly. If you don't want to write it, just write so much. The DOCS on the official website is very detailed. Here we will not list it one by one. If you are interested, you can study it.