微信小程序 年月日时分组件 时间选择

最近做自己的项目时,需要用到年月日时分的日期选择器,找了官网发现没有这种的,于是就只能自己写啦。

使用微信小程序原生packer实现 多列选择器:mode = multiSelector

废话不多,效果看图 文末附上下载链接 后续会不断优化控件 支持更多操作 用到的朋友给个star小星星吧~

2019-01-28更新 添加可以指定默认日期 修复了一些BUG git上已上传最新代码 有问题可以给我留言 谢谢

2019-02-27 添加是否允许点击属性disabled true不允许点击 false允许点击 默认false

2019-04-08 修复不添加data属性 不显示默认日期BUG

添加开始日期startDate 结束日期endDate 如果都没添加 默认显示3年, 如果只添加startDate 则结束时间为2099 如果只添加endData则开始日期为1900  目前只支持限制年份,后续会添加所有限制

2019-04-09 修复年份显示BUG

2019-04-10 添加placeholder属性 提示文字 可以默认不显示日期 添加后初始化onPickerChange 不返回数据 

2019-08-07 修改开始日期startDate 结束日期endDate 添加所有限制 之前只能限制年份 现在做到全支持 格式为2019-02-02 15:33(务必遵守)代码写的有点复杂 后期再优化吧 有BUG请尽快联系我修改,防止老年痴呆复发。。。谢谢

2019-11-20 修改页面不渲染BUG

2020-08-28 修改ios异常bug 原因ios转换日期 不识别'2019-01-01 12:37' 只识别'2019/01/01 12:37' 现已做修改 把传入日期'-'改为'/' (之前代码已做'-'改为'/'转换处理 但不知道怎么的 会丢失某一列数据 原因不明 未复现 再出现请联系我) 

感谢各位小哥哥 小姐姐的小星星 谢谢大家

 

实现思路:除了天数会跟随月份改变外,其余都为固定值 

代码如下

pickerYMDHM.js文件

// components/pickerYMDHM/pickerYMDHM.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    date: {            // 属性名
      type: null,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: null     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    startDate: {
      type: null,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: null     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    endDate: {
      type: null,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: null     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    disabled: {
      type: null,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: false     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    placeholder: {
      type: null,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: null     // 属性初始值(可选),如果未指定则会根据类型选择一个
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    pickerArray: [],//日期控件数据list
    pickerIndex: [],//日期控件选择的index
    chooseIndex: [],//日期控件确认选择的index
    chooseArray: [],//日期控件确认选择后的list
    stDate: '',//开始日期
    enDate: ''//结束日期
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _onInit() {
      let date = new Date();
      if (this.data.date != null) {
        let str = this.data.date;
        str = str.replace(/-/g, '/');
        date = new Date(str);
      }
      let pickerArray = this.data.pickerArray;
      // console.log(date.getFullYear());
      //默认选择3年内
      let year = [];
      let month = [];
      let day = [];
      let time = [];
      let division = [];
      let startDate = '';
      let endDate = ''
      let tpData = {};
      if (this.data.startDate != null && this.data.endDate == null) {
        //如果存在开始时间,则默认设置结束时间为2099
        startDate = this._getDefaultDate(this.data.startDate);
        endDate = this._getDefaultDate("2099-12-31 23:59");
        tpData = this._getModify(date, startDate, endDate);
      }
      if (this.data.endDate != null && this.data.startDate == null) {
        //如果存在结束时间,不存在开始时间 则默认设置开始时间为1900
        startDate = this._getDefaultDate("1900-01-01 00:00");
        endDate = this._getDefaultDate(this.data.endDate);
        tpData = this._getModify(date, startDate, endDate);
      }
      if (this.data.endDate != null && this.data.startDate != null) {
        startDate = this._getDefaultDate(this.data.startDate);
        endDate = this._getDefaultDate(this.data.endDate);
        tpData = this._getModify(date, startDate, endDate);
      }
      // console.log(year);
      if (this.data.startDate == null && this.data.endDate == null) {
        startDate = this._getDefaultDate("1901-01-01 00:00");
        endDate = this._getDefaultDate("2099-12-31 23:59");
        tpData = this._getModify(date, startDate, endDate);
      }
      
      if (date > endDate || date < startDate) {
        this.setData({
          placeholder: "默认日期不在时间范围内"
        })
        return;
      }
      // console.log(division);
      pickerArray[0] = tpData.year;
      pickerArray[1] = tpData.month;
      pickerArray[2] = tpData.day;
      pickerArray[3] = tpData.time;
      pickerArray[4] = tpData.division;
      let mdate = {
        date: date,
        year: date.getFullYear() + '',
        month: date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '',
        day: date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '',
        time: date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + '',
        division: date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ''
      }
      mdate.placeholder = mdate.year + '-' + mdate.month + '-' + mdate.day + ' ' + mdate.time + ':' + mdate.division;
      this.setData({
        pickerArray,
        pickerIndex: tpData.index,
        chooseIndex: tpData.index,
        chooseArray: pickerArray,
        placeholder: this.data.placeholder != null ? this.data.placeholder : mdate.placeholder,
        stDate: startDate,
        enDate: endDate
      })
      // console.log(date);
      //设置placeholder属性后 初始化不返回日期
      if (this.data.placeholder == null){
        this.triggerEvent('onPickerChange', mdate);
      }
      // console.log(this.data.pickerArray);
      // console.log(this._getNumOfDays(2018, 10));
    },
    /**
     * 
     */
    _getDefaultDate(date) {
      date = date.replace(/-/g, '/');
      return new Date(date);
    },
    /**
	 * 
	 * 获取开始日期 结束日期 中间日期
	 * @param {date} newDate 默认日期
	 * @param {date} startDate 设置开始日期
	 * @param {date} stopDate 设置结束日期
	 * @returns data 包含年月日时分数组
	 */
    _getModify(newDate, startDate, stopDate) {
      let data = {
        year: [],
        month: [],
        day: [],
        time: [],
        division: [],
        index:[0,0,0,0,0]
      }
      let nYear = newDate.getFullYear();
      let n
### 微信小程序 `picker` 组件实现年月日时分选择 #### 创建自定义日期时间选择组件 为了更好地控制样式和功能,在小程序的 `components` 目录下创建一个名为 `"datetime-picker"` 的文件夹,并在该文件夹内建立必要的 WXML 文件[^4]。 ```wxml <!-- datetime-picker/datetime-picker.wxml --> <view class="picker-container"> <picker mode="date" value="{{date}}" start="{{startDate}}" end="{{endDate}}" bindchange="bindDateChange"> <view>{{date}}</view> </picker> <picker mode="time" value="{{time}}" bindchange="bindTimeChange"> <view>{{time}}</view> </picker> </view> ``` 此结构允许分别选取日期与时间,通过两个独立的选择框来完成整个过程。对于更复杂的场景,则推荐使用 `picker-view` 来构建多列联动的效果[^2]。 #### JavaScript逻辑处理 接下来编写对应的 JS 文件来进行数据绑定以及事件监听: ```javascript // datetime-picker.js Component({ properties: { // 定义外部传入属性 }, data: { date: '请选择日期', time: '请选择时间', startDate: '', endDate: '' }, methods: { bindDateChange(e) { this.setData({ date: e.detail.value }); }, bindTimeChange(e) { this.setData({ time: e.detail.value }); } }, attached() { const now = new Date(); let year = now.getFullYear(), month = ('0' + (now.getMonth() + 1)).slice(-2), day = ('0' + now.getDate()).slice(-2); this.setData({ startDate: `${year - 70}-${month}-${day}`, endDate: `${year + 30}-${month}-${day}` }) } }) ``` 这段代码实现了基本的时间范围设定,并绑定了改变事件处理器以便更新视图中的显示值。 #### 样式调整 最后不要忘记给这个组件加上一些基础样式的修饰,让用户体验更加友好: ```css /* datetime-picker.wxss */ .picker-container{ display:flex; justify-content:center; } ``` 以上就是如何利用微信小程序内置的 `picker` 和 `picker-view` 构建一个简单的年月日时分选择器的方法[^1]。
评论 36
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值