微信小程序 picker封装年月日时分秒插件

RanShakaLove

已于 2022-06-28 10:02:18 修改

阅读量1.6k

点赞数

分类专栏：微信小程序文章标签：微信小程序组件时间选择器多级联动事件处理

于 2022-06-28 09:59:13 首次发布

本文链接：https://blog.csdn.net/qq_44795810/article/details/125496713

版权

微信小程序 picker 封装年月日时分秒插件

html

<picker class="dateTimePicker"  mode="multiSelector" value="{
   {dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{
   {dateTimeArray}}">
  <view class="tui-picker-detail wrap column-center" style="text-align:right;">
    <text style="color:{
   {(dateTimeWhole||time)?'#333333':'#999999'}};">{
   {
   dateTimeWhole || time || params.placeholder ||"请选择时间"}}</text>
  </view>
</picker>

js

const App = getApp();
const dateTimePicker = require('../../utils/datePicker.js')
Component({
   
  options: {
   
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
   
    time: String,
    params: {
   
      type: Object,
      value: {
   
        placeholder: '请选择时间',
        startDateTime: '2011-03-30 00:00',
        endDateTime: '2032-03-30 00:00',
        pText: ''
      }
    },
  },
  observers: {
   
    'originActiveData': function (params) {
   
      let d = params.map(e => {
   
        return {
   
          time: this.getFormatDate(e.time),
          text: e.text,
          color: e.color,
        }
      })