2025年3月17日 星期一 甲辰(龙)年 月十六 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > 小程序

小程序实现日期时间控件picker

时间:11-10来源:作者:点击数:19

小程序自带的组件中有日期跟时间的picker,但没有日期+时间picker组件,这个组件不是很难,比较难的地方是要根据不同年份(是否闰年)跟月份决定一个月里有多少天。

1、date-time-picker.wxml文件

  • <picker mode="multiSelector" value="{{valueArray}}" range="{{rangeValues}}" bindcolumnchange="handleColumnChange" bindchange="handleValueChange" bindcancel="handleCancel">
  • <slot></slot>
  • </picker>

date-time-picker.js文件,由代码可知,组件对外属性是value接收的是日期字符串(YYYY-MM-DDHH:mm:ss),还有dateValue接收的是一个Date对象,日期修改时触发change事件,把date跟dateString传入事件参数e.detail中

  • const leftPad0 = function(v, n) {
  • !v && v = ""// v || v = "" // v = v || " "
  • let prefix = "";
  • for (let i = 0; i < n; i++) {
  • prefix += "0";
  • }
  • return (prefix + v).substr(-n);
  • };
  • const stringToDate = function(str) {
  • str = str.replace(/-/g, "/");
  • return new Date(str);
  • };
  • const isLeapYear = function(year) {
  • if (((year % 4) == 0) && ((year % 100) != 0) || ((year % 400) == 0)) {
  • return true;
  • }
  • return false;
  • };
  • const now = new Date();
  • const years = [];
  • const beginYear = 1990;
  • for (var i = beginYear; i <= now.getFullYear(); i++) {
  • years.push(i + "年");
  • }
  • const months = [];
  • for (var i = 0; i < 12; i++) {
  • months.push(leftPad0(i + 1, 2) + "月");
  • }
  • const days = [];
  • for (var i = 0; i < 31; i++) {
  • days.push(leftPad0(i + 1, 2) + "日");
  • }
  • const hours = [];
  • for (var i = 0; i < 24; i++) {
  • hours.push(leftPad0(i, 2) + "时");
  • }
  • const minutes = [];
  • for (var i = 0; i < 60; i++) {
  • minutes.push(leftPad0(i, 2) + "分");
  • }
  • Component({
  • /**
  • * 组件的属性列表
  • */
  • properties: {
  • value: String,
  • dateValue: {
  • type: Date
  • }
  • },
  • /**
  • * 组件的初始数据
  • */
  • data: {
  • valueArray: [0, 0, 0, 0, 0],
  • rangeValues: [
  • years,
  • months,
  • days,
  • hours,
  • minutes
  • ],
  • pickerYear: beginYear,
  • pickerMonth: 1
  • },
  • observers: {
  • value: function(v) {
  • this.setData({
  • valueArray: this._dateToValueArray(stringToDate(v))
  • })
  • },
  • dateValue: function(date) {
  • this.setData({
  • valueArray: this._dateToValueArray(date)
  • })
  • },
  • valueArray: function(v) {
  • this._settMonthDays(v[0] + beginYear, v[1] + 1);
  • }
  • },
  • /**
  • * 组件的方法列表
  • */
  • methods: {
  • _dateToValueArray(date) {
  • return [date.getFullYear() - beginYear, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()];
  • },
  • _settMonthDays(year, month) {
  • let monthDays = 31;
  • switch (month) {
  • case 2:
  • monthDays = 28;
  • if (isLeapYear(year)) {
  • monthDays = 29;
  • }
  • break;
  • case 4:
  • case 6:
  • case 9:
  • case 11:
  • monthDays = 30;
  • break;
  • }
  • let days = [];
  • for (let i = 0; i < monthDays; i++) {
  • days.push(leftPad0(i + 1, 2) + "日");
  • }
  • this.setData({
  • pickerYear: year,
  • pickerMonth: month,
  • "rangeValues[2]": days
  • });
  • },
  • handleCancel(e) {
  • this.setData({
  • valueArray: this.data.valueArray
  • })
  • },
  • handleColumnChange(e) {
  • if (e.detail.column > 1) return false;
  • let year = this.data.pickerYear;
  • let month = this.data.pickerMonth;
  • if (e.detail.column == 0) {
  • year = e.detail.value + beginYear;
  • } else if (e.detail.column == 1) {
  • month = e.detail.value + 1;
  • }
  • this._settMonthDays(year, month);
  • },
  • handleValueChange(e) {
  • let dateArr = [];
  • for (let i in e.detail.value) {
  • let v = this.data.rangeValues[i][e.detail.value[i]];
  • dateArr.push(v.toString().substr(0, v.length - 1))
  • }
  • let dateString = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + " " + dateArr[3] + ":" + dateArr[4] + ":00";
  • this.triggerEvent('change', {
  • date: stringToDate(dateString),
  • dateString
  • })
  • }
  • }
  • })
  • //test.json
  • {
  • "usingComponents": {
  • "date-time-picker": "/components/date-time-picker2/date-time-picker"
  • }
  • }
  • //test.wxml
  • <date-time-picker value="{{value}}" bind:change="handleChange">时间:{{value}}</date-time-picker>
  • //test.js
  • Page({
  • /**
  • * 页面的初始数据
  • */
  • data: {
  • value: "2019-11-11 11:11:00"
  • },
  • handleChange(e) {
  • console.log(e)
  • this.setData({
  • value: e.detail.dateString
  • })
  • }
  • })
在这里插入图片描述
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐