WEUI Mobile page Implementation time Selector (year-month-day-hour-minute)
Last Update:2017-05-15
Source: Internet
Author: User
<span id="Label3"></p><p><p>When doing the public number, using the Weui style, there is a need for the user to <span style="color: #339966">select an appointment time, which takes a month and a day and is accurate to hours and minutes</span> .</p></p><p><p>however, the Weui Picker component does not support the direct display of 5 columns, according to the Weui.js Author's recommendation, is to implement date and time selection as two Selectors.</p></p><p><p>So my idea is to select a date and then <span style="color: #339966">automatically jump</span> out of time to imitate a time selector. Date belongs to datepicker, time belongs to ordinary Picker.</p></p><p><p>：</p></p><p><p>Click the desired time to jump out of datepicker:</p></p><p><p></p></p><p><p>After selecting the time and determining when to jump out of time selection, This is a common picker:<br></p></p><p><p>You can then deal with the time you choose.</p></p><p><p>The implementation method is also simple: after the first picker is selected and disappears, the second picker is called, which guarantees continuous Invocation.</p></p><p><p><span style="color: #339966">The key is to listen to the first picker vanishing event, and the first one disappears before the second is Called.</span></p></p><p><p>Code:</p></p><pre>$ ('. ma_expect_date '). Click (<span style="color: #0000ff"><span style="color: #0000ff">function</span></span><span style="color: #000000"><span style="color: #000000">(event) {</span></span><span style="color: #0000ff"><span style="color: #0000ff">var</span></span>_this =<span style="color: #0000ff"><span style="color: #0000ff"></span> this</span><span style="color: #000000"><span style="color: #000000">; Weui.datepicker ({start:</span></span><span style="color: #0000ff"><span style="color: #0000ff">New</span></span><span style="color: #000000"><span style="color: #000000">Date (), end:</span></span>2030<span style="color: #000000"><span style="color: #000000">, Defaultvalue: [</span></span><span style="color: #0000ff"><span style="color: #0000ff">New</span></span>Date (). getFullYear (),<span style="color: #0000ff"><span style="color: #0000ff">New</span></span>Date (). getMonth () +1,<span style="color: #0000ff"><span style="color: #0000ff">New</span></span><span style="color: #000000"><span style="color: #000000">Date (). getDate ()], onconfirm:</span></span><span style="color: #0000ff"><span style="color: #0000ff">function</span></span><span style="color: #000000"><span style="color: #000000">(result) {</span></span><span style="color: #008000"><span style="color: #008000">//</span></span><span style="color: #008000"><span style="color: #008000">level two call: time</span></span>$ ('. ma_expect_date_picker. weui-picker '). on (' animationend webkitanimationend ',<span style="color: #0000ff"><span style="color: #0000ff">function</span></span><span style="color: #000000"><span style="color: #000000">() {show_expect_time_picker (_this, result); }); }, id:</span></span>' Ma_expect_date '<span style="color: #000000"><span style="color: #000000">, ClassName:</span></span>' Ma_expect_date_picker '<span style="color: #000000"><span style="color: #000000"> }); }); </span></span><span style="color: #008000"><span style="color: #008000">//</span></span><span style="color: #008000"><span style="color: #008000">-----------------------level two call: time</span></span> <span style="color: #0000ff"><span style="color: #0000ff">var</span></span>Hours =<span style="color: #000000"><span style="color: #000000">[], minites</span></span>=<span style="color: #000000"><span style="color: #000000">[], Symbol</span></span>= [{label: ': ', value:0<span style="color: #000000"><span style="color: #000000"> }]; </span></span><span style="color: #0000ff"><span style="color: #0000ff">function</span></span><span style="color: #000000"><span style="color: #000000">Show_expect_time_picker (_this, Date) {</span></span><span style="color: #0000ff"><span style="color: #0000ff">var</span></span>Date = Date[0].label + Date[1].label + date[2<span style="color: #000000"><span style="color: #000000">].label; </span></span><span style="color: #0000ff"><span style="color: #0000ff">if</span></span>(!<span style="color: #000000"><span style="color: #000000">Hours.length) {</span></span><span style="color: #0000ff"><span style="color: #0000ff"></span> for</span>(<span style="color: #0000ff"><span style="color: #0000ff">var</span></span>i = 0; i< 24; i++<span style="color: #000000"><span style="color: #000000">) { </span></span><span style="color: #0000ff"><span style="color: #0000ff">var</span></span>Hours_item =<span style="color: #000000"><span style="color: #000000"> {}; Hours_item.label</span></span>= (' + i). length = = 1? ' 0 ' + I: ' +<span style="color: #000000"><span style="color: #000000">i; Hours_item.value</span></span>=<span style="color: #000000"><span style="color: #000000">i; Hours.push (hours_item); } } </span></span><span style="color: #0000ff"><span style="color: #0000ff">if</span></span>(!<span style="color: #000000"><span style="color: #000000">Minites.length) {</span></span><span style="color: #0000ff"><span style="color: #0000ff"></span> for</span>(<span style="color: #0000ff"><span style="color: #0000ff">var</span></span>j= 0; J < 60; J + +<span style="color: #000000"><span style="color: #000000">) { </span></span><span style="color: #0000ff"><span style="color: #0000ff">var</span></span>Minites_item =<span style="color: #000000"><span style="color: #000000"> {}; Minites_item.label</span></span>= (' + J '). Length = = 1? ' 0 ' + j: ' +<span style="color: #000000"><span style="color: #000000">j; Minites_item.value</span></span>=<span style="color: #000000"><span style="color: #000000">j; Minites.push (minites_item); }} weui.picker (hours, symbol, minites, {defaultvalue: [</span></span><span style="color: #0000ff"><span style="color: #0000ff">New</span></span>Date (). getHours () +1, 0, 0<span style="color: #000000"><span style="color: #000000">], onconfirm:</span></span><span style="color: #0000ff"><span style="color: #0000ff">function</span></span><span style="color: #000000"><span style="color: #000000">(result) {</span></span><span style="color: #0000ff"><span style="color: #0000ff">var</span></span>Time = Result[0].label + ': ' + result[2<span style="color: #000000"><span style="color: #000000">].label; </span></span><span style="color: #0000ff"><span style="color: #0000ff">var</span></span>Expect_date = date + "+<span style="color: #000000">time <span style="color: #000000">; $ (_this). Find (</span></span>'. weui-cell__ft '<span style="color: #000000"><span style="color: #000000">). Text (expect_date); }, id:</span></span>' Ma_expect_time '<span style="color: #000000"><span style="color: #000000"> }); }</span></span></pre><p><p></p></p><p><p>WEUI Mobile page Implementation time Selector (year-month-day-hour-minute)</p></p></span>
