微信⼩程序⾃定义⽇期选择器（已封装成控件，可直接使⽤）由于原⽣的picker页⾯只能使⽤默认的⽆法⾃定义，在开发中有特殊需求时就需要⾃定义⽇期选择器
先看效果，页⾯可以在css⽂件中⾃定义
代码：
datePicker.js
const dateUtils = require('../../../../utils/util.js')
// 初始化⽇期模态框数据
let date = new Date();
let years = [];
let months = [];
小池的作者
let days = [];
let hours = [];
let minutes = [];
for (let i = FullYear() - 4; i <= (FullYear() + 1); i++) {
years.push(i + "年")
}
for (let i = 1; i <= 12; i++) {
if (i < 10) {
months.push("0" + i + "⽉")
} el {
months.push(i + "⽉")
}
养松鼠}
for (let i = 1; i <= 31; i++) {
if (i < 10) {
days.push("0" + i + "⽇");
} el {
days.push(i + "⽇");
}
}
for (let i = 0; i <= 23; i++) {
hours.push(i + "")
}
for (let i = 0; i <= 59; i++) {
minutes.push(i + "")
}
Component({
// options: {
// multipleSlots: true // 在组件定义时的选项中启⽤多slot⽀持
// },
properties: {
properties: {
// title: { // 属性名
// type: String, // 类型（必填），⽬前接受的类型包括：String, Number, Boolean, Object, Array, null（表⽰任意类型） // value: '' // 属性初始值（可选），如果未指定则会根据类型选择⼀个
// }
// timeValue: {南宁的大学
// type: Array,
// value: "标题"
// },
// years: {
// type: Array,
// value: "年"
// },
// months: {
// type: Array,
// value: "⽉"
// },
// days: {
// type: Array,
// value: "⽇"
// },
// hours: {
/
/ type: Array,
// value: "⼩时"
// },
// minutes: {
// type: Array,
// value: "分钟"
// }
dateItem: {
type: String,
value: "⽇期"
},
},
data: {
modalName: null,
startDate: "",
endDate: "",
urName: "",
farmerId: "",
timeValue: [2, 3, 4],
changeFlag: fal,
value: [0, 1, 1],
openFlag: true, //1⽇期控件显⽰ 2控件滚动选择底部页⾯不滚动
years: years, //时间可选范围模态框数据
months: months,
days: days,
hours: hours,
minutes: minutes,
year: '', //时间值
month: '',
day: '',
hour: '',
minute: '',
startTime: dateUtils.stampToDate(),
lectDate: ""
},
methods: {
//取消
cancelBtn() {
// iggerEvent("cancelBtn");
// iggerEvent("cancelBtn");
this.hideModal()
},
//确认
confirmBtn(e) {
if (this.data.lectDate == "") {
} el {
}
this.hideModal();
// this.bindChangeEvent();
// iggerEvent("bindChangeEvent",e.detail);
},
// 调⽤⽗组件事件
bindChangeEvent(e) {
/
/ iggerEvent("bindChangeEvent",e.detail);
console.log("datePicker", e);
let changeDate = "";
let year1 = years[e.detail.value[0]].replace("年", "-").trim();
let month1 = months[e.detail.value[1]].replace("⽉", "-").trim();
let day1 = this.data.days[e.detail.value[2]].replace("⽇", "").trim();
this.tData({
lectDate: year1 + month1 + day1
});
// console.log("year1", year1+month1+day1);
// console.log("days", days);
this.tData({
timeValue: e.detail.value
});
let val = e.detail.value;
const year = ars[val[0]];
const month = hs[val[1]];
const day = this.data.days[val[2]];
const hour = this.data.hours[val[3]];
const minute = this.data.minutes[val[4]];
//如果点击⽉份那么后⾯⽇跟着变换数据
let days = [];
蚂蚁搬家歇后语下一句
const dayNum = dateUtils.mGetDate(year.substr(0, year.length - 1), month.substr(0, month.length - 1)); for (let i = 1; i <= dayNum; i++) {
if (i < 10) {
days.push("0" + i + "⽇");
} el {
days.push(i + "⽇");
}
}
this.tData({
days,
year,
商铺转租合同month,
day,
hour,
minute,
changeFlag: true,
})
},
//显⽰
showModal: function () {
this.tData({
modalName: "DialogModal1"
})
let dateArr = this.data.dateItem.split("-");
let dateArr = this.data.dateItem.split("-");
console.log("dateArr", dateArr);
let yearNum = ArrayIndex(years, dateArr[0] + "年");
let monthNum = ArrayIndex(months, dateArr[1] + "⽉");
let dayNum = ArrayIndex(this.data.days, dateArr[2] + "⽇"); this.tData({
timeValue: [yearNum, monthNum, dayNum]
});
},
hideModal: function () {
this.tData({
modalName: null
})
},
getArrayIndex(arr, obj) {
let i = arr.length;
while (i--) {
if (arr[i] === obj) {
return i;
}
}
return -1;
}
},
});
datePicker.json
{
"component": true,
"usingComponents": {
}
}
datePicker.wxml
<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
<!-- <view class="cu-dialog">-->
<!-- <view class="cu-bar dialog_title_bg justify-end">-->
<!-- <view class="content" >请选择过滤条件</view>-->
<!-- <view class="action" bindtap="hideModal">-->
<!-- <text class="cuIcon-clo text-white"></text>-->
<!-- </view>-->
<!-- </view>-->
<!-- <slot></slot>-->
<!-- <view >⽇期选择</view>-->
<!-- ⽇期模态框 -->
<view class="date-picker-bg"></view>
<view class="date-picker-view">
<view class = "model_picker">
<view class = "button_model">
<text catchtap='cancelBtn' >取消</text>
<text catchtap='confirmBtn' >确定</text>
</view>
<view class = "cont_model">
<picker-view indicator-class="indicator-style-view"
value="{{timeValue}}" catchchange="bindChangeEvent">
<!-- 年 -->
<picker-view-column wx:if="{{years.length > 0}}">
客人英文
<view class="{{timeValue[0]==index?'pickerSelected':''}}" wx:for="{{years}}" wx:key="{{index}}" >{{item}}</view> </picker-view-column>
<!-- ⽉ -->
<picker-view-column wx:if="{{months.length > 0}}">
<view class="{{timeValue[1]==index?'pickerSelected':''}}" wx:for="{{months}}" wx:key="{{index}}" >{{item}}</view> </picker-view-column>
<!-- ⽇ -->
<picker-view-column wx:if="{{days.length > 0}}">
<view class="{{timeValue[2]==index?'pickerSelected':''}}" wx:for="{{days}}" wx:key="{{index}}" >{{item}}</view> </picker-view-column>
<!-- <!– 时 –>-->
<!-- <picker-view-column wx:if="{{hours.length > 0}}">-->
<!-- <view wx:for="{{hours}}" wx:key="{{index}}" >{{item}}</view>-->
<!-- </picker-view-column>-->
<!-- <!– 分 –>-->
<!-- <picker-view-column wx:if="{{minutes.length > 0}}">-->
<!-- <view wx:for="{{minutes}}" wx:key="{{index}}" >{{item}}</view>-->
<!-- </picker-view-column>-->
</picker-view>
志愿者工作总结</view>
</view>
</view>
</view>
datePicker.wxss
/* ==================
模态窗⼝
==================== */
.cu-modal {
position: fixed;
top: 0;
right: 0;
一周岁生日祝福语
bottom: 0;
left: 0;
z-index: 1110;
