您当前的位置: 首页 > 知识百科 > 微信小程序日期选择器怎么开发?

微信小程序日期选择器怎么开发?

时间:2023-07-01 14:05 阅读数:55 人阅读 分类:知识百科

  微信小程序日期选择器怎么开发?各位亲们在开发微信小程序的时候,避免不了微信小程序日期选择器的开发,微信小程序日期选择器怎么开发呢?接下来小编为大家介绍具体的方法方法哦。

  微信小程序日期选择器怎么开发?

  微信小程序日期选择器开发出来的效果如下:

  

  上微信小程序日期选择器开发的微信小程序代码:

  1.小程序js

  [javascript] view plaine copy//index.js

  //获取小程序应用实例

  var app = getApp()

  Page({

  data: {

  date: '2016-11-08',

  time: '12:00',

  array: ['中国', '巴西', '日本', '美国'],

  index: 0,

  },

  onLoad: function () {

  },

  // 点击时间小程序组件确定事件

  bindTimeChange: function (e) {

  this.setData({

  time: e.detail.value

  })

  },

  // 点击日期组件确定小程序事件

  bindDateChange: function (e) {

  this.setData({

  date: e.detail.value

  })

  },

  // 点击国家组件确定事件

  bindPickerChange: function (e) {

  this.setData({

  index: e.detail.value

  })

  }

  })

  ①普通选择器

  选择器用模式来区别,一般是普通选择器,e.detail.value拿到的值是选择了项的索引index,再通过array拿到值.在data里面做初始化的时候,将备选项加入array即可.

  选择时触发bindPickerChange事件,获取index.

  ②时间选择器

  mode = time时,是时间选择器.start,end分别是有效时间范围的开始和结束.格式hh:mm

  选择时触发bindTimeChange事件,获取time.

  ③日期选择器

  mode = date时,是时间选择器.start,end分别是有效日期范围的开始和结束.格式yyyy-MM-dd

  选择时触发bindDateChange事件,获取date

  微信小程序日期选择器怎么开发呢?以上就会微信小程序日期选择器开发的方法和所需要的微信小程序代码了哦,感谢各位亲们的观看,赶快来学习下吧,大家请多多关注微小乔。谢谢你的关注。

相关阅读:

微信小程序怎么播放本地音乐?

微信小程序录音授权关键代码

微信小程序下拉框开发代码