How to implement time function in WeChat mini program-JS Tutorial-php.cn

How to implement time function in WeChat mini program

亚连

Release： 2018-06-21 16:41:34

Original

2894 people have browsed it

This article mainly introduces the use of picker in the WeChat applet to implement the time and date selection box function. It analyzes the relevant operating techniques of the WeChat applet picker component for date and time selection in the form of examples. It also comes with source code for readers to download for reference. Friends in need can refer to

This article describes an example of using picker to implement the time and date selection box function in the WeChat applet. Share it with everyone for your reference, as follows:

Key code

① index.wxml

<picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange">
  当前城市选择：{{picker1Range[picker1Value]}}
</picker>
<picker mode="time" value="{{timeValue}}" start="00:00" end="24:00" bindchange="timePickerBindchange">
 当前时间选择: {{timeValue}}
</picker>
<picker mode="date" value="{{dateValue}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange">
 当前日期选择: {{dateValue}}
</picker>

Copy after login

② index.js

Page({
 data:{
  // text:"这是一个页面"
  picker1Value:0,
  picker1Range:[&#39;北京&#39;,&#39;上海&#39;,&#39;广州&#39;,&#39;深圳&#39;],
  timeValue:&#39;08:08&#39;,
  dateValue:&#39;2016-10-13&#39;
 },
 normalPickerBindchange:function(e){
  this.setData({
   picker1Value:e.detail.value
  })
 },
 timePickerBindchange:function(e){
  this.setData({
   timeValue:e.detail.value
  })
 },
 datePickerBindchange:function(e){
  this.setData({
   dateValue:e.detail.value
  })
 }
})

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

About automated construction in Webpack (detailed tutorial)

How to implement image uploading in WeChat applet, etc. A series of functions

How to build a universal data simulation framework for the front end (detailed tutorial)

How to implement flux on knockoutjs

How to implement seamless scrolling components using vue

The above is the detailed content of How to implement time function in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!