Mobile End Date Control

Last Update:2015-05-01 Source: Internet

Author: User

Tags i18n

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

　　Recently in the writing end of the page, to use the date control, learned that its built-in browser support HTML5, I laughed (so easy~), <input type= "date"/> Two seconds to fix. Then found three models, you guessed it already?! Yes, Android,iphone,winphone,,,, wonderful winphone built-in browser unexpectedly is ie. Drunk, crazy search, find a blog mobiscroll, according to knock down can not reach the effect of others, engaged in a half-day, finally,, and realized haha.

Speaking of which, someone is going to scold, you idiot ah, why not use jquery mobile? Oh, when you want to choose number 25th, you wait until the number 26th to choose (too card, direct pass)

The top of these two is too ugly, the official website has more beautiful ~

Let's start with someone else:

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

Step two, create a new HTML5 file, Draw jquery.js,jquerymobile.js, etc. ) the required 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.

If you have the same IQ as me, it's not written. Just keep looking at the following ... (The most annoying ones don't post all the code out of the blog )

1 <!DOCTYPE HTML>2 <HTML>3     <Head>4         <MetaCharSet= "Utf-8">5             <Metaname= "Viewport"content= "Width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">6         <title>mobiscroll-Chinese-Date selection</title>7         <Linkhref= "Css/mobiscroll.frame.css"rel= "stylesheet"type= "Text/css" />8         <Linkhref= "Css/mobiscroll.frame.android-holo.css"rel= "stylesheet"type= "Text/css" />9         <Linkhref= "Css/mobiscroll.scroller.css"rel= "stylesheet"type= "Text/css" />Ten         <Linkhref= "Css/mobiscroll.android-holo-light.css"rel= "stylesheet"type= "Text/css" /> One     </Head> A     <Body> -         <Divstyle= "Text-align:center;"> -             <label for= "Date">mobiscroll-Chinese-Date selection</label><BR/> the             <inputtype= "text"ID= "Date" />   -         </Div> -          -         <Scriptsrc= "Js/zepto.min.js"></Script> +         <Scriptsrc= "Js/mobiscroll.zepto.js"></Script> -         <Scriptsrc= "Js/mobiscroll.core.js"></Script> +         <Scriptsrc= "Js/mobiscroll.frame.js"></Script> A         <Scriptsrc= "Js/mobiscroll.scroller.js"></Script> at         <Scriptsrc= "Js/mobiscroll.util.datetime.js"></Script> -         <Scriptsrc= "Js/mobiscroll.datetimebase.js"></Script> -         <Scriptsrc= "Js/mobiscroll.datetime.js"></Script> -         <Scriptsrc= "Js/mobiscroll.android-holo-light.js"></Script> -         <Scriptsrc= "Js/i18n/mobiscroll.i18n.zh.js"></Script> -         <Scripttype= "Text/javascript"> in             $(function(){ -                 $('#date'). Mobiscroll (). Date ({ to Theme:"Android-holo-light",      + mode:"scroller",        - Display:"Bottom", the Lang:"ZH"         *                 }); $             });Panax Notoginseng         </Script> -     </Body> the </HTML>

Lying trough so many files, where do you want me to download ah, do not hurry ... Here it is ...

Stamp = " I

Mobile End Date Control

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More