picker年月日时分秒时间选择器组件(新增插槽初始化,年月日时分秒与时分秒可配置)

ゞ浴缸里的玫瑰 2023-07-24 03:09 19阅读 0赞

1.组件页面wepy的

<style lang="scss">
    .text{
      font-size: 14px;
    }
    </style>
    <template>
      <picker class="picker-mbx" mode="multiSelector" value="{
       {dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{
       {dateTimeArray}}">
        <view class="text">
          <div v-if="selected">{
       {strTime}}</div>
          <div v-else><slot></slot></div>
        </view>
      </picker>
    </template>
    <script>
      import wepy from '@wepy/core'
      const moment = require('moment')
      import { dateTimePicker, getMonthDay, getNewDateArryByStr, withData } from '../common/time'
      const cutTimeStr = (str) => {
        const _str = str.substring(0, str.length - 1)
        return withData(_str)
      }
      wepy.component({
        props: {
          // 年月日 时分秒
          mode: {
            default: 'date'
          },
          // 暂时使用slot
          label: {
            default: '请选择时间'
          },
          // 现有值，需要时规范的时间格式
          val: {
            type: String
          }
    
        },
        watch: {
          strTime: {
            deep: true,
            handler(val) {
              console.log(val)
              if (val && this.selected) {
                this.$emit('uptime', val)
              }
            }
          }
        },
        computed: {
          strTime() {
            try {
              let dateTimeArray = this.dateTimeArray, dateTime = this.dateTime
              //新增 时分秒
              if (this.mode==='time') {
                return cutTimeStr(dateTimeArray[0][dateTime[0]]) + ':' + cutTimeStr(dateTimeArray[1][dateTime[1]]) + ':' + cutTimeStr(dateTimeArray[2][dateTime[2]])
              } else {
                return cutTimeStr(dateTimeArray[0][dateTime[0]]) + '-' + cutTimeStr(dateTimeArray[1][dateTime[1]]) + '-' + cutTimeStr(dateTimeArray[2][dateTime[2]]) + ' ' + cutTimeStr(dateTimeArray[3][dateTime[3]]) + ':' + cutTimeStr(dateTimeArray[4][dateTime[4]]) + ':' + cutTimeStr(dateTimeArray[5][dateTime[5]])
              }
            } catch (e) {
              return ''
            }
          }
        },
        data: {
          selected: false,
          dateTimeArray: [],
          dateTime: [0, 0, 0, 0, 0, 0]
        },
        ready() {
          const _str = this.val
          let hasDate = false
          if (_str) {
            hasDate = getNewDateArryByStr(new Date(_str))
          }
          let {dateTimeArray, dateTime} = dateTimePicker('', '', hasDate)
          if (this.mode==='time') {
            dateTimeArray = dateTimeArray.slice(-3)
            dateTime = dateTime.slice(-3)
            console.log(this.mode,dateTimeArray)
          }
          this.dateTimeArray = dateTimeArray
          this.dateTime = dateTime
        },
        methods: {
          changeDateTime(e) {
            const val = e.$wx.detail.value
            console.log(val)
            this.dateTime = val
            this.selected = true
          },
          changeDateTimeColumn(e) {
            console.log(e,'ss')
            const val = e.$wx.detail.value
            let arr = this.dateTime
            let dateArr = this.dateTimeArray
            arr[e.$wx.detail.column] = val
            if(this.mode!=='time'){
              dateArr[2] = getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
            }
            this.dateTimeArray = dateArr
            this.dateTime = arr
          }
        }
      })
    </script>
    <config>
      {
        "usingComponents": {
          "icon": "~@/components/icon"
        }
      }
    </config>

2.依赖的js文件

function withData(param) {
      return param < 10 ? '0' + param : '' + param
    }
    function getLoopArray(start, end, unit = '') {
      var _start = start || 0
      var _end = end || 1
      var array = []
      for (var i = _start; i <= _end; i++) {
        array.push(withData(i + unit))
      }
      return array
    }
    function getMonthDay(year, month) {
      let flag = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)
      let array = null
      switch (month) {
        case '01':
        case '03':
        case '05':
        case '07':
        case '08':
        case '10':
        case '12':
        case '1月':
        case '3月':
        case '5月':
        case '7月':
        case '8月':
        case '10月':
        case '12月':
          array = getLoopArray(1, 31, '日')
          break
        case '04':
        case '06':
        case '09':
        case '11':
        case '4月':
        case '6月':
        case '9月':
        case '11月':
          array = getLoopArray(1, 30, '日')
          break
        case '02':
        case '2月':
          array = flag ? getLoopArray(1, 29, '日') : getLoopArray(1, 28, '日')
          break
        default:
          array = '月份格式不正确，请重新输入！'
      }
      return array
    }
    function getNewDateArry() {
      // 当前时间的处理
      var newDate = new Date()
      const year = withData(newDate.getFullYear()),
        mont = withData(newDate.getMonth() + 1),
        date = withData(newDate.getDate()),
        hour = withData(newDate.getHours()),
        minu = withData(newDate.getMinutes())
      // seco = withData(newDate.getSeconds());
    
      return [year, mont, date, hour, minu]
    }
    
    /**
     * 多了单位
     * @returns {string[]}
     */
    function getNewDateArryByStr() {
      // 当前时间的处理
      var newDate = new Date()
      var year = newDate.getFullYear() + '年',
        mont = (newDate.getMonth() + 1) + '月',
        date = newDate.getDate() + '日',
        hour = newDate.getHours() + '时',
        minu = newDate.getMinutes() + '分',
        seco = newDate.getSeconds() + '秒'
    
      return [year, mont, date, hour, minu,seco]
    }
    const cutTimeStr = (str) => str.substring(0, str.length - 1)
    function dateTimePicker(startYear, endYear, date) {
      // 返回默认显示的数组和联动数组的声明
      var dateTime = [], dateTimeArray = [[], [], [], [], []]
      var start = startYear || new Date().getFullYear()
      var end = endYear || 2100
      // 默认开始显示数据
      var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArryByStr()
    
      // 处理联动列表数据
      /* 年月日 时分秒 */
      dateTimeArray[0] = getLoopArray(start, end, '年')
      dateTimeArray[1] = getLoopArray(1, 12, '月')
      const tempTime = getNewDateArry()
      dateTimeArray[2] = getMonthDay(tempTime[0], tempTime[1])
      dateTimeArray[3] = getLoopArray(0, 23, '时')
      dateTimeArray[4] = getLoopArray(0, 59, '分')
      dateTimeArray[5] = getLoopArray(0, 59, '秒')
    
      dateTimeArray.forEach((current, index) => {
        const idx = current.indexOf(defaultDate[index]) ? current.indexOf(defaultDate[index]) : 0
        dateTime.push(idx)
      })
    
      return {
        dateTimeArray: dateTimeArray,
        dateTime: dateTime
      }
    }
    module.exports = {
      dateTimePicker: dateTimePicker,
      getMonthDay: getMonthDay,
      getNewDateArry: getNewDateArry
    }

3.使用moment.js  
网址http://momentjs.cn/ 安装npm依赖包  
4.使用 引入组件

<time @uptime="upEndTime" :val="end_time">
              <span class="fz-14" v-if="end_time">{
       {end_time}}</span>
              <span class="fz-14 c9" v-else>请选择结束时间</span>
      </time>

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 picker年月日时分秒时间选择器组件(新增插槽初始化,年月日时分秒与时分秒可配置)

1.组件页面wepy的 <style lang="scss"> .text{ font-size: 14px; } </style

ゞ浴缸里的玫瑰/ 2023年07月24日 03:09/ 0 赞/ 20 阅读

相关 JS 格式化年月日时分秒

function formatDate(time) { if (time != null) { var datetime = new Date

拼搏现实的明天。/ 2022年12月20日 03:12/ 0 赞/ 333 阅读

相关 bat 格式化年月日时分秒

1、调用其他bat，并进行传参： test.bat "..\addon\7z.dll" "..\addon\8z.dll" 2、调用其他bat（新窗口打开其他bat

刺骨的言语ヽ痛彻心扉/ 2022年12月10日 08:52/ 0 赞/ 247 阅读

相关 java Date获取年月日时分秒

感谢[暖流][Link 1]的分享，原文连接地址：[点击打开链接][Link 2] package com.util; import java.t

短命女/ 2022年07月24日 04:14/ 0 赞/ 371 阅读

相关 EasyUI时间插件----年月日，年月日时分秒

input标签使用easyUI时间插件还是挺方便的，下面是我自己的一点点总结，感觉没什么，但还是写出来吧。 <……………………………………………………………………………………

﹏ヽ暗。殇╰゛Y/ 2022年06月07日 08:44/ 0 赞/ 608 阅读

相关输出年月日时分秒

1. `package cn.itcast_01;` 2. 3. `import java.util.Calendar;` 4. 5. `/` 6. ` Cal

淡淡的烟草味﹌/ 2022年05月17日 08:21/ 0 赞/ 380 阅读

相关年月日时间戳和年月日互相转换,时分秒时间戳和时分秒互相转化

其中要用的工具包: <dependency> <groupId>cn.hutool</groupId> <artifactId>

- 日理万妓/ 2022年02月27日 12:20/ 0 赞/ 576 阅读

相关 daterangepicker控件选择年月日时分秒

![Center][] $(document).ready(function(){ //注：scheduledEndTi

今天药忘吃喽~/ 2021年10月08日 05:48/ 0 赞/ 1001 阅读

相关原生Js获取年月日时分秒

代码中的now，即是当前时间。 var now = getNow(); function getNow() { var

太过爱你忘了你带给我的痛/ 2021年09月24日 14:12/ 0 赞/ 557 阅读

相关 JS获取当前时间年月日时分秒

JS获取当前时间的年月日时分秒，按照格式输出 <!DOCTYPE html> <html> <head> <meta charset="utf-...

朱雀/ 2020年10月31日 17:33/ 0 赞/ 1264 阅读