微信小程序时间选择器自定义组件

微信小程序官方

方法： 官方提供的 picker、picker-view、picker-view-column 标签（具体点开头官方链接）

一份简单好用的代码(在下方展示)，根据需求可修改使用(代码风格很差，自己可优化)

以下是组件，是完整的(js、wxml、wxss、json)，可直接复制代码到 components 中 例如：

• components
  – TimeComponent（组件）

    		-- TimeComponent.js
    		
    		-- TimeComponent.json
    		
    		-- TimeComponent.wxml
    		
    		-- TimeComponent.wxss
  

  对应复制进去先看效果，自己优化

• pages
  – index （页面）

    		-- index.js
    		
    		-- index.json
    		
    		-- index.wxml
    		
    		-- index.wxss
  

在最后会有页面引用代码

//组件内 js 例：组件名为 TimeComponent.js
const date = new Date()
const years = []
const months = []
const days = []
const hourss = []
const minutes = []
for (let i = date.getFullYear(); i <=2066 ; i++) {
    years.push(i)
}
for (let i = 1; i <= 12; i++) { 
    if(i<10) i = "0"+i
    months.push(i)
}
for (let i = 1; i <= 31; i++) {
    if(i<10) i = "0"+i
    days.push(i)
}
// 时
for (var i = 0; i < 24; i++) {
    if(i<10) i = "0"+i
    hourss.push(i);
}
// 分
for (var i = 0; i < 60; i ++) {
    if(i<10) i = "0"+i
    minutes.push(i);
}
let year; // 年
let month; //  月
let day; // 日
let hours; // 时
let minute; // 分
Component({
    properties: {
        times: {
            type: Object,
            value: {}
        }
    },
    data: {
        years,
        months,
        days,
        hourss,
        minutes,
        value: [0, 0, 0,0,0],
    },
    ready() {
        /**
         * 以下代码可能太繁琐了，可以自己处理优化下代码。
         * 主要功能就是，在点击使用组件的时候，每次进来都展示当前时间，任何时候点击都展示当前点击时候的时				       间。
         */
            const s = this.properties.times;
            const {value, years, months, days, hourss, minutes} = this.data;
            const yearIndex = years.findIndex(v => v == s.year);
            const monthIndex = months.findIndex(v => v == s.month);
            const dayIndex = days.findIndex(v => v == s.day);
            const hoursIndex = hourss.findIndex(v => v == s.hours);
            const minuteIndex = minutes.findIndex(v => v == s.minute);
            value[0] = yearIndex;
            value[1] = monthIndex;
            value[2] = dayIndex;
            value[3] = hoursIndex;
            value[4] = minuteIndex;
            this.year = years[value[0]];
            this.month = months[value[1]];
            this.day = days[value[2]];
            this.hours = hourss[value[3]];
            this.minute = minutes[value[4]];
            this.setData({value});
    },
    methods: {
        /**
         * 关闭当前组件
        */  
        handleCancle() {
            this.triggerEvent('handleCancle')
        },
        /**
         * 监听选择时间
        */
        bindChange(e) {
            const val = e.detail.value;
            this.setData({
              year: this.data.years[val[0]],
              month: this.data.months[val[1]],
              day: this.data.days[val[2]],
              hours: this.data.hourss[val[3]],
              minute: this.data.minutes[val[4]],
            })
        },
        handleOk() {
            console.log(this.year,'years')
            const {year, month, day, hours, minute} = this;
            // 打印，查看后可删除掉
            console.log(`${year}-${month}-${day} ${hours}-${minute}`,);
            console.log(`${year}年${month}月${day}日 ${hours}时${minute}分`);
            this.handleCancle(); // 调用关闭函数，关闭组件
            /**
             * 以下方法可把选择好的时间传给父组件(调用当前的组件的页面)如果可用打开注释，不可用删掉即可。
             * 注意：调用一下方法，必须在父组件标签上定义 bind:方法名="方法名" 例如：bind:handleTimeChoice="handleTimeChoice"
             * this.triggerEvent('handleTimeChoice', {year, month, day, hours, minute});
            */
        }
    }
})

<!--组件内 wxml 例：组件名为 TimeComponent.wxml-->
<view class="container">
    <view class="page-body">
        <view class="selected-date">
            <view bindtap="handleCancle" style="color: #999999">取消</view>
            <view bindtap="handleOk" style="color: #EA5504">确定</view>
        </view>
        <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;background: #ccc" value="{{value}}" bindchange="bindChange">
            <picker-view-column>
                <view wx:for="{{years}}" wx:key="{{years}}" style="line-height: 50px; text-align: center;">{{item}}年</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{months}}" wx:key="{{months}}" style="line-height: 50px; text-align: center;">{{item}}月</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{days}}" wx:key="{{days}}" style="line-height: 50px; text-align: center;">{{item}}日</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{hourss}}" wx:key="{{hourss}}" style="line-height: 50px; text-align: center;">{{item}}时</view>
            </picker-view-column>
            <picker-view-column>
                <view wx:for="{{minutes}}" wx:key="{{minutes}}" style="line-height: 50px; text-align: center;">{{item}}分</view>
            </picker-view-column>
        </picker-view>
    </view>
</view>

<!--组件内 wxss 例：TimeComponent.wxss-->
.container {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;
}
.selected-date {
    padding: 20rpx 40rpx;
    display: flex;
    background-color: #FFFFFF;
    justify-content: space-between;
}

// 组件内 json  例：TimeComponent.json
{
    "component": true,
    "usingComponents": {}
}

以下是页面调用组件(使用方法)

可以当作父组件，要引入子组件(时间选择器组件)

// 页面 index.js
Page({
  data: {
    picker: false,
    times: null,
  },
  onLoad() {},
  handleTimeComponent() {
  /*
  * 下面的 new Date() 放在这里，没有放在全局的原因
  * 是因为，每次点击可以拿到当前最新时间，如果放在全局，只能拿到进入页面的时间，后面的时间不会变化。
  */
    const date = new Date()
    this.setData({times: {year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate(), hours: date.getHours(), minute: date.getMinutes()},picker: true});
  },
  handleCancle() {
    this.setData({picker: false})
  }
})

<!-- 页面 index.wxml-->
<view>
    <text bindtap="handleTimeComponent">选择时间</text>
	<view wx:if="{{picker}}" class="timeChoiceStyle">  
	  <component-time times="{{times&&times}}" bind:handleCancle="handleCancle" bind:handleTimeChoice="handleTimeChoice"/>
	</view>
</view>

<!--页面 index.wxss-->
.timeChoiceStyle {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

<!--页面 index.json-->
// 例如：组件名 TimeComponent -> 下面有 TimeComponent.js TimeComponent.wxml TimeComponent.wxss TimeComponent.json
// 直接引入到目录即可，不用引入后缀名，否则会报错
{
  "usingComponents": {
    "time-component": "../../components/TimeComponent"
  }
}