add picker select param selectedText + add date-picker props min, max

example/components/date-picker.vue

@@ -16,13 +16,11 @@
       let value = polyfill && i < 10 ? '0' + i : i
       arr.push({
         text: value,
-        value: value
+        value: i
       })
     }
     return arr
   }
-  const year = range(2010, 2020)
-  const month = range(1, 12)
 
   const COMPONENT_NAME = 'date-picker'
   const EVENT_SELECT = 'select'
@@ -30,22 +28,53 @@
 
   export default {
     name: COMPONENT_NAME,
+    props: {
+      min: {
+        type: Array,
+        default() {
+          return [2010, 2, 1]
+        }
+      },
+      max: {
+        type: Array,
+        default() {
+          return [2020, 2, 1]
+        }
+      }
+    },
     data() {
       return {
         tempIndex: [0, 0, 0]
       }
     },
     computed: {
-      dateData() {
+      years() {
+        return range(this.min[0], this.max[0])
+      },
+      months() {
+        let minMonth = !this.tempIndex[0] ? this.min[1] : 1
+        let maxMonth = this.tempIndex[0] === this.years.length - 1 ? this.max[1] : 12
+
+        return range(minMonth, maxMonth)
+      },
+      days() {
+        const currentMonth = this.months[this.tempIndex[1]].value
         let day = 30
-        if ([0, 2, 4, 6, 7, 9, 11].includes(this.tempIndex[1])) {
+        if ([1, 3, 5, 7, 8, 10, 12].includes(currentMonth)) {
           day = 31
         } else {
-          if (this.tempIndex[1] === 1) {
+          if (currentMonth === 2) {
             day = this.tempIndex[0] % 4 ? 28 : 29
           }
         }
-        return [year, month, range(1, day)]
+
+        let minDay = !this.tempIndex[0] && !this.tempIndex[1] ? this.min[2] : 1
+        let maxDay = this.tempIndex[0] === this.years.length - 1 && this.tempIndex[1] === this.months.length - 1 ? this.max[2] : day
+
+        return range(minDay, maxDay)
+      },
+      dateData() {
+        return [this.years, this.months, this.days]
       }
     },
     methods: {
@@ -59,8 +88,8 @@
         this.tempIndex.splice(i, 1, newIndex)
         this.$refs.datePicker.setData(this.dateData, this.tempIndex)
       },
-      select(selectedVal, selectedIndex) {
-        this.$emit(EVENT_SELECT, selectedVal, selectedIndex)
+      select(selectedVal, selectedIndex, selectedText) {
+        this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
       },
       cancel() {
         this.$emit(EVENT_CANCEL)

example/pages/picker.vue

@@ -22,7 +22,7 @@
   import Vue from 'vue'
   import createAPI from '@/modules/create-api'
 
-  createAPI(Vue, DatePicker, ['select', 'cancel'], false)
+  createAPI(Vue, DatePicker, ['min', 'max', 'select', 'cancel'], false)
 
   function range(n, m, polyfill = false) {
     let arr = []
@@ -122,6 +122,8 @@
       })
 
       this.datePicker = this.$createDatePicker({
+        min: [2008, 8, 8],
+        max: [2024, 10, 20],
         onSelect: (selectedVal, selectedIndex) => {
           this.$createDialog({
             type: 'warn',
@@ -142,10 +144,10 @@
         title: 'HH:MM:SS',
         data: [range(0, 23, true), range(0, 59, true), range(0, 59, true)],
         selectedIndex: [10, 20, 59],
-        onSelect: (selectedVal, selectedIndex) => {
+        onSelect: (selectedVal, selectedIndex, selectedText) => {
           this.$createDialog({
             type: 'warn',
-            content: `HH:MM:SS：${selectedVal.join(':')} <br/> selected index: ${selectedIndex.join(',')}`,
+            content: `HH:MM:SS：${selectedText.join(':')} <br/> selected index: ${selectedIndex.join(',')}`,
             icon: 'cubeic-alert'
           }).show()
         },

src/components/picker/picker.vue

@@ -95,24 +95,28 @@
         this.hide()
 
         let changed = false
+        let pickerSelectedText = []
         for (let i = 0; i < this.pickerData.length; i++) {
           let index = this.wheels[i].getSelectedIndex()
           this.pickerSelectedIndex[i] = index
 
           let value = null
+          let text = ''
           if (this.pickerData[i].length) {
             value = this.pickerData[i][index].value
+            text = this.pickerData[i][index].text
           }
           if (this.pickerSelectedVal[i] !== value) {
             changed = true
           }
           this.pickerSelectedVal[i] = value
+          pickerSelectedText[i] = text
         }
 
-        this.$emit(EVENT_SELECT, this.pickerSelectedVal, this.pickerSelectedIndex)
+        this.$emit(EVENT_SELECT, this.pickerSelectedVal, this.pickerSelectedIndex, pickerSelectedText)
 
         if (changed) {
-          this.$emit(EVENT_VALUE_CHANGE, this.pickerSelectedVal, this.pickerSelectedIndex)
+          this.$emit(EVENT_VALUE_CHANGE, this.pickerSelectedVal, this.pickerSelectedIndex, pickerSelectedText)
         }
       },
       cancel() {