钉钉小程序时间选择器

最新推荐文章于 2022-10-17 18:24:23 发布

C1oak

最新推荐文章于 2022-10-17 18:24:23 发布

阅读量2.2k

点赞数 1

文章标签：小程序 js html javascript 前端

本文链接：https://blog.csdn.net/C1oak/article/details/110382034

版权

钉钉小程序时间选择器

前言
一、引入ColorUI
二、使用步骤
参考

前言

提示：找了一圈没找到钉钉相关的组件,结合ColorUI实现了一个。效果如下。
在这里插入图片描述

一、引入ColorUI

ColorUI是一个小程序样式组件库,引入ColorUI主要是用到他的底部模态弹窗,结合钉钉小程序的picker-view实现选择器弹框的样式

ColorUI 文档

二、使用步骤

1.页面

<view class="cu-modal bottom-modal {{modalName=='dateModal'?'show':''}}">
  <view class="cu-dialog">
    <view class="cu-bar bg-white">
      <view class="action text-blue" bindtap="hideModal">取消</view>
      <view class="action text-green" bindtap="hideModal">确定</view>
    </view>
    <view>
      <picker-view value="{{value}}" onChange="onChange">
        <picker-view-column>
          <view a:for="{{year}}" a:key="{{index}}">{{item}}</view>
        </picker-view-column>
        <picker-view-column>
          <view a:for="{{month}}" a:key="{{index}}">{{item}}</view>
        </picker-view-column>
        <picker-view-column>
          <view a:for="{{day}}" a:key="{{index}}">{{item}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>

2.逻辑

import util from "/utils/webutil";	// 注意引入路径

Page({
  data: {
    year: [],
    month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    day: [],
    value: [1, 1, 1],
    array: [],
    modalName: "dateModal"
  },
  onLoad() {
    let value = [1];
    let data = new Date();

    // 年
    let year = [];
    year[0] = Number(data.getFullYear());
    year[1] = Number(data.getFullYear()) + 1;

    // 月
    let month = Number(data.getMonth()) + 1;
    // 当前月在数组的index
    value[1] = this.data.month.indexOf(month);

    // 这个月有多少天
    let day = [];
    let maxDay = Number(util.mGetDate(year[1], month));
    // 动态添加当前月的所有天数
    for (let i = 1; i <= maxDay; i++) {
      day.push(i);
    }
    // 今天在数组的index
    value[2] = day.indexOf(data.getDate());
    // for(){}
    this.setData({
      year,
      day,
      value
    });
    this.setData({
      array: [year, month, day]
    });
  },
  onChange(e) {
    // y用户改变月份后 天数对着改变
    let year = this.data.year[e.detail.value[0]];
    let month = this.data.month[e.detail.value[1]];
    // 这个月有多少天
    let day = [];
    let maxDay = Number(util.mGetDate(year, month));
    // 动态添加当前月的所有天数
    for (let i = 1; i <= maxDay; i++) {
      day.push(i);
    }
    this.setData({
      value: e.detail.value,
      day
    });
  }
});

3.工具类(WebUtil)

//获取当前时间戳
function getTimeStamp() {
  return new Date().getTime();
}
//通过当前时间转换成时间戳
function transTimeToStamp(x) {
  return new Date(x).getTime();
}
/**
 * 时间戳或时间 格式化
 * 两个参数：
 * 第一个参数：可选，时间或时间戳，默认为当前时间。第二个参数：可选，转换的格式，默认为YYYY-MM-DD hh:mm:ss。
 * 不补0：YYYY-M-D h:m:s 2018-1-1 0:0:0
 * 加入星期：YYYY-MM-DD www hh:mm:ss 2018-01-01 星期一 00:00:00
 * 加入周：YYYY-MM-DD ww hh:mm:ss 2018-01-01 周一 00:00:00
 */
function formatTime(date, fmt) {
  date = date || new Date();
  date =
    date instanceof Date || typeof date == "number"
      ? new Date(date)
      : new Date();
  fmt = fmt || "YYYY-MM-DD hh:mm:ss";
  var obj = {
      Y: date.getFullYear(),
      M: date.getMonth() + 1,
      D: date.getDate(),
      w: date.getDay(),
      h: date.getHours(),
      m: date.getMinutes(),
      s: date.getSeconds()
    },
    week = ["日", "一", "二", "三", "四", "五", "六"];
  for (var i in obj) {
    fmt = fmt.replace(new RegExp(i + "+", "g"), function(e) {
      var itemStr = obj[i] + "";
      if (i == "w") return (e.length > 2 ? "星期" : "周") + week[itemStr];
      for (var j = 0, len = itemStr.length; j < e.length - len; j++)
        itemStr = "0" + itemStr;
      return itemStr;
    });
  }
  return fmt;
}
/**
 * 时间戳转换为时分秒
 * 两个参数：
 * 第一个参数：可选，秒数，默认为0。第二个参数：可选，转换的格式，默认为hh: mm: ss。
 * 不补0 h: m: s 0:0:0
 * 加入天：DD天hh: mm: ss 06天06:06:06
 */
function formatTimestamp(date, fmt) {
  date = date / 1000 || 0;
  fmt = fmt || "hh:mm:ss";
  var obj;
  function setObj(h, m) {
    obj = {
      D: parseInt(date / 60 / 60 / 24),
      h: h == 1 ? parseInt(date / 60 / 60) % 24 : parseInt(date / 60 / 60),
      m: m == 1 ? parseInt(date / 60) % 60 : parseInt(date / 60),
      s: parseInt(date) % 60
    };
  }
  fmt.indexOf("h") == -1
    ? setObj(0, 0)
    : fmt.indexOf("D") == -1
    ? setObj(0, 1)
    : setObj(1, 1);
  for (var i in obj) {
    fmt = fmt.replace(new RegExp(i + "+", "g"), function(e) {
      var itemStr = obj[i] + "";
      for (var j = 0, len = itemStr.length; j < e.length - len; j++)
        itemStr = "0" + itemStr;
      return itemStr;
    });
  }
  return fmt;
}
/**
 * 日期格式化
 * @param value 格式
 * @returns {*}
 */
function transTime(value) {
  if (value.length == 14) {
    return (
      value.substring(8, 10) +
      ":" +
      value.substring(10, 12) +
      ":" +
      value.substring(12, 14)
    );
  } else if (value.length == 8) {
    return (
      value.substring(0, 4) +
      "年" +
      value.substring(4, 6) +
      "月" +
      value.substring(6, 8) +
      "日"
    );
  } else if (value.length == 6) {
    return value.substring(0, 4) + "/" + value.substring(4, 6);
  } else {
    return value;
  }
}
/**
 * 一个月有多少天
 * 第一个参数：年 第二个参数 月
 */
function mGetDate(year, month) {
  var date = new Date(year, month, 0);
  return date.getDate();
}
//去处空格
function trimString(x) {
  return x.replace(/\s+/g, "");
}
//alert提示
function showAlert(title, content, buttonText) {
  dd.alert({
    title: title || "温馨提示",
    content: content || "似乎出了点问题",
    buttonText: buttonText || "我知道了"
  });
}
//confirm确认
function showConfirm(title, content, confirmButtonText, cancelButtonText) {
  dd.confirm({
    title: title || "温馨提示",
    content: content || "请确认？",
    confirmButtonText: confirmButtonText || "确定",
    cancelButtonText: cancelButtonText || "取消",
    success: result => {
      return result.confirm;
    }
  });
}
//toast提示
function showToast(type, content, duration) {
  dd.showToast({
    type: type || "none", //toast 类型，展示相应图标，默认 none，支持 success / fail / exception / none
    content: content || "操作成功",
    duration: duration || 3000
  });
}
//loading状态
function showLoading(content, delay) {
  dd.showLoading({
    content: content || "加载中...",
    delay: delay || 1000
  });
}
//设置title
function setTitle(title, backgroundColor) {
  dd.setNavigationBar({
    title: title || "bitmagic",
    backgroundColor: backgroundColor || "#108ee9"
  });
}
function hideLoading() {
  dd.hideLoading();
}
function getTime() {
  var mon, day, now, hour, min, ampm, time, str, tz, end, beg, sec;
  var data = {};
  /*
  mon = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
          "Sep", "Oct", "Nov", "Dec");
          */
  mon = new Array(
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月"
  );
  /*
  day = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
  */
  day = new Array(
    "星期天",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  );
  now = new Date();
  hour = now.getHours();
  min = now.getMinutes();
  sec = now.getSeconds();
  if (hour < 10) {
    hour = "0" + hour;
  }
  if (min < 10) {
    min = "0" + min;
  }
  if (sec < 10) {
    sec = "0" + sec;
  }
  data.time = hour + ":" + min + ":" + sec;
  data.currenttime =
    now.getFullYear() +
    "年" +
    mon[now.getMonth()] +
    now.getDate() +
    "日" +
    " " +
    hour +
    ":" +
    min +
    ":" +
    sec;
  data.week = day[now.getDay()];

  return data;
}
module.exports = {
  formatTime: formatTime,
  formatTimestamp: formatTimestamp,
  trimString: trimString,
  showAlert: showAlert,
  showConfirm: showConfirm,
  showToast: showToast,
  showLoading: showLoading,
  setTitle: setTitle,
  hideLoading: hideLoading,
  transTime: transTime,
  getTimeStamp: getTimeStamp,
  transTimeToStamp: transTimeToStamp,
  getTime: getTime,
  mGetDate: mGetDate
};

参考

钉钉小程序时间选择框