mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: get off work checkpoint, for time picker and date picker

Browse Source
This commit is contained in:
07akioni 2019-07-22 19:37:17 +08:00
parent 989c0086a9
commit c51dbd25e1
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/components/timePickerDemo/scaffold.demo.vue
View File

@ -8,10 +8,10 @@
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-time-picker />
<n-time-picker v-model="time0" />
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<pre class="n-doc-section__inspect">{{ JSON.stringify(time0) }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
@ -22,6 +22,8 @@
export default {
data () {
return {
time0: null,
time1: 'invalid'
}
}
}

37
packages/common/TimePicker/src/main.vue
View File

@ -23,6 +23,8 @@
v-clickoutside.lazy="closeTimeSelector"
class="n-time-picker"
>
{{ computedTime }}
{{ computedHour }}
<div class="n-time-picker__selection-wrapper">
<div class="n-time-picker__hour">
<div
@ -59,7 +61,10 @@
class="n-time-picker__item"
:class="{
'n-time-picker__item--active':
second === computedSecond
second === computedSecond,
'n-time-picker__item--disabled':
validator &&
!validator(computedHour, computedMinute, second)
}"
@click="setSecond(second)"
>
@ -107,6 +112,9 @@ const TIME_CONST = {
seconds: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59']
}
/**
* Use range to disabled time since validator will need time picker to loop all available options.
*/
export default {
name: 'NTimePicker',
components: {
@ -130,6 +138,10 @@ export default {
format: {
type: String,
default: DEFAULT_FORMAT
},
validator: {
type: Function,
default: null
}
},
data () {
@ -140,22 +152,31 @@ export default {
}
},
computed: {
computedTime () {
return moment(this.value)
},
computedHour () {
if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('HH')
if (this.computedTime) return this.computedTime.format('HH')
else return null
},
computedMinute () {
if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('mm')
if (this.computedTime) return this.computedTime.format('mm')
else return null
},
computedSecond () {
if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('ss')
if (this.computedTime) return this.computedTime.format('ss')
else return null
}
},
methods: {
justifySelectedDateTimeAfterChangeTimeString () {
justifyTimeAfterChangeTimeString () {
const time = moment(this.displayTimeString, this.format)
if (time.isValid()) {
this.$emit('input', time)
} else {
this.$emit('input', moment())
this.displayTimeString = moment().format(this.format)
}
},
setHour (hour) {
try {
@ -165,7 +186,7 @@ export default {
} catch (err) {
} finally {
this.justifySelectedDateTimeAfterChangeTimeString()
this.justifyTimeAfterChangeTimeString()
}
},
setMinute (minute) {
@ -176,7 +197,7 @@ export default {
} catch (err) {
} finally {
this.justifySelectedDateTimeAfterChangeTimeString()
this.justifyTimeAfterChangeTimeString()
}
},
setSecond (second) {
@ -187,7 +208,7 @@ export default {
} catch (err) {
} finally {
this.justifySelectedDateTimeAfterChangeTimeString()
this.justifyTimeAfterChangeTimeString()
}
},
refreshTimeString () {