jquery mobiscroll moving end date selection control (without distortion)
<pre>
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<Meta name = "the viewport" Content = " width = device-width, initial- scale = 1, maximum-scale = 1, user-scalable = 0 ">
<Title> Mobiscroll date and time Chinese streamlining instance (SnoopyChen modifications increased Chinese support [email protected]) </ title>
<script src="dev/jquery-1.9.1.js"></script>
<script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
<link href="dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
<-! S style style file may be incorporated according to their preferences ->
<Script the src = "dev / JS / mobiscroll.android-ICS-2.5.2.js" type = "text / JavaScript"> </ Script>
< the href = Link "dev / CSS / mobiscroll.android-ICS-2.5.2.css" the rel = "this stylesheet" type = "text / CSS" />
<-! E style style file may be incorporated according to their preferences ->
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: arial, verdana, sans-serif;
font-size: 12px;
background: #ddd;
}
input, select {
width: 100%;
padding: 5px;
margin: 5px 0;
border: 1px solid #aaa;
box-sizing: border-box;
border-radius: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 5px;
}
.header {
border: 1px solid #333;
background: #111;
color: white;
font-weight: bold;
text-shadow: 0 -1px 1px black;
background-image: linear-gradient(#3C3C3C,#111);
background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
background-image: -moz-linear-gradient(#3C3C3C,#111);
}
.header h1 {
text-align: center;
font-size: 16px;
margin: .6em 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.content {
padding: 15px;
background: #fff;
}
</style>
<Script type = "text / JavaScript">
$ (function () {
var currYear = (new new a Date ()) the getFullYear ();.
var opt = {};
opt.date = {PRESET: 'DATE'};
// = {PRESET opt.datetime: 'datetime', the minDate: new new a Date (2012,3,10,9,22), the maxDate: new new a Date (2014,7,30,15,44), stepMinute:. 5};
opt. PRESET = {datetime: 'datetime'};
opt.time = {PRESET: 'Time'};
opt.default = {
Theme: 'Light Android-ICS', // skin style
display: 'modal', // display
mode: 'scroller', // date selection mode
lang: 'ZH',
startYear: currYear - 10, // start year
endYear: currYear + 10 // end Year
};
$ ( "# AppDate") Val ( '') Scroller. ( 'the destroy') ([DATE '], opt [' default ']). Scroller $ Extend (opt.).';
var = $ optDateTime .extend ( opt [ 'datetime'], opt [ 'default']);
var = $ optTime .extend (opt [ 'Time'], opt [ 'default']);
$ ( "# appDateTime") mobiscroll (optDateTime).. datetime (optDateTime);
$ ( "# appTime") mobiscroll (optTime) .time (optTime);.
// the following are comments section above parameters can be replaced to change its style
// plugins want to study together add my personal friends QQ can, you also build a group 291,464,597 welcomed into the group exchange. Haha. This can not be considered advertising.
The method of direct write parameters //
// $ ( "# Scroller") mobiscroll (opt) .date ();.
@ Shorthand for: $ ( "# Scroller") mobiscroll ({PRESET: 'DATE'});.
/ / specific parameters are defined as follows
// {
// PRESET: 'dATE', // date type --datatime --time,
// Light [wp] [wp]
// mode: "scroller", // scroller mode of operation [] [] [mixed clickpick]
// display: 'bubble', // display modal side [] [] [bubble inline ] [top] [bottom]
// dateFormat: 'yyyy-mm- dd', // date format
// setText: 'OK' button to confirm the name //
// cancelText: 'empty', // cancel button names membership I
// dateOrder: 'yymmdd', the panel // date arranged grid
// dayText: 'day',
// monthText: 'month',
// yearText: 'on', the date text panel //
// startYear: (new Date ()) getFullYear (), // the beginning of the year.
// endYear: (new new a Date ()) getFullYear () + 9, // the end of the year.
// showNow: to true,
// nowText: "tomorrow ", //
// showOnFocus: to false,
// height: 45,
// width: 90,
// rows:. 3}
});
</script>
</head>
<body>
<div class = "header">
<h1 of> Mobiscroll streamlined Examples </ h1 of>
</ div>
<div class="content">
<div class="demos">
<label for="appDate">日期</label>
<input type="text" name="appDate" id="appDate" />
</div>
<div class="demos">
<label for="appDateTime">日期时间</label>
<input type="text" name="appDateTime" id="appDateTime" />
</div>
<div class="demos">
<label for="appTime">时间</label>
<input type="text" name="appTime" id="appTime" />
</div>
</div>
</body>
</html>
</ pre>
PS: If you must use a callback on intput can only refresh the data of the setInterval