Mobile End Date Selection control

Last Update:2018-03-22 Source: Internet

Author: User

Tags set time

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

<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "viewport" content= "Maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width, initial-scale=1.0 "/>
<link rel= "stylesheet" type= "Text/css" href= "Css/jquery.picktimer.css"/>

<div class= "T2" > Birthday

<div class= "Text date" id= "Orld" > struggling teenager </div>
</div>

</body>
<script src= "Script/jquery.min.js" ></script>
<script type= "Text/javascript" src= "Script/myalert.js" ></script>
<script src= "Script/jquery.picktimer.js" ></script>
<script type= "Text/javascript" >

$ (function () {
$ (". Date"). Picktimer ({
' Picktype ': ' Y:m:d ',
' Yearsize ': ' 60 '
});
});

}

</script>

Js:

/*
* Pluginname:picktimer,
* Author:[email protected]
* Individual Contact method:986372959 (It ' s my QQ)
* Date:2017/09/07 18:45:00
* */
;(function ($,window,document,undefined) {
' Use strict '; Rigorous mode for increased efficiency
var pluginname = ' Picktimer ',//define the name of the plugin
Defaults = {},//defines a default parameter
lih,//each Li's height
$list,//Sliding list
Globalthis_launchhtml,
pluginthis;//refers to the this that points to plugin
var global = {
Options: '
};
function Plugin (options) {//Create construct letter
This--plugin object
Pluginthis = this;
this.options = options;
This.init (); Initialization
}
Plugin.prototype = {
Init:function () {
This--plugin object
var str = ' <div class= ' pick-container touches ' > ' +
' <div class= ' row pick-m0 ' > ' +
' <div class= ' col S3 center-align > ' +
' <a href= ' javascript:void (0) "class=" Pick-cancel "> Cancel </a> ' +
' </div> ' +
' <div class= ' col S6 center-align pick-title ' > ' + (this.options.picktype== ' y:m:d '? ') Select the date ': ' Set time ') + ' </div> ' +
' <div class= ' col S3 center-align > ' +
' <a href= ' javascript:void (0) "class=" pick-sure "> OK </a> ' +
' </div> ' +
' </div> ' +
' <div class= ' row pick-m0 ' > ' +
' <div class= ' col S4 pick-timer > ' +
' <div class= ' pick-bgtop ' ></div> ' +
' <ul class= ' list > ' +
' </ul> ' +
' <div class= ' current ' + (this.options.picktype== ' y:m:d '? ') Current-date-right ': ' current-time ') + ' "></div> ' +
' <div class= ' pick-bgbottom ' ></div> ' +
' </div> ' +
' <div class= ' col S4 pick-timer > ' +
' <div class= ' pick-bgtop ' ></div> ' +
' <ul class= ' list > ' +
' </ul> ' +
' <div class= ' current ' + (this.options.picktype== ' y:m:d '? ') Current-date-left current-date-right ': ' current-time ') + ' "></div> ' +
' <div class= ' pick-bgbottom ' ></div> ' +
' </div> ' +
' <div class= ' col S4 pick-timer > ' +
' <div class= ' pick-bgtop ' ></div> ' +
' <ul class= ' list > ' +
' </ul> ' +
' <div class= ' current ' + (this.options.picktype== ' y:m:d '? ') Current-date-left ': ') + ' ></div> ' +
' <div class= ' pick-bgbottom ' ></div> ' +
' </div> ' +
' </div> ' +
' </div> ' +
' <div class= ' pick-layer ' ></div> ';
$ ("Body"). Append (str);
$ (". Pick-cancel,.pick-layer"). On ("click", Function () {
$ (". Touches,.pick-layer"). Remove ();
$ ("body"). Unbind ("Touchmove"); Body Drag event restored
});
$ (". Pick-sure"). On ("click", Function () {
var val = ';
$ (". Pick-active"). each (function () {
if (pluginthis.options.picktype== ' y:m:d ') {
Val + = $ (this). Text () + '-';
} else if (pluginthis.options.picktype== ' h:m:s ') {
Val + = $ (this). Text () + ': ';
}
});
var date = val.substring (0,val.length-1);
$.ajax ({
URL: ' Http://192.168.0.21/index.php/index/Userindex/edit_information ',
Method: ' Post ',
Cache:false,
DataType: ' JSON ',
Data: {Orld:date,uid:uid},
Success:function (ret) {

},
Error:function (XMLHttpRequest, Textstatus, Errorthrown) {
Alert ("Ajax failed to get data!") ");
}

})

$ (globalthis_launchhtml). HTML (val.substring (0,val.length-1));
$ (". Touches,.pick-layer"). Remove ();
$ ("body"). Unbind ("Touchmove"); Body Drag event restored
});
$ ("Body"). On (' Touchmove ', function (e) {
E.preventdefault ();
});
This.render (); Rendering
},
Render:function () {
This--plugin object
Global.options = this.options;
$list = $ (". List");
if (this.options.picktype== ' h:m:s ') {
for (Var h=0;h<24;h++) {
$list. EQ (0). Append ("<li>" + (H >= H: ' 0 ' + h) + "</li>")
}
for (var m = 0; m <; m++) {
$list. EQ (1). Append ("<li>" + (M >= m: ' 0 ' + m) + "</li>")
}
for (var s = 0; s <; s++) {
$list. EQ (2). Append ("<li>" + (s >= s: ' 0 ' + s) + "</li>")
}
LiH = $list. Find ("Li"). EQ (0). Height ();//li
var hour = new Date (). GetHours (), min = new Date (). getminutes (), sec = new Date (). getseconds ();
$list. EQ (0). Find ("Li"). EQ (hour). AddClass ("pick-active");//Start by default the third row is selected
$list. EQ (0). CSS ("Top", (-hour+2) *lih);
$list. EQ (1). Find ("Li"). EQ (min). addclass ("pick-active");//Start by default the third row is selected
$list. EQ (1). CSS ("Top", (-min+2) *lih);
$list. EQ (2). Find ("Li"). addclass ("pick-active");//Start by default the third row is selected
$list. EQ (2). CSS ("Top", (-sec+2) *lih);
} else if (this.options.picktype== ' y:m:d ') {
var year = new Date (). getFullYear (), month = new Date (). GetMonth ();
for (Var _y=0;_y<this.options.yearsize;_y++) {
$list. EQ (0). Append ("<li>" + (Year-math.floor (THIS.OPTIONS.YEARSIZE/2) +_y) + "</li>")
}
for (var _m = 1; _m <; _m++) {
$list. EQ (1). Append ("<li>" + (_m >= _m: ' 0 ' + _m) + "</li>")
}
LiH = $list. Find ("Li"). EQ (0). Height ();//li
$list. EQ (0). Find ("Li"). EQ (year-$list. EQ (0). Find ("Li"). EQ (0). Text ()). addclass ("pick-active");//start with the default third row selected
$list. EQ (0). CSS ("Top", (-(year-$list. EQ (0). Find ("Li"). EQ (0). Text ()) +2) *lih);
$list. EQ (0). addclass ("Js_year");
$list. EQ (1). Find ("Li"). EQ (month). addclass ("pick-active");//Start by default the third row is selected
$list. EQ (1). CSS ("Top", (-month+2) *lih);
$list. EQ (1). addclass ("Js_month");
This.createdate ();
}
This.handleevent (); Binding events
return this;
},
Createdate:function () {//number of days in the creation Date selection column
$list. EQ (2). HTML ("");
var createdate_year = $ (". Js_year"). Find ("Li.pick-active"). Text ();
var createdate_month = $ (". Js_month"). Find ("Li.pick-active"). Text ();
if (((createdate_year% 4) ==0) && ((createdate_year%)!=0) && createdate_month== "02" | | ((createdate_year%) ==0) && createdate_month== "02") {
Leap year February
Setdatefun (29);
} else if (! ( ((createdate_year% 4) ==0) && ((createdate_year)!=0) && createdate_month== "02" | | ! ((createdate_year%) ==0) && createdate_month== "02") {
Non-leap year February
Setdatefun (28);
} else if (createdate_month== ' 01 ' | | createdate_month== ' 03 ' | | createdate_month== ' 05 ' | | createdate_month== ' 07 ' | | createdate_month== ' 08 ' | | createdate_month== ' 10 ' | | createdate_month== ' 12 ') {
Setdatefun (31);
} else if (createdate_month== ' 04 ' | | createdate_month== ' 06 ' | | createdate_month== ' 09 ' | | createdate_month== ' 11 ') {
Setdatefun (30);
}
function Setdatefun (len) {
var date = new Date (). GetDate ();
for (var _d = 1; _d <= len; _d++) {
$list. EQ (2). Append ("<li>" + (_d >= _d: ' 0 ' + _d) + "</li>")
}
$list. EQ (2). Find ("Li"). EQ (date-1). addclass ("pick-active");//Start by default the first few lines are selected
$list. EQ (2). CSS ("Top", (-date+2+1) *lih);
$list. EQ (2). addclass ("Js_date");
}
return this;
},
Handleevent:function () {//function binding
This--plugin object
$list. each (function () {
var starty = null,//start Pagey
EndY = null,//end of Pagey
Disty = Null,//endy-starty
Ctop = Null,//currenttop
_top = top value of null,//ul.list
Times = start time of null,//scrolling
Distt = null,//time difference for each scroll
Speed = null;//Velocity
var SE = null;
var ME = null;
function Startcallback (e) {
This here points to the current sliding $list
This here points to the current sliding $list
if (e.originalevent.touches) {
Se=e.originalevent.targettouches[0];
Console.log (SE)
}
Starty = Se.pagey;
Ctop = $ (this). Position (). Top;
Times = new Date ();
}
function Movecallback (e) {
This here points to the current sliding $list
if (e.originalevent.touches) {
Me=e.originalevent.targettouches[0];
Console.log (ME)
}
var scrollspeed = PluginThis.options.speed | | 2;
EndY = Me.pagey;
Disty = scrollspeed* (Endy-starty);
Console.log (disty);//Slide down is upright, upward is negative
if (ctop+disty>88) {//Swipe down from the top
_top = 88;
} else if (ctop+disty<$ (). Parent (). Height ()-$ (this). Height ()-88) {//swipe up from bottom
_top = $ (this). Parent (). Height ()-$ (this). Height ()-88;
} else {//middle place swipe
_top = Ctop+disty;
}
_top = _top-_top% lih;//rounding
$ (this). CSS (' top ', _top);
if (_top==44) {
$ (this). Find ("Li"). EQ (1). addclass ("Pick-active"). Siblings (). Removeclass ("pick-active");
} else if (_top==88) {
$ (this). Find ("Li"). EQ (0). addclass ("Pick-active"). Siblings (). Removeclass ("pick-active");
} else {
$ (this). Find ("Li"). EQ (Math.Abs (_top/lih) +2). addclass ("Pick-active"). Siblings (). Removeclass ("pick-active");
}
}
function Endcallback (e) {
This here points to the current sliding $list
var $this = $ (this);
var dir = disty < 0? 1: Move up to 1 in -1;//direction, move down to-1
Distt = new Date ()-times;
Speed = Math.Abs (DISTY/DISTT);//Unit Px/ms
if (speed>0.6) {
/*alert (1) */
if (dir = = 1 && math.abs (_top/lih) + 3 = = $ (this). Find (' li '). Length) {//finger swipe up
if ($this. attr ("class")! = "List js_date" && pluginthis.options.picktype== ' y:m:d ') {
Show the number of days of February and other months in a leap year
Pluginthis.createdate ();
}
return;//to the end, can't skate.
} else if (Dir==-1 && _top==88) {//finger swipe down
if ($this. attr ("class")! = "List js_date" && pluginthis.options.picktype== ' y:m:d ') {
Show the number of days of February and other months in a leap year
Pluginthis.createdate ();
}
return;//to the top, can't skate.
}
}
SetTimeout (function () {
$this. CSS ("top", _top);
if (_top==44) {
$ (this). Find ("Li"). EQ (1). addclass ("Pick-active"). Siblings (). Removeclass ("pick-active");
} else if (_top==88) {
$ (this). Find ("Li"). EQ (0). addclass ("Pick-active"). Siblings (). Removeclass ("pick-active");
} else {
$ (this). Find ("Li"). EQ (Math.Abs (_top/lih) +2). addclass ("Pick-active"). Siblings (). Removeclass ("pick-active");
}
if ($this. attr ("class")! = "List js_date" && pluginthis.options.picktype== ' y:m:d ') {
Show the number of days of February and other months in a leap year
Pluginthis.createdate ();
}
},50);
}
$ (this). Off (' Touchstart '). On (' Touchstart ', startcallback); Slide start Here this point to the plugin object
$ (this). Off (' Touchmove '). On (' Touchmove ', movecallback); The this point of the slide is pointing to the plugin object
$ (this). Off (' Touchend '). On (' Touchend ', endcallback); It's done. This point points to the plugin object
})
}
};
$.fn[pluginname] = function (options) {
Do someting

$ (this). Click (function () {
globalthis_launchhtml = this;
New Plugin (options);
});
Return this;//returns the object that called the plug-in to support chained calls
}
}) (jquery,window,document);

Css:

. Pick-container ul{
margin:0;
padding:0;
}
. Pick-container Ul,.pick-container li{
List-style:none;
}
. Pick-container a{
Text-decoration:none;
}
/*materialize*/
. Pick-container *{-webkit-tap-highlight-color:transparent;}
. pick-container {
position:fixed;
z-index:99999999;
left:0;
bottom:0;
WIDTH:100VW;
Background: #fff;
margin:0 Auto;
max-width:1280px;
}
*, *:before, *:after {
-webkit-box-sizing:inherit;
Box-sizing:inherit;
}
. pick-m0 {
margin:0;
}
. row:after {
Content: "";
display:table;
Clear:both;
}
. Row. Col {
Float:left;
-webkit-box-sizing:border-box;
Box-sizing:border-box;
padding:0.75rem;
min-height:1px;
}
. Row. col.s3 {
width:25%;
Margin-left:auto;
Left:auto;
Right:auto;
}
. Row. col.s4 {
width:33.33333333333%;
Margin-left:auto;
Left:auto;
Right:auto;
}
. Row. col.s6 {
width:50%;
Margin-left:auto;
Left:auto;
Right:auto;
}
. Center,. center-align {
Text-align:center;
}
/*layer*/
. pick-layer{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:99999998;
Background:rgba (0,0,0,0.4);
}
/*pick-timer*/
. pick-timer{
Overflow:hidden;
position:relative;
border-top:1px solid #eee;
height:220px;
}
. Pick-timer. list{
Position:absolute;
top:0;
left:0;
Z-index:2;
width:100%;
Transition:top. 4s ease-out;
}
. Pick-timer. List li{
height:44px;
line-height:44px;
Text-align:center;
Color: #666;
font-size:14px;
Transition:all. 1s ease-out;
}
. Pick-timer. List li.pick-active{
font-size:20px;
Color: #e02222;
}
. Pick-timer. current{
Position:absolute;
top:88px;
left:0;
Z-index:1;
border-top:1px solid #e02222;
border-bottom:1px solid #e02222;
width:100%;
height:44px;
Background: #fff;
}
/*pick-head*/
. pick-cancel{
Display:block;
font-size:14px;
Color: #666;
height:40px;
line-height:40px;
}
. pick-sure{
Display:block;
font-size:14px;
Color: #e02222;
height:40px;
line-height:40px;
}
. pick-title{
font-size:14px;
Color: #666;
height:40px;
line-height:40px;
}
/*current-time*/
. current-time:after{
Content: ': ';
font-size:14px;
Text-align:center;
line-height:44px;
Color: #666;
Position:absolute;
top:-2px;
right:0;
}
. current-date-right:after{
Content: '. ';
Color:transparent;
width:5px;
border-top:1px solid #999;
Position:absolute;
top:20px;
right:0;
}
. current-date-left:before{
Content: '. ';
Color:transparent;
width:5px;
border-top:1px solid #999;
Position:absolute;
top:20px;
left:0;
}
/**/
. pick-bgtop{
Position:absolute;
top:0;
left:0;
width:100%;
height:88px;
/*background:linear-gradient (#fff 0, Rgba (255, 255, 255,.) 45%, Rgba (255, 255, 255,. 6) 75%, RGBA (255, 255, 255,. 4) 1 0%); * *
Background:-webkit-gradient (linear, left top, left bottom, from (#efefef), to (RGBA (255, 255, 255,. 1));
Z-index:1;
}
. pick-bgbottom{
Position:absolute;
bottom:0;
left:0;
width:100%;
height:87px;
/*background:linear-gradient (RGBA (255, 255, 255,. 4) 0, Rgba (255, 255, 255,. 6) 25%, RGBA (255, 255, 255,.) 65%, #fff 1 0%); * *
Background:-webkit-gradient (linear, left top, left bottom, from (RGBA (255, 255, 255,. 1)), to (#efefef));
Z-index:1;
}

Mobile End Date Selection 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