mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
doc(date-picker)
This commit is contained in:
07akioni
parent
e7521d3392
commit
d7a4e25569
@ -5,8 +5,8 @@
|
||||
type="date"
|
||||
:disabledTime="disabledTime"
|
||||
/>
|
||||
{{timestamp}}
|
||||
<n-date-picker v-model="timestamp2" type="date" />
|
||||
<pre>{{ JSON.stringify(timestamp) }}, {{ JSON.stringify(timestamp2) }}</pre>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# DatePicker
|
||||
People has too many ideas about how to set a time.
|
||||
|
||||
## Demos
|
||||
```demo
|
||||
date
|
||||
datetime
|
||||
@ -8,4 +11,64 @@ disabled
|
||||
disabledTime
|
||||
actions
|
||||
events
|
||||
```
|
||||
```
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|value|change|
|
||||
|
||||
## Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|value|`number`|`null`||
|
||||
|actions|`Array<'clear' \| 'now' \| 'confirm'>`|`null`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
|
||||
|
||||
|
||||
### Date
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|placeholder|`string`|`'Select Date'`||
|
||||
|is-date-disabled|`(current: number) => boolean`|`() => false`||
|
||||
|
||||
### DateTime
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|placeholder|`string`|`'Select Date and Time'`||
|
||||
|is-date-disabled|`(current: number) => boolean`|`() => false`||
|
||||
|is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
|
||||
|
||||
### DateRange
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|seperator|`string`|`'to'`||
|
||||
|start-placeholder|`string`|`'Start Date and Time`||
|
||||
|end-placeholder|`string`|`End Date and Time`||
|
||||
|is-date-disabled|`(current: number) => boolean`|`() => false`||
|
||||
|is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
|
||||
|
||||
|
||||
### DateTimeRange
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|seperator|`string`|`'to'`||
|
||||
|start-placeholder|`string`|`'Start Date and Time`||
|
||||
|end-placeholder|`string`|`End Date and Time`||
|
||||
|is-date-disabled|`(current: number) => boolean`|`() => false`||
|
||||
|is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
|
||||
|
||||
## Events
|
||||
|
||||
|
||||
### Date, DateTime
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|change|(currentValue: number \| null)||
|
||||
|blur|(currentValue: number \| null)||
|
||||
|
||||
### DateRange, DateTimeRange
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|change|(currentValue: [number, number] \| null)||
|
||||
|blur|(currentValue: [number, number] \| null)||
|
||||
|
||||
@ -163,11 +163,6 @@ export default {
|
||||
directives: {
|
||||
clickoutside
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
NDatePicker: this
|
||||
}
|
||||
},
|
||||
components: {
|
||||
NInput,
|
||||
NIcon,
|
||||
@ -177,6 +172,15 @@ export default {
|
||||
DaterangePanel,
|
||||
iosCalendar
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
NDatePicker: this
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable,
|
||||
@ -201,7 +205,7 @@ export default {
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
default: 'medium'
|
||||
},
|
||||
/**
|
||||
* type can be 'date', 'datetime'
|
||||
@ -243,18 +247,6 @@ export default {
|
||||
isTimeDisabled: {
|
||||
type: Function,
|
||||
default: undefined
|
||||
},
|
||||
rangeTimeDisabled: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
return false
|
||||
}
|
||||
},
|
||||
disabledTime: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -325,18 +317,6 @@ export default {
|
||||
*/
|
||||
value (value, oldValue) {
|
||||
this.refresh(value)
|
||||
if (this.isRange) {
|
||||
if (!(
|
||||
Array.isArray(value) &&
|
||||
Array.isArray(oldValue) &&
|
||||
value.length === 2 &&
|
||||
value.length === oldValue.length &&
|
||||
value[0] === oldValue[0] &&
|
||||
value[1] === oldValue[1]
|
||||
)) {
|
||||
this.$emit('change', value, oldValue)
|
||||
}
|
||||
} else { this.$emit('change', value, oldValue) }
|
||||
}
|
||||
},
|
||||
created () {
|
||||
@ -358,11 +338,11 @@ export default {
|
||||
* Panel Input
|
||||
*/
|
||||
handlePanelInput (value, valueString) {
|
||||
this.$emit('input', value, 'unavailable for now')
|
||||
this.$emit('change', value)
|
||||
this.refresh(value)
|
||||
},
|
||||
handleRangePanelInput (value, valueString) {
|
||||
this.$emit('input', value, 'unavailable for now')
|
||||
this.$emit('change', value)
|
||||
this.refresh(value)
|
||||
},
|
||||
/**
|
||||
@ -412,7 +392,7 @@ export default {
|
||||
if (this.disabled) return
|
||||
const newSelectedDateTime = strictParse(this.displayTime, this.computedFormat, new Date())
|
||||
if (isValid(newSelectedDateTime)) {
|
||||
this.$emit('input', getTime(newSelectedDateTime))
|
||||
this.$emit('change', getTime(newSelectedDateTime))
|
||||
} else {
|
||||
this.refreshDisplayTime(this.value)
|
||||
}
|
||||
@ -440,7 +420,7 @@ export default {
|
||||
handleTimeInput (v) {
|
||||
const newSelectedDateTime = strictParse(this.displayTime, this.computedFormat, new Date())
|
||||
if (isValid(newSelectedDateTime)) {
|
||||
this.$emit('input', getTime(newSelectedDateTime))
|
||||
this.$emit('change', getTime(newSelectedDateTime))
|
||||
}
|
||||
},
|
||||
handleRangeInput (v, isValueInvalid) {
|
||||
@ -507,12 +487,12 @@ export default {
|
||||
time = getTime(time)
|
||||
}
|
||||
if (this.value === null) {
|
||||
this.$emit('input', [time, time])
|
||||
this.$emit('change', [time, time])
|
||||
this.refresh([time, time])
|
||||
} else {
|
||||
const newValue = [time, Math.max(this.value[1], time)]
|
||||
if (!isEqual(newValue, this.value)) {
|
||||
this.$emit('input', newValue)
|
||||
this.$emit('change', newValue)
|
||||
this.refresh(newValue)
|
||||
}
|
||||
}
|
||||
@ -522,12 +502,12 @@ export default {
|
||||
time = getTime(time)
|
||||
}
|
||||
if (this.value === null) {
|
||||
this.$emit('input', [time, time])
|
||||
this.$emit('change', [time, time])
|
||||
this.refresh([time, time])
|
||||
} else {
|
||||
const newValue = [Math.min(this.value[0], time), time]
|
||||
if (!isEqual(newValue, this.value)) {
|
||||
this.$emit('input', newValue)
|
||||
this.$emit('change', newValue)
|
||||
this.refresh(newValue)
|
||||
}
|
||||
}
|
||||
@ -540,7 +520,7 @@ export default {
|
||||
if (typeof endTime !== 'number') {
|
||||
endTime = getTime(endTime)
|
||||
}
|
||||
this.$emit('input', [startTime, endTime])
|
||||
this.$emit('change', [startTime, endTime])
|
||||
this.refresh([startTime, endTime])
|
||||
},
|
||||
setInvalidStatus (isValueInvalid) {
|
||||
|
||||
@ -40,10 +40,6 @@ export default {
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
debug: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => ['clear', 'confirm']
|
||||
@ -78,7 +74,6 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
selectingPhase () {
|
||||
if (this.isSelecting) return 'end'
|
||||
else return 'start'
|
||||
|
||||
@ -29,10 +29,6 @@ export default {
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
debug: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => ['now', 'clear', 'confirm']
|
||||
|
||||
Loading…
Reference in New Issue
Block a user