How to use the jquery mobile plugin--mobiscroll

Mobiscroll is a mobile phone date control, the equivalent of PC-side my97datepicker, although said My97datepicker can be used on the mobile side, but the total feeling does not look very good, nonsense not much to say, Let's start by looking at how mobiscroll use it.

First of all, let's see what Mobiscroll interface is 650) this.width=650; "Src=" http://s3.51cto.com/wyfs02/M02/53/98/ Wkiol1rsdizxukosaacec647k0s442.jpg "title=" 1.jpg "alt=" wkiol1rsdizxukosaacec647k0s442.jpg "/> does it look like an alarm clock? How did this effect come about?

First download Mobiscroll, and then put the CSS and JS file import, note: The picture and CSS in the same directory, or will not find the 650) this.width=650; "Src=" http://s3.51cto.com/wyfs02/ M01/53/9a/wkiom1rsdmpjagq3aadundzsfvy079.jpg "title=" 2.jpg "alt=" wkiom1rsdmpjagq3aadundzsfvy079.jpg "/> Of course, Are said to be mobile plug-ins, certainly do not forget to import jquery mobile files, specifically to import the file as follows 650) this.width=650; "Src=" http://s3.51cto.com/wyfs02/M00/53/98/ Wkiol1rsd2wafhkyaafrwr38ti0049.jpg "title=" 2.png "alt=" wkiol1rsd2wafhkyaafrwr38ti0049.jpg "/> Okay, file introduction complete, Space code:

<div data-role= "Fieldcontain" > <label for= "txtbirthday" >select date:</label> <input type= "text" Data-role= "Datebox" id= "Txtbirthday" name= "Txtbirthday"/> </div>

It's not over yet. Initialize the date control

<script type= "Text/javascript" >$ (document). Ready (function () {$ (' Input:jqmdata (role= ' datebox ') '). Mobiscroll (). Date ();}); </script>

Of course, this is not enough for our Chinese use, if you want to get used to our Chinese habits, or to add a bit of code

<script type= "Text/javascript" >$ (document). Ready (function () {    var opt  = {                 preset:  ' Date ',  //date                  display:  ' modal ',  //display mode                   dateFormat:  ' yy-mm-dd ', //  date format                  setText:  ' OK ',  / /Confirm button Name                  canceltext:  ' Cancel ',//Cancel button name                  dateOrder:  ' YYMMDD ',  //panel in the date arrangement format                  daytext:  ' Day ', monthtext:  ' month ', yeartext:  ',  //panel of the year-date text                  endyear:2020 // End of year             };             $ (' Input:jqmdata (role= "Datebox") '). Mobiscroll (). Date (opt);}); </script>

This is suitable for Chinese use, ah haha!

This article is from the "Jcblock" blog, make sure to keep this source http://jclove.blog.51cto.com/5642636/1579458

How to use the jquery mobile plugin--mobiscroll