Home > Developer > Web Develop
Official website:
http://www.mobiscroll.com/
http://code.google.com/p/mobiscroll/
1, lite version of the demo:
View demo»
Download demo»
2, date and time of the integrated version of the demo:
Preview Map:
View demo»
Download demo»
and the Demo:
1, streamline a Chinese version of the demo:
This includes effects such as date and time co-selection.
View demo»
2, modify the official demo, and add the Chinese version of the optional
This demo has no online preview, please download the full package:
Download demo»
Yesterday encountered the use date application, began Baidu jquery mobile Date Plugin
Datebox and Mobilescroll are generally used
Yesterday began to study datebox, until this morning to study well, and only studied the date control, date with time as if there is no.
No way to start studying mobiscroll.
It's easy to use, just to introduce 2 of files.
Here's how you use data and Datatime 2 of controls.
<!doctype html>
<meta name= "viewport" content= "Width=device-width, initial-scale=1" charset= "UTF-8" >
<link href= ". /jquery.mobile-1.3.2/jquery.mobile-1.3.2.css "rel=" stylesheet "type=" Text/css "/>
<script src= ". /jquery.mobile-1.3.2/jquery.js "type=" Text/javascript "></script>
<script src= ". /jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js "type=" Text/javascript "></script>
<link href= ". /plug-data-scroll/mobiscroll.custom-2.6.2.min.css "rel=" stylesheet "type=" Text/css "/>
<script src= ". /plug-data-scroll/mobiscroll.custom-2.6.2.min.js "type=" Text/javascript "></script>
<title> Alert Information </title>
<style type= "Text/css" >
</style>
<script>
var opt_data = {
Preset: ' Date ',//Date
Theme: ' JQM ',//skin style
Display: ' Modal ',//Show 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 in date arrangement format
Daytext: ' Day ', Monthtext: ' Month ', Yeartext: ' Year ',//panel in month and day text
Yeartext: ' Year ', Monthtext: ' Month ', Daytext: ' Day ',//panel in month and day text
endyear:2020,//End year
Shownow:true,
Nowtext: ' Today ',
Hourtext: ' Hours ',
Minutetext: ' min '
};
/* var opt_datatime = {
Preset: ' datetime ',//Date
Theme: ' JQM ',//skin style
Display: ' Modal ',//Show 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 in date arrangement format
Yeartext: ' Year ', Monthtext: ' Month ', Daytext: ' Day ',//panel in month and day text
endyear:2020,//End year
Nowtext: ' Today ',
Hourtext: ' Hours ',
Minutetext: ' min '
};*/
$ (document). Ready (function ()
{
$ ("#mydate1"). Mobiscroll (Opt_data);
$ ("#mydate2"). Mobiscroll (Opt_data);
$ ("#datatime1"). Mobiscroll (Opt_datatime);
$ ("#filter1"). Click (Function ()
{
Alert ($ ("#mydate2"). Val ());
});
})
</script>
<body>
<div data-role= "Page" >
<div data-role= "header" data-position= "fixed" data-theme= "B" >
<a href= "main.html" data-role= "button" data-icon= "Back" > Return </a>
</div>
<div data-role= "Content" >
<fieldset ><legend style= "color: #006600" > select time period </legend><input name= "mydate" id= "mydate1" type= "text" data-role= "Datebox" data-inline= "true" placeholder= "Start Time" autofocus& Gt
<input name= "Mydate2" id= "Mydate2" type= "text" data-role= "Datebox" data-inline= "true" placeholder= "End Time" autofocus >
</fieldset>
<a href= "#" data-role= "button" id= "Filter1" > Query </a>
<ul data-role= "ListView" data-inset= "true" Data-count-theme= "D" >
<li><a href= "alter-detail-rain.html" data-transition= "Slidedown" data-ajax= ' false ' > rainfall warning <span class= "Ui-li-count" > 2 </span></a></li>
<li><a href= "mian.html" data-transition= "Slidedown" data-ajax= ' false ' > river water level Warning <span class= " Ui-li-count "> 2 </span></a> </li>
<li><a href= "chuancai.html" data-transition= "Flip" > Reservoir water level warning <span class= "Ui-li-count" > 5 </SPAN&G T;</a> </li>
<li><a href= "xiangcai.html" data-transition= "Slidedown" data-ajax= ' false ' > full alert <span class= " Ui-li-count ">9</span></a> </li>
</ul>
</div>
<div align= "center" data-role= "footer" data-position= "fixed" data-theme= "C" >
<div data-role= "NavBar" data-iconpos= "Top" >
<ul>
<li><a href= "main.html" data-icon= "Home" > Home </a></li>
<li><a href= "nongtianinfo.html" data-icon= "info" > Farmland environment </a></li>
<li><a href= "alter.html" data-icon= "search" > Alert query </a></li>
<li><a href= "#" data-icon= "send-msg" > Information escalation </a></li>
</ul>
</div>
</div>
</div>
</body>
jquery Mobile Mobiscroll Date plugin using Mobiscroll
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
