Mobiscroll usage notes for the date plugin in JQuery mobile development

Recently in the development of mobile, using jquery Mobile, mobile plug-in is not as much as the web side of the plug-in, choose less, some need to package themselves, but the skill is not enough ah.

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

Jquerymobiledatebox This on the board performance is not good, the performance of a bit card

Mobiscroll performance is better than the former, the effect is more concise, smoother strokes

Put it together in comparison

Hey, crossing, what do you think looks good?

Anyway, I think the mobiscroll effect is better, well, let's see how this guy works.

The first step: to the official website to download a compressed package, the download needs to register before you can download. When downloading, you can choose the frame and skin style you use to see

This assumes that you have successfully registered and downloaded the

The second step, create a new HTML5 file, jquery.js,jquerymobile.js and so on necessary files, write the following code into your file:

<div data-role= "Fieldcontain" >         <label for= "Txtbirthday" > Date of birth:</label> <input type=         " Text "data-role=" Datebox "   id=" Txtbirthday "name=" Birthday "/> </div>

We can initialize the date control like this:

$ (' Input:jqmdata (role= "Datebox") '). Mobiscroll (). Date ();

Preview it, is not ready to use it! But this interface is English, for the Chinese people are a bit uncomfortable, and the official website does not provide a language package, but no relationship, the official website of the API is good, we can set some common properties to conform to the regular date format.

Initialize date control    var opt = {        preset: ' Date ',//Date        theme: ' JQM ',//Skin style        display: ' Modal ',//display mode         mode: ' Clickpick ',//date selection mode        dateformat: ' Yy-mm-dd ',//date format        setText: ' OK ',//Confirm button name        canceltext: ' Cancel ',//Cancel button name me        dateorder: ' YYMMDD ',//panel date arrangement format        daytext: ' Day ', Monthtext: ' Month ', Yeartext: ' Year ',//panel of the month and day text        endyear:2020// End year    };        $ (' Input:jqmdata (role= "Datebox") '). Mobiscroll (opt);

Okay, let's see.

This is a clear view. Do not write, this is written so much, the official website of the docs written very detailed, not listed here, interested friends can go to study, in the process of research what experience do not post Oh!

Mobiscroll usage notes for the date plugin in JQuery mobile development