当前位置：首页 > news >正文

微信小程序封装选择年月日时分秒组件

news 来源：原创 2025/4/30 5:47:23

微信小程序自带的选择时间组件，只能选择年月日，不能选择到时分秒，需要重新封装组件。

首选封装一个为datetime-picker组件在components文件下。

datetime-picker.wxml

<view><picker disabled="{{disabled}}" mode="multiSelector" bindchange="pickerChange" bindcolumnchange="pickerColumnChange"bindcancel="pickerCancel" value="{{pickerIndex}}" range="{{pickerArray}}" range-key="{{'name'}}"><view><input placeholder="{{placeholder}}" class="weui-input" disabled="{{true}}" value="{{dateString}}"></input></view></picker>
</view>

datetime-picker.js

// components/timePicker/index.js
Component({/*** 组件的属性列表*/properties: {/*** 组件类型 date:日期(yyyy-MM-dd) time：时间(hh:mm:ss) dateTime: 日期时间(yyyy-MM-dd hh:mm:ss)*/mode: {type: String,value: 'date',observer: 'modeChange'},disabled: {type: Boolean,value: false},placeholder: String},/*** 组件的初始数据*/data: {pickerArray: [], //日期控件数据listpickerIndex: [], //日期控件选择的indexdateString: '' //页面显示日期},/*** 组件的方法列表*/methods: {modeChange: function (newVal, oldVal) {this.getPickerArray(newVal)},//补零formatNumber(n) {n = n.toString()return n[1] ? n : '0' + n},//日期时间格式化formateDateTime(arr) {let mode = this.data.modeswitch (mode) {case 'date':return arr.map(this.formatNumber).join('-')break;case 'time':return arr.map(this.formatNumber).join(':')break;case 'dateTime':return arr.slice(0, 3).map(this.formatNumber).join('-') + ' ' + arr.slice(3, 6).map(this.formatNumber).join(':')break;}},/**** 获取本月天数* @param {number} year* @param {number} month* @param {number} [day=0] 0为本月0最后一天的* @returns number 1-31*/_getNumOfDays(year, month, day = 0) {return new Date(year, month, day).getDate();},//获取pickerArraygetPickerArray(mode = this.data.mode) {let date = new Date();let pickerArray = []//年let year = [];for (let i = date.getFullYear() - 5; i <= date.getFullYear() + 5; i++) {year.push({id: i,name: i + '年'});}let currentYear = date.getFullYear();let yearIndex = year.findIndex(item => item.id == currentYear);pickerArray.push({picker: 'year',value: year,pickerIndex: yearIndex})//月let month = [];for (let i = 1; i <= 12; i++) {month.push({id: i,name: i + '月'});}pickerArray.push({picker: 'month',value: month,pickerIndex: date.getMonth(),})//日let dayNum = this._getNumOfDays(date.getFullYear(), date.getMonth() + 1);let day = [];for (let i = 1; i <= dayNum; i++) {day.push({id: i,name: i + '日'});}pickerArray.push({picker: 'day',value: day,pickerIndex: date.getDate() - 1,})//时let time = [];for (let i = 0; i <= 23; i++) {time.push({id: i,name: this.formatNumber(i)});}pickerArray.push({picker: 'time',value: time,pickerIndex: date.getHours(),})//分let minutes = [];for (let i = 0; i <= 59; i++) {minutes.push({id: i,name: this.formatNumber(i)});}pickerArray.push({picker: 'minutes',value: minutes,pickerIndex: date.getMinutes(),})//秒let seconds = [];for (let i = 0; i <= 59; i++) {seconds.push({id: i,name: this.formatNumber(i)});}pickerArray.push({picker: 'seconds',value: seconds,pickerIndex: date.getSeconds(),})let pickerIndex = []//过滤不同mode的pickerArray keyslet formatPickerArray = () => {switch (mode) {case 'date':return ['year', 'month', 'day']break;case 'dateTime':return ['year', 'month', 'day', 'time', 'minutes', 'seconds']break;case 'time':return ['time', 'minutes', 'seconds']break;}}//过滤不同mode的pickerArray valueslet pickerValues = formatPickerArray(mode)let formatPickers = []// pickerArray.filter(item =>//     pickerValues.indexOf(item.picker) >= 0// )//获取pickers选项和默认选择下标pickerArray.map(item => {if (pickerValues.indexOf(item.picker) >= 0) {pickerIndex.push(item.pickerIndex)formatPickers.push(item.value)}})this.setData({pickerArray: formatPickers,pickerIndex})//通过下标获取对应时间let currentDate = this.getPickerValue(pickerIndex)this.setData({dateString: currentDate})},getPickerValue(pickerIndex) {let date = this.data.pickerArray.map((item, index) =>// console.log(this.data.pickerArray[index][pickerIndex[index]].id, pickerIndex)this.data.pickerArray[index][pickerIndex[index]].id)let dateString = this.formateDateTime(date)return dateString},pickerChange: function (e) {let currentDate = this.getPickerValue(e.detail.value)this.setData({dateString: currentDate})let detail = {value: currentDate}this.triggerEvent('onPickerChange', detail);},//月变化时获取当月多少天pickerColumnChange: function (e) {let value = e.detaillet year = this.data.pickerArray[0][this.data.pickerIndex[0]].idif (this.data.mode !== 'time') {if (value.column === 1) {let days = this._getNumOfDays(year, value.value + 1)let day = [];for (let i = 1; i <= days; i++) {day.push({id: i,name: i + '日'});}this.data.pickerArray[2] = daythis.setData({pickerArray: this.data.pickerArray})}}},pickerCancel: function (e) {}},lifetimes: {attached() {// 在组件实例进入页面节点树时执行},detached() {// 在组件实例被从页面节点树移除时执行},ready() {this.getPickerArray()}}
});

datetime-picker.wxss

.input_base {border: 2rpx solid #ccc;padding-left: 10rpx;margin-right: 50rpx;
}.input_h30 {height: 30px;line-height: 30px;
}.col-1 {-webkit-box-flex: 1;box-flex: 1;
}

datetime-picker.json

{"component": true,"usingComponents": {}}

组件定义好之后，开始引用组件。在父组件的json中引入此组件。

父组件.json

{

    "navigationBarTitleText": "装车",

    "navigationBarBackgroundColor": "#5583FD",

    "navigationBarTextStyle": "white",

    "usingComponents": {

        "choiceimg":"/components/choiceimg/choiceimg",

        "time-picker": "/components/datetime-picker/datetime-picker"

    }

}

父组件.wxml

<time-picker mode="{{mode}}" class="picker" placeholder="请选择时间" bind:onPickerChange="bindCheckinDateChange"></time-picker>

父组件.js

在data中定义mode，是控制当前子组件是选择年月日、年月日时分秒、时分秒三种类型。

mode: 'dateTime'

在change事件中进行赋值

bindCheckinDateChange(e){

        console.log(e.detail.value,'e');

        this.setData({

            registrationdate:e.detail.value,

            "form.loading_date":e.detail.value

        })

    },