feat: 完事date-picker

components/pi-date-picker/index.vue

@@ -51,7 +51,7 @@
           class="pi-text-center pi-h-100P"
           :indicator-style="indicatorStyle"
           :value="pickerValue"
-          @change="handleChange"
+          @change="handleDateChange"
         >
           <picker-view-column>
             <view v-for="(item, index) in years" :key="index" :style="indicatorStyle">
@@ -60,14 +60,29 @@
           </picker-view-column>
           <picker-view-column v-if="showMonth">
             <view v-for="(item, index) in months" :key="index" :style="indicatorStyle">
-              {{ item }}月
+              {{ item + 1 }}月
             </view>
           </picker-view-column>
           <picker-view-column v-if="showDay">
             <view v-for="(item, index) in days" :key="index" :style="indicatorStyle">
               {{ item }}日
             </view>
           </picker-view-column>
+          <picker-view-column v-if="showHour">
+            <view v-for="(item, index) in hours" :key="index" :style="indicatorStyle">
+              {{ item }}时
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="showMinute">
+            <view v-for="(item, index) in minutes" :key="index" :style="indicatorStyle">
+              {{ item }}分
+            </view>
+          </picker-view-column>
+          <picker-view-column v-if="showSecond">
+            <view v-for="(item, index) in seconds" :key="index" :style="indicatorStyle">
+              {{ item }}秒
+            </view>
+          </picker-view-column>
         </picker-view>
       </view>
       <!-- 顶部操作条 -->
@@ -87,6 +102,14 @@ import { getConfig } from '../../config'
 
 const TAG = 'PiDatePicker'
 const { datePicker } = getConfig()
+const FIELD_MAPS = [
+  { field: 'year', getMethod: 'years', setMethod: 'setYear' },
+  { field: 'month', getMethod: 'months', setMethod: 'setMonth' },
+  { field: 'day', getMethod: 'days', setMethod: 'setDate' },
+  { field: 'hour', getMethod: 'hours', setMethod: 'setHours' },
+  { field: 'minute', getMethod: 'minutes', setMethod: 'setMinutes' },
+  { field: 'second', getMethod: 'seconds', setMethod: 'setSeconds' }
+]
 
 export default {
   name: TAG,
@@ -141,6 +164,11 @@ export default {
       type: [Number, String, Date],
       default: datePicker.defaultValue
     },
+    // 返回的日期格式
+    format: {
+      type: String,
+      default: datePicker.format
+    },
     toolbarPosition: {
       type: String,
       default: datePicker.toolbarPosition,
@@ -328,14 +356,44 @@ export default {
       return this.$pi.common.generateArray(this.startYear, this.endYear)
     },
     months() {
-      return this.$pi.common.generateArray(1, 12)
+      return this.$pi.common.generateArray(0, 11)
     },
     days() {
       const monthDays = new Date(this.date.year, this.date.month, 0).getDate()
       return this.$pi.common.generateArray(1, monthDays)
     },
+    hours() {
+      return this.$pi.common.generateArray(0, 23)
+    },
+    minutes() {
+      return this.$pi.common.generateArray(0, 59)
+    },
+    seconds() {
+      return this.$pi.common.generateArray(0, 59)
+    },
     pickerValue() {
-      return []
+      const pickerValue = []
+      if (this.showYear && this.date.year) {
+        pickerValue.push(this.years.findIndex(m => m === parseInt(this.date.year, 10)))
+      }
+      if (this.showMonth && this.date.month) {
+        let index = this.months.findIndex(m => m === parseInt(this.date.month, 10))
+        if (index > 0) index--
+        pickerValue.push(index)
+      }
+      if (this.showDay && this.date.date) {
+        pickerValue.push(this.days.findIndex(m => m === parseInt(this.date.date, 10)))
+      }
+      if (this.showHour && this.date.hour) {
+        pickerValue.push(this.hours.findIndex(m => m === parseInt(this.date.hour, 10)))
+      }
+      if (this.showMinute && this.date.minute) {
+        pickerValue.push(this.minutes.findIndex(m => m === parseInt(this.date.minute, 10)))
+      }
+      if (this.showSecond && this.date.second) {
+        pickerValue.push(this.seconds.findIndex(m => m === parseInt(this.date.second, 10)))
+      }
+      return pickerValue
     }
   },
   watch: {
@@ -356,9 +414,22 @@ export default {
       this.$emit('close')
       this.handleEmitChange()
     },
-    handleDatePickerItem(item) {},
+    handleDateChange(e) {
+      const values = e.detail.value // values 返回的数组固定是picker的数量，只返回有变化的索引值
+      const time = this.date.time // 取出当前data的实际时间
+      values.forEach((value, index) => {
+        if (value != null) {
+          // value为picker列的索引值
+          const field = FIELD_MAPS[index] // day
+          const val = this[field.getMethod][value] // days[index] 取出对应picker值
+          time[field.setMethod](val) // 调用原生date方法赋值
+        }
+      })
+      // 重新解析
+      this.date = this.$pi.date.parseDate(time)
+    },
     handleConfirm() {
-      // this.$emit('confirm', this.datePickered)
+      this.$emit('confirm', this.date.format(this.format))
       this.onConfirmClose && this.handlePopupClose()
     }
   }

config/calendar.js

@@ -7,7 +7,7 @@ export default {
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   showTitle: true, // 是否显示title（默认：true）
   title: '日期选择', // 标题（默认：日期选择）
-  titlePadding: '24rpx', // 标题 padding（默认：24rpx）
+  titlePadding: '32rpx', // 标题 padding（默认：32rpx）
   type: 'date', // 日历的类型，date 单选，range 日历范围
   defaultValue: '', // 日期默认值，单选时候，传入Date，日历范围，传入Date[]
   minYear, // 可切换的最大年份（默认当前年份 - 30）

config/datePicker.js

@@ -8,10 +8,11 @@ export default {
   endYear, // 结束年份（默认当前年份）
   field: 'day', // 选择器的粒度 year、month、day、hour、minute、second
   defaultValue: '', // 日期默认值
+  format: 'yyyy-mm-dd', // 返回的日期格式
   toolbarPosition: 'bottom', // 操作条（确定，取消按钮）位置，可选值 'top', 'bottom'
   showTitle: false, // 是否显示title（默认：true）
   title: '日期选择', // 标题（默认：日期选择）
-  titlePadding: '24rpx', // 标题 padding（默认：24rpx）
+  titlePadding: '32rpx', // 标题 padding（默认：32rpx）
   height: '50vh', // 弹出选择层的高度，不可填百分比（默认：'50vh'）
   itemHeight: 110, // 行高（默认：'110rpx'）
   onConfirmClose: true, // 是否点击确认的时候关闭弹窗（默认：'true'）

config/modal.js

@@ -4,7 +4,7 @@ export default {
   onConfirmClose: true, // 是否点击确认的时候关闭弹窗（默认：'true'）
   showTitle: true, // 是否显示title（默认：true）
   title: '弹出选择', // 标题（默认：日期选择）
-  titlePadding: '24rpx', // 标题 padding（默认：24rpx）
+  titlePadding: '32rpx', // 标题 padding（默认：32rpx）
   width: 600, // 弹窗宽度，可以是数值(rpx)，百分比，auto等
   content: '内容', // 弹窗内容
   contentStyle: {}, // 内容样式

config/select.js

@@ -9,7 +9,7 @@ export default {
   isMulti: false, // 是否多选，（默认：false）
   showTitle: false, // 是否显示title（默认：true）
   title: '弹出选择', // 标题（默认：日期选择）
-  titlePadding: '24rpx', // 标题 padding（默认：24rpx）
+  titlePadding: '32rpx', // 标题 padding（默认：32rpx）
   height: '50vh', // 弹出选择层的高度，不可填百分比（默认：'50vh'）
   itemHeight: 110, // 行高（默认：'110rpx'）
   showItemBottomBorder: true, // 是否显示item下边框（默认：'true'）

tools/date.js

@@ -29,7 +29,7 @@ export const parseDate = (value = new Date(), weekPrefix = '星期') => {
     second: date.getSeconds(), // 秒
     time: date,
     timestamp: date.getTime(), // 时间戳
-    format(fmt) {
+    format(fmt = 'yyyy-mm-dd HH:MM:ss') {
       return formatDate(date, fmt)
     }
   }
@@ -47,7 +47,7 @@ export const formatDate = (value = new Date(), fmt = 'yyyy-mm-dd') => {
     'y+|Y+': date.year, // 年
     'm+': date.month, // 月
     'd+|D+': date.date, // 日
-    'h+': date.hour, // 时
+    'h+|H+': date.hour, // 时
     'M+': date.minute, // 分
     's+': date.second // 秒
   }