refactor(time-picker): remove momentjs

package.json

@@ -101,7 +101,6 @@
     "date-fns": "^2.5.1",
     "ionicons": "^4.5.8",
     "masonry-layout": "^4.2.2",
-    "moment": "^2.24.0",
     "node-sass": "^4.12.0",
     "resize-observer-polyfill": "^1.5.1",
     "sass-loader": "^7.1.0"

packages/common/DatePicker/src/main.vue

@@ -151,7 +151,7 @@ import NInput from '../../Input'
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
 import { format, getTime, isValid } from 'date-fns'
-import { strictParse } from './utils'
+import { strictParse } from '../../../utils/dateUtils'
 import isEqual from 'lodash/isEqual'
 
 const DATE_FORMAT = {

packages/common/DatePicker/src/panel/datetimerange.vue

@@ -236,7 +236,7 @@ import NInput from '../../../Input'
 import dualCalendarMixin from './dualCalendarMixin'
 import NBaseIcon from '../../../../base/Icon'
 import { startOfSecond, format, set, getYear, getMonth, getDate, isValid } from 'date-fns'
-import { strictParse } from '../utils'
+import { strictParse } from '../../../../utils/dateUtils'
 
 const DATETIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'
 const DATE_FORMAT = 'yyyy-MM-dd'

packages/common/DatePicker/src/panel/dualCalendarMixin.js

@@ -1,6 +1,6 @@
 // import moment from 'moment'
 import { isValid, getMonth, getYear, getTime, format, addMonths, startOfMonth } from 'date-fns'
-import { dateArray } from '../utils'
+import { dateArray } from '../../../../utils/dateUtils'
 
 import commonCalendarMixin from './commonCalendarMixin'
 

packages/common/DatePicker/src/panel/uniCalendarMixin.js

@@ -1,7 +1,7 @@
 // import moment from 'moment'
 import commonCalendarMixin from './commonCalendarMixin'
 import { isValid, getDate, getMonth, getYear, getTime, isSameMonth, format, addMonths, addYears, set } from 'date-fns'
-import { dateArray, strictParse } from '../utils'
+import { dateArray, strictParse } from '../../../../utils/dateUtils'
 
 // import { setYMD } from '../utils'
 

packages/common/Time/src/main.js

@@ -1,12 +1,12 @@
-import moment from 'moment'
+// import moment from 'moment'
 
 export default {
   name: 'NTime',
   props: {
     time: {
       validator (time) {
-        if (time === null) return
+        if (time === null) return false
-        return moment(time).isValid()
+        // return moment(time).isValid()
       },
       default: null
     },

packages/common/TimePicker/src/main.vue

@@ -43,7 +43,7 @@
                       'n-time-picker-selector-time-row__item--active':
                         hour === computedHour
                     }"
-                    @click="setHour(hour)"
+                    @click="setHours(hour)"
                   >
                     {{ hour }}
                   </div>
@@ -66,7 +66,7 @@
                       'n-time-picker-selector-time-row__item--active':
                         minute === computedMinute
                     }"
-                    @click="setMinute(minute)"
+                    @click="setMinutes(minute)"
                   >
                     {{ minute }}
                   </div>
@@ -92,7 +92,7 @@
                         validator &&
                         !validator(computedHour, computedMinute, second)
                     }"
-                    @click="setSecond(second)"
+                    @click="setSeconds(second)"
                   >
                     {{ second }}
                   </div>
@@ -132,13 +132,14 @@
 <script>
 import NScrollbar from '../../Scrollbar'
 import NInput from '../../Input'
-import moment from 'moment'
 import detachable from '../../../mixins/detachable'
 import placeable from '../../../mixins/placeable'
 import clickoutside from '../../../directives/clickoutside'
 import zindexable from '../../../mixins/zindexable'
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
+import { isValid, startOfSecond, startOfMinute, startOfHour, setHours, setMinutes, setSeconds, getTime, format, getMinutes, getHours, getSeconds, set } from 'date-fns'
+import { strictParse } from '../../../utils/dateUtils'
 
 const DEFAULT_FORMAT = 'HH:mm:ss'
 const TIME_CONST = {
@@ -203,7 +204,7 @@ export default {
   data () {
     return {
       active: false,
-      displayTimeString: this.value === null ? null : moment(this.value).format(this.format),
+      displayTimeString: this.value === null ? null : format(this.value, this.format),
       ...TIME_CONST,
       memorizedValue: this.value
     }
@@ -211,18 +212,18 @@ export default {
   computed: {
     computedTime () {
       if (this.value === null) return null
-      else return moment(this.value)
+      else return new Date(this.value)
     },
     computedHour () {
-      if (this.computedTime) return this.computedTime.format('HH')
+      if (this.computedTime) return format(this.computedTime, 'HH')
       else return null
     },
     computedMinute () {
-      if (this.computedTime) return this.computedTime.format('mm')
+      if (this.computedTime) return format(this.computedTime, 'mm')
       else return null
     },
     computedSecond () {
-      if (this.computedTime) return this.computedTime.format('ss')
+      if (this.computedTime) return format(this.computedTime, 'ss')
       else return null
     }
   },
@@ -234,44 +235,45 @@ export default {
   },
   methods: {
     justifyValueAfterChangeDisplayTimeString () {
-      const time = moment(this.displayTimeString, this.format, true)
+      const time = strictParse(this.displayTimeString, this.format, new Date())
-      if (time.isValid()) {
+      if (isValid(time)) {
         if (this.computedTime !== null) {
-          const newTime = this.computedTime
+          const newTime = set(this.computedTime, {
-          newTime.hour(time.hour())
+            hours: getHours(time),
-          newTime.minute(time.minute())
+            minutes: getMinutes(time),
-          newTime.second(time.second())
+            seconds: getSeconds(time)
-          this.$emit('input', newTime.valueOf())
+          })
+          this.$emit('input', getTime(newTime))
         } else {
-          this.$emit('input', time.valueOf())
+          this.$emit('input', getTime(time))
         }
       }
     },
-    setHour (hour) {
+    setHours (hour) {
       if (this.value === null) {
-        this.$emit('input', moment().hour(hour).startOf('hour').valueOf())
+        this.$emit('input', getTime(startOfHour(new Date())))
       } else {
-        this.$emit('input', moment(this.value).hour(hour).valueOf())
+        this.$emit('input', getTime(setHours(this.value, hour)))
       }
     },
-    setMinute (minute) {
+    setMinutes (minute) {
       if (this.value === null) {
-        this.$emit('input', moment().minute(minute).startOf('minute').valueOf())
+        this.$emit('input', getTime(startOfMinute(new Date())))
       } else {
-        this.$emit('input', moment(this.value).minute(minute).valueOf())
+        this.$emit('input', getTime(setMinutes(this.value, minute)))
       }
     },
-    setSecond (second) {
+    setSeconds (second) {
       if (this.value === null) {
-        this.$emit('input', moment().second(second).startOf('second').valueOf())
+        this.$emit('input', getTime(startOfSecond(new Date())))
       } else {
-        this.$emit('input', moment(this.value).second(second).valueOf())
+        this.$emit('input', getTime(setSeconds(this.value, second)))
       }
     },
     refreshTimeString (time) {
       if (time === undefined) time = this.computedTime
       if (time === null) this.displayTimeString = ''
-      else this.displayTimeString = time.format(this.format)
+      else this.displayTimeString = format(time, this.format)
     },
     handleTimeInputBlur () {
       this.refreshTimeString()