{"id":1515,"date":"2023-03-25T14:08:20","date_gmt":"2023-03-25T06:08:20","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1515"},"modified":"2023-04-28T20:20:23","modified_gmt":"2023-04-28T12:20:23","slug":"wechat-mini-program-date-and-time-selector","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/25\/wechat-mini-program-date-and-time-selector\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u65e5\u671f\u65f6\u95f4\u9009\u62e9\u5668"},"content":{"rendered":"<p>\u4f7f\u7528\u539f\u751f\u7ec4\u4ef6picker\uff0c\u4ece\u5e95\u90e8\u5f39\u8d77\u7684\u6eda\u52a8\u9009\u62e9\u5668<\/p>\n<ul>\n<li>\u65e5\u671f\u9009\u62e9\u5668\uff1amode = date<\/li>\n<li>\u65f6\u95f4\u9009\u62e9\u5668\uff1amode = time<\/li>\n<li>\u591a\u5217\u9009\u62e9\u5668\uff1amode = multiSelector<\/li>\n<\/ul>\n<p><!-- more --><\/p>\n<h4>index.js<\/h4>\n<pre><code class=\"language-javascript\">\/\/index.js\n\/\/\u83b7\u53d6\u5e94\u7528\u5b9e\u4f8b\nconst app = getApp()\nconst dateTimePicker = require(&#039;..\/..\/utils\/dateTimePicker.js&#039;);\n\nPage({\n  data: {\n    date: &quot;2018-03-15&quot;,\n    time: &quot;12:01&quot;,\n    dateTimeSecondArray: null,\n    dateTimeSecond: null,\n    dateTimeMinuteArray: null,\n    dateTimeMinute: null,\n    startYear: 2000,\n    endYear: 2050\n  },\n\n  onLoad: function () {\n    \/\/ \u83b7\u53d6\u5b8c\u6574\u7684\u5e74\u6708\u65e5 \u65f6\u5206\u79d2\uff0c\u4ee5\u53ca\u9ed8\u8ba4\u663e\u793a\u7684\u6570\u7ec4\n    var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);\n    var obj2 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);\n    \/\/ \u7cbe\u786e\u5230\u5206\u7684\u5904\u7406\uff0c\u5c06\u6570\u7ec4\u7684\u79d2\u53bb\u6389\n    var lastArray = obj2.dateTimeArray.pop();\n    var lastTime = obj2.dateTime.pop();\n    console.log(obj1.dateTime)\n\n    this.setData({\n      dateTimeSecond: obj1.dateTime,\n      dateTimeSecondArray: obj1.dateTimeArray,\n      dateTimeMinute: obj2.dateTime,\n      dateTimeMinuteArray: obj2.dateTimeArray\n    });\n  },\n\n  changeDate(e) {\n    console.log(&#039;changeDate: &#039; + e.detail.value);\n    this.setData({ date: e.detail.value });\n  },\n\n  changeTime(e) {\n    console.log(&#039;changeTime: &#039; + e.detail.value);\n    this.setData({ time: e.detail.value });\n  },\n\n  changeDateTimeSecond(e) {\n    console.log(&#039;changeDateTimeSecond: &#039; + e.detail.value);\n    this.setData({ dateTime: e.detail.value });\n  },\n\n  changeDateTimeMinute(e) {\n    console.log(&#039;changeDateTimeMinute: &#039; + e.detail.value);\n    this.setData({ dateTime1: e.detail.value });\n  },\n\n  changeDateTimeSecondColumn(e) {\n    var arr = this.data.dateTimeSecond, dateArr = this.data.dateTimeSecondArray;\n    arr[e.detail.column] = e.detail.value;\n    dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);\n    this.setData({\n      dateTimeSecondArray: dateArr,\n      dateTimeSecond: arr\n    });\n  },\n\n  changeDateTimeMinuteColumn(e) {\n    var arr = this.data.dateTimeMinute, dateArr = this.data.dateTimeMinuteArray;\n    arr[e.detail.column] = e.detail.value;\n    dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);\n    this.setData({\n      dateTimeMinuteArray: dateArr,\n      dateTimeMinute: arr\n    });\n  }\n\n})<\/code><\/pre>\n<h4>index.wxml<\/h4>\n<pre><code>&lt;!--index.wxml--&gt;\n&lt;view class=&quot;container&quot;&gt;\n  &lt;view class=&quot;weui-cells__title&quot; style=&#039;padding-top: 30rpx; padding-bottom: 20rpx;&#039;&gt;\u5c0f\u7a0b\u5e8f\u65e5\u671f\u65f6\u95f4\u9009\u62e9\u5668 - AppBlog.CN&lt;\/view&gt;\n  &lt;view class=&quot;weui-cell weui-cell_input&quot;&gt;\n      &lt;view class=&quot;weui-cell__hd&quot;&gt;\n        &lt;view class=&quot;weui-label&quot;&gt;\u65e5\u671f&lt;\/view&gt;\n      &lt;\/view&gt;\n      &lt;view class=&quot;weui-cell__bd&quot;&gt;\n        &lt;picker mode=&quot;date&quot; value=&quot;{{date}}&quot; start=&quot;2015-09-01&quot; end=&quot;2017-09-01&quot; bindchange=&quot;bindDateChange&quot;&gt;\n          &lt;view class=&quot;weui-input&quot;&gt;{{date}}&lt;\/view&gt;\n        &lt;\/picker&gt;\n      &lt;\/view&gt;\n  &lt;\/view&gt;\n  &lt;view class=&quot;weui-cell weui-cell_input&quot;&gt;\n      &lt;view class=&quot;weui-cell__hd&quot;&gt;\n        &lt;view class=&quot;weui-label&quot;&gt;\u65f6\u95f4&lt;\/view&gt;\n      &lt;\/view&gt;\n      &lt;view class=&quot;weui-cell__bd&quot;&gt;\n        &lt;picker mode=&quot;time&quot; value=&quot;{{time}}&quot; start=&quot;09:01&quot; end=&quot;21:01&quot; bindchange=&quot;bindTimeChange&quot;&gt;\n          &lt;view class=&quot;weui-input&quot;&gt;{{time}}&lt;\/view&gt;\n        &lt;\/picker&gt;\n      &lt;\/view&gt;\n  &lt;\/view&gt;\n  &lt;view class=&quot;weui-cell weui-cell_input&quot;&gt;\n      &lt;view class=&quot;weui-cell__hd&quot;&gt;\n        &lt;view class=&quot;weui-label&quot;&gt;\u65e5\u671f\u65f6\u95f4(\u79d2)&lt;\/view&gt;\n      &lt;\/view&gt;\n      &lt;view class=&quot;weui-cell__bd&quot;&gt;\n        &lt;picker mode=&quot;multiSelector&quot; value=&quot;{{dateTimeSecond}}&quot; bindchange=&quot;changeDateTimeSecond&quot; bindcolumnchange=&quot;changeDateTimeSecondColumn&quot; range=&quot;{{dateTimeSecondArray}}&quot;&gt;\n          &lt;view class=&quot;weui-input&quot;&gt;\n            {{dateTimeSecondArray[0][dateTimeSecond[0]]}}-{{dateTimeSecondArray[1][dateTimeSecond[1]]}}-{{dateTimeSecondArray[2][dateTimeSecond[2]]}} {{dateTimeSecondArray[3][dateTimeSecond[3]]}}:{{dateTimeSecondArray[4][dateTimeSecond[4]]}}:{{dateTimeSecondArray[5][dateTimeSecond[5]]}}\n          &lt;\/view&gt;\n        &lt;\/picker&gt;\n      &lt;\/view&gt;\n  &lt;\/view&gt;\n  &lt;view class=&quot;weui-cell weui-cell_input&quot;&gt;\n      &lt;view class=&quot;weui-cell__hd&quot;&gt;\n        &lt;view class=&quot;weui-label&quot;&gt;\u65e5\u671f\u65f6\u95f4(\u5206)&lt;\/view&gt;\n      &lt;\/view&gt;\n      &lt;view class=&quot;weui-cell__bd&quot;&gt;\n        &lt;picker mode=&quot;multiSelector&quot; value=&quot;{{dateTimeMinute}}&quot; bindchange=&quot;changeDateTimeMinute&quot; bindcolumnchange=&quot;changeDateTimeMinuteColumn&quot; range=&quot;{{dateTimeMinuteArray}}&quot;&gt;\n          &lt;view class=&quot;weui-input&quot;&gt;\n            {{dateTimeMinuteArray[0][dateTimeMinute[0]]}}-{{dateTimeMinuteArray[1][dateTimeMinute[1]]}}-{{dateTimeMinuteArray[2][dateTimeMinute[2]]}} {{dateTimeMinuteArray[3][dateTimeMinute[3]]}}:{{dateTimeMinuteArray[4][dateTimeMinute[4]]}}\n          &lt;\/view&gt;\n        &lt;\/picker&gt;\n      &lt;\/view&gt;\n  &lt;\/view&gt;\n&lt;\/view&gt;<\/code><\/pre>\n<h4>app.wxss<\/h4>\n<pre><code>\/**app.wxss**\/\n@import &quot;weui.wxss&quot;;\n\n.container {\n  background-color: #F8F8F8;\n  font-size: 16px;\n  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;\n}<\/code><\/pre>\n<h4>dateTimePicker.js<\/h4>\n<pre><code class=\"language-javascript\">function withData(param) {\n  return param &lt; 10 ? &#039;0&#039; + param : &#039;&#039; + param;\n}\n\nfunction getLoopArray(start, end, dtype) {\n  var start = start || 0;\n  var end = end || 1;\n  var array = [];\n  for (var i = start; i &lt;= end; i++) {\n    if (dtype) {\n      array.push(withData(i) + dtype);\n    } else {\n      array.push(withData(i));\n    }\n  }\n  return array;\n}\n\nfunction getMonthDay(year,month){\n\n  year = year.substr(0, year.length - 1);\n  month = month.substr(0, month.length - 1);\n  \/\/console.log(year);\n  \/\/console.log(month);\n  var flag = year % 400 == 0 || (year % 4 == 0 &amp;&amp; year % 100 != 0), array = null;\n\n  switch (month) {\n    case &#039;01&#039;:\n    case &#039;03&#039;:\n    case &#039;05&#039;:\n    case &#039;07&#039;:\n    case &#039;08&#039;:\n    case &#039;10&#039;:\n    case &#039;12&#039;:\n      array = getLoopArray(1, 31,&#039;\u65e5&#039;)\n      break;\n    case &#039;04&#039;:\n    case &#039;06&#039;:\n    case &#039;09&#039;:\n    case &#039;11&#039;:\n      array = getLoopArray(1, 30, &#039;\u65e5&#039;)\n      break;\n    case &#039;02&#039;:\n      array = flag ? getLoopArray(1, 29, &#039;\u65e5&#039;) : getLoopArray(1, 28, &#039;\u65e5&#039;)\n      break;\n    default:\n      array = &#039;\u6708\u4efd\u683c\u5f0f\u4e0d\u6b63\u786e\uff0c\u8bf7\u91cd\u65b0\u8f93\u5165\uff01&#039;\n  }\n  return array;\n}\n\nfunction getNewDateArry() {\n  \/\/ \u5f53\u524d\u65f6\u95f4\u7684\u5904\u7406\n  var newDate = new Date();\n  var year = withData(newDate.getFullYear()) + &#039;\u5e74&#039;,\n      mont = withData(newDate.getMonth() + 1) + &#039;\u6708&#039;,\n      date = withData(newDate.getDate()) + &#039;\u65e5&#039;,\n      hour = withData(newDate.getHours()),\n      minu = withData(newDate.getMinutes()),\n      seco = withData(newDate.getSeconds());\n\n  return [year, mont, date, hour, minu, seco];\n}\n\nfunction dateTimePicker(startYear, endYear, date) {\n  \/\/ \u8fd4\u56de\u9ed8\u8ba4\u663e\u793a\u7684\u6570\u7ec4\u548c\u8054\u52a8\u6570\u7ec4\u7684\u58f0\u660e\n  var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];\n  var start = startYear || 1978;\n  var end = endYear || 2100;\n  \/\/ \u9ed8\u8ba4\u5f00\u59cb\u663e\u793a\u6570\u636e\n  \/\/console.log(date)\n  var defaultDate = date ? [...date.split(&#039; &#039;)[0].split(&#039;-&#039;), ...date.split(&#039; &#039;)[1].split(&#039;:&#039;)] : getNewDateArry();\n  \/\/console.log(defaultDate)\n  \/\/console.log(defaultDate[0])\n  \/\/console.log(defaultDate[1])\n  \/\/ \u5904\u7406\u8054\u52a8\u5217\u8868\u6570\u636e\n  \/*\u5e74\u6708\u65e5 \u65f6\u5206\u79d2*\/ \n  dateTimeArray[0] = getLoopArray(start, end, &#039;\u5e74&#039;);\n  dateTimeArray[1] = getLoopArray(1, 12, &#039;\u6708&#039;);\n  dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);\n  dateTimeArray[3] = getLoopArray(0, 23);\n  dateTimeArray[4] = getLoopArray(0, 59);\n  dateTimeArray[5] = getLoopArray(0, 59);\n\n  dateTimeArray.forEach((current, index) =&gt; {\n    dateTime.push(current.indexOf(defaultDate[index]));\n  });\n\n  return {\n    dateTimeArray: dateTimeArray,\n    dateTime: dateTime\n  }\n}\n\nmodule.exports = {\n  dateTimePicker: dateTimePicker,\n  getMonthDay: getMonthDay\n}<\/code><\/pre>\n<p><img decoding=\"async\" src=\"http:\/\/www.yezhou.me\/AppBlog\/images\/\u5fae\u4fe1\/\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u65e5\u671f\u65f6\u95f4\u9009\u62e9\u5668.png\" alt=\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u65e5\u671f\u65f6\u95f4\u9009\u62e9\u5668\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4f7f\u7528\u539f\u751f\u7ec4\u4ef6picker\uff0c\u4ece\u5e95\u90e8\u5f39\u8d77\u7684\u6eda\u52a8\u9009\u62e9\u5668 \u65e5\u671f\u9009\u62e9\u5668\uff1amode = date \u65f6\u95f4\u9009\u62e9\u5668\uff1amode = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[],"class_list":["post-1515","post","type-post","status-publish","format-standard","hentry","category-wechat-mini-program"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1515"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1515\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}