网站首页 > 博客 > 正文

前端封装小程序时间组件（精确到时）

脱壳的蜗牛博客 2024-03-21 1 0

在components中创建子组件date

wxml文件：

请选择

js文件

const DatePickerUtil = require('../utils/DatePicker')根据自己文件存放路径进行引入（DatePicker文件放在下面了）

const DatePickerUtil = require('../utils/DatePicker')

const date = new Date();

const year = [];

const month = [];

const day = [];

const hour = [];

//获取年

for (let i = date.getFullYear(); i <= 3300; i++) {

year.push("" + i+"年");

}

//获取月份

for (let i = 1; i <= 12; i++) {

if (i < 10) {

i = "0" + i;

}

month.push("" + i+"月");

}

//获取日期

for (let i = 1; i <= 31; i++) {

if (i < 10) {

i = "0" + i;

}

day.push("" + i+'日');

}

//获取小时

for (let i = 0; i < 24; i++) {

if (i < 10) {

i = "0" + i;

}

hour.push("" + i+"时");

}

Page({

data: {

time: '',

multiArray: [year, month, day, hour],

multiIndex: [0, date.getMonth(), date.getDate()-1, date.getHours()],//显示当前时间

onLoad: function() {

console.log();

//设置默认的年份

this.setData({

choose_year: this.data.multiArray[0][0]

})

bindMultiPickerChange: function (e) { //时间日期picker选择改变后，点击确定

this.setData({

multiIndex: e.detail.value

})

const index = this.data.multiIndex; // 当前选择列的下标

const year = this.data.multiArray[0][index[0]];

const month = this.data.multiArray[1][index[1]];

const day = this.data.multiArray[2][index[2]];

const hour = this.data.multiArray[3][index[3]];

this.setData({

time: year + month + day + hour,

year: year, //记录选择的年

month: month, //记录选择的月

day: day, //记录选择的日

hour: hour, //记录选择的时

})

this.triggerEvent('myevent',year + month + day + hour)

bindMultiPickerColumnChange: function (e) { //监听picker的滚动事件

let getCurrentDate = DatePickerUtil.getCurrentDate();//获取现在时间

let currentYear = parseInt(getCurrentDate.substring(0, 4));

let currentMonth = parseInt(getCurrentDate.substring(5, 7));

let currentDay = parseInt(getCurrentDate.substring(8, 10));

let currentHour = parseInt(getCurrentDate.substring(11, 13));

if (e.detail.column == 0) {//修改年份列

let yearSelected = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);//当前选择的年份

this.setData({

multiIndex: [0, 0, 0, 0, 0],//设置pickerIndex

year: yearSelected //当前选择的年份

});

if (yearSelected == currentYear) {//当前选择的年份==当前年份

var loadPickerData = DatePickerUtil.loadPickerData();

this.setData({

multiArray: loadPickerData,//picker数组赋值

multiIndex: [0, 0, 0, 0, 0] //设置pickerIndex

});

} else { // 选择的年份！=当前年份

// 处理月份

let monthArr = DatePickerUtil.loadMonths(1, 12)

// 处理日期

let dayArr = DatePickerUtil.loadDays(currentYear, currentMonth, 1)

// 处理hour

let hourArr = DatePickerUtil.loadHours(0, 24);

// 给每列赋值回去

this.setData({

['multiArray[1]']: monthArr,

['multiArray[2]']: dayArr,

['multiArray[3]']: hourArr,

});

}

if (e.detail.column == 1) {//修改月份列

let mon = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //当前选择的月份

this.setData({

month: mon // 记录当前列

})

if (mon == currentMonth) {//选择的月份==当前月份

if (this.data.year == currentYear) {

// 处理日期

let dayArr = DatePickerUtil.loadDays(currentYear, mon, currentDay)

// 处理hour

let hourArr = DatePickerUtil.loadHours(currentHour, 24);

this.setData({

['multiArray[2]']: dayArr,

['multiArray[3]']: hourArr,

})

} else {

// 处理日期

let dayArr = DatePickerUtil.loadDays(this.data.year, mon, 1)

// 处理hour

let hourArr = DatePickerUtil.loadHours(0, 24);

this.setData({

['multiArray[2]']: dayArr,

['multiArray[3]']: hourArr,

});

}

} else { // 选择的月份！=当前月份

// 处理日期

let dayArr = DatePickerUtil.loadDays(this.data.year, mon, 1) // 传入当前年份，当前选择的月份去计算日

// 处理hour

let hourArr = DatePickerUtil.loadHours(0, 24);

console.log(dayArr,'日期');

this.setData({

['multiArray[2]']: dayArr,

['multiArray[3]']: hourArr,

});

}

if (e.detail.column == 2) {//修改日

let dd = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);//当前选择的日

this.setData({

day: dd

})

if (dd == currentDay) {//选择的日==当前日

if (this.data.year == currentYear && this.data.month == currentMonth) {//选择的是今天

// 处理hour

let hourArr = DatePickerUtil.loadHours(currentHour, 24);

this.setData({

['multiArray[3]']: hourArr,

});

} else { //选择的不是今天

// 处理hour

let hourArr = DatePickerUtil.loadHours(0, 24);

this.setData({

['multiArray[3]']: hourArr,

});

}

} else { // 选择的日！=当前日

// 处理hour

let hourArr = DatePickerUtil.loadHours(0, 24);

this.setData({

['multiArray[3]']: hourArr,

});

}

if (e.detail.column == 3) {//修改时

let hh = parseInt(this.data.multiArray[e.detail.column][e.detail.value]); //当前选择的时

this.setData({

hour: hh

})

}

var data = {

multiArray: this.data.multiArray,

multiIndex: this.data.multiIndex

};

data.multiIndex[e.detail.column] = e.detail.value; //将值赋回去

this.setData(data); //将值赋回去

}

})

this.triggerEvent('myevent',year + month + day + hour)

调用 this.triggerEvent向父组件传递参数事件

json文件

{

"component": true,

"usingComponents": {}

}

父组件

bind:myevent="onMyEvent"为引用的子组件事件

onMyEvent(e) {

console.log(e, 'e');

引用子组件

{

"usingComponents": {

"date":"../../components/date"

}

DatePicker文件

const formatNumber = n => {

n = n.toString()

return n[1] ? n : '0' + n

}

function getCurrentDate(){// 获取当前时间

let date = new Date();

let currentYears=date.getFullYear();

let currentMonths=date.getMonth()+1;

let currentDay=date.getDate();

let currentHours=date.getHours();

let currentMinute=date.getMinutes();

var year=[currentYears].map(formatNumber)

var mm=[currentMonths].map(formatNumber)

var dd=[currentDay].map(formatNumber)

var hh=[currentHours].map(formatNumber)

var min=[currentMinute].map(formatNumber)

// return year+'年'+mm+'月'+dd+'日'+hh+':'+min;

return year+'年'+mm+'月'+dd+'日'+hh;

}

function GetMultiIndex(){ //一点开picker的选中设置

return [0,0,0,0];

// return [0,0,0,0,0]; //现在全部列，默认选第一个选项,其实这一步多余，可以直接在data里面定义

}

function loadYears(startYear,endYear){//获取年份

/**

* params参数

* startYear 当前年份

* endYear 循环结束月份，比如 5 年内 newDate().getFullYear() + 4，客户说只能预约两年内

* return 年份数组

let years=[];

for (let i = startYear; i <= endYear; i++) {

years.push("" + i+"年");

}

// console.log(years,'years');

return years;//返回年份数组

}

function loadMonths(startMonth,endMonth){//获取月份

// console.log(startMonth,endMonth,'startMonth,endMonth');

/**

* params参数

* startMonth 当前月份

* endMonth 循环结束月份，一般为 12个月

* return 月份数组

let months=[];

for (let i = startMonth; i <= endMonth; i++) {

if (i < 10) {

i = "0" + i;

}

months.push("" + i+"月");

}

// console.log(months,'months');

return months;//返回月份数组

}

function loadDays(yearSelected,selectedMonths,startDay){ //获取日期

/**

* params参数

* currentYears 当前年份

* selectedMonths 当前选择的月份

* startDay 循环开始日一般为1号，希望从当前月份开始，startDay=currentDay

* return 日期数组

// console.log(currentYears,selectedMonths,startDay,'111');

let days=[];

if (selectedMonths == 1 || selectedMonths == 3 || selectedMonths == 5 || selectedMonths == 7 || selectedMonths == 8 || selectedMonths == 10 || selectedMonths == 12) { //判断31天的月份，可以用正则简化

for (let i = startDay; i <= 31; i++) {

if (i < 10) {

i = "0" + i;

}

days.push("" + i+'日');

}

} else if (selectedMonths == 4 || selectedMonths == 6 || selectedMonths == 9 || selectedMonths == 11) { //判断30天的月份

for (let i = startDay; i <= 30; i++) {

if (i < 10) {

i = "0" + i;

}

days.push("" + i+'日');

}

} else if (selectedMonths == 2) { //判断2月份天数

console.log('2月');

let year = yearSelected

console.log(year,'year');

if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {//闰年

for (let i = startDay; i <= 29; i++) {

if (i < 10) {

i = "0" + i;

}

days.push("" + i+'日');

}

} else {//不是闰年

for (let i = startDay; i <= 28; i++) {

if (i < 10) {

i = "0" + i;

}

days.push("" + i+'日');

}

// console.log(days,'days');

return days;//返回日期数组

}

function loadHours(startHour,endHour){//获取小时

/**

* params参数

* startHour 循环开始小时一般为 0点，希望从当前小时开始 startHour=currentHours

* endHour 循环当前小时 ,一般为24个小时

* return 小时数组

let hours=[];

for (let i = startHour; i < endHour ; i++) {

if (i < 10) {//看需求要不要加在前面+‘0’

i = "0" + i;

}

hours.push("" + i+"时");

}

return hours;//返回小时数组

}

function loadMinutes(startMinute,endMinute){//获取分钟

/**

* params参数

* startMinute 循环开始分钟一般为 0 开始，从当前分钟开始 startMinute=currentMinutes

* endMinute 循环当前秒，一般为60分钟

* return 分钟数组

let minutes=[];

for (let i = startMinute; i < endMinute ; i++) {

if (i < 10) {

i = "0" + i;

}

minutes.push("" + i+"分");

}

return minutes;//返回分钟数组

}

//我没有用到秒，可以参考分钟的写法

function loadPickerData(){ //将Picker初始数据，开始时间设置为当前时间

let date1 = new Date();

let currentYears=date1.getFullYear();

let currentMonths=date1.getMonth()+1;

let currentDay=date1.getDate();

let currentHours=date1.getHours();

// let currentMinute=date1.getMinutes();

// 下面调用自定义方法

//获取年份 loadYears(startYear,endYear)

//获取月份 loadMonths(startMonth,endMonth)

//获取日期 loadDays(currentYears,currentMonths,startDay)

//获取小时 loadHours(startHour,endHour)

//获取分钟 loadMinutes(startMinute,endMinute)

let years = loadYears(currentYears,date1.getFullYear() + 100) //客户说只能预约两年内,+1

let months = loadMonths(currentMonths,12)

let days = loadDays(currentYears,currentMonths,currentDay)

let hours = loadHours(currentHours,24)

// let minutes = loadMinutes(currentMinute,60)

// return [years, months, days, hours, minutes]

return [years, months, days, hours]

}

//导出

module.exports = {

loadPickerData:loadPickerData,

getCurrentDate:getCurrentDate,

GetMultiIndex:GetMultiIndex,

loadYears:loadYears,

loadMonths:loadMonths,

loadDays:loadDays,

loadHours:loadHours,

loadMinutes:loadMinutes

}

文章引用：(6条消息) [微信小程序] 原生小程序picker组件实现时间日期的选择_小程序 picker date_iChangebaobao的博客-CSDN博客

微信小程序之picker选择器实现时间日期的选择（已修改） - 简书 (jianshu.com)

精彩链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。

本文由用户于 2024-03-21 发布在夸智网，如有疑问，请联系我们。
本文链接：https://www.kuazhi.com/post/713532576.html

夸智网

前端封装小程序时间组件（精确到时）

开发语言 python实现一个简单的桌面倒计时小程序

java 基于微信小程序的校车购票小程序（附开题报告+源码）

发表评论取消回复

夸智网

前端 封装小程序时间组件（精确到时）

开发语言 python实现一个简单的桌面倒计时小程序

java 基于微信小程序的校车购票小程序（附开题报告+源码）

相关文章

发表评论取消回复

前端封装小程序时间组件（精确到时）