naive-ui/demo/documentation/components/datePicker/zhCN/disabledTime.md
2020-02-04 19:05:59 +08:00

115 lines
2.9 KiB
Markdown

# 禁用特定时间
```html
<n-date-picker
v-model="timestamp1"
type="date"
:is-date-disabled = "dateDisabled"
/>
<n-date-picker
v-model="timestamp2"
type="datetime"
:is-date-disabled = "dateDisabled"
:is-time-disabled= "timeDisabled"
/>
<n-date-picker
v-model="timestamp3"
type="daterange"
:is-date-disabled = "isRangeDateDisabled"
/>
<n-date-picker
v-model="timestamp4"
type="datetimerange"
:is-date-disabled = "isRangeDateDisabled"
:is-time-disabled= "isRangeTimeDisabled"
/>
```
```js
export default {
data () {
return {
timestamp1: 1576239200000,
timestamp2: 1576234000000,
timestamp3: [1576439200000, 1576739200000],
timestamp4: [1576234000000, 1576934000000],
}
},
methods: {
dateDisabled (current) {
const month = (new Date(current)).getMonth()
const date = (new Date(current)).getDate()
return month === 11 && date < 15
},
timeDisabled (current) {
const month = (new Date(current)).getMonth()
return {
isHourDisabled: (hour) => {
if (month === 11) {
return hour > 1 && hour <= 19
} else {
return false
}
},
isMinuteDisabled: (minute, selectedHour) => {
if (month === 11 && selectedHour === 22) {
return minute >= 20 && minute <= 30
} else {
return false
}
},
isSecondDisabled: (second, selectedMinute, selectedHour) => {
if (month === 11 && selectedHour === 12 && selectedMinute >= 40 && selectedMinute <= 50) {
return second >= 20 && second <= 30
} else {
return false
}
}
}
},
isRangeDateDisabled (current, type, range) {
const currentDate = new Date(current)
if (type === 'start') {
if (currentDate.getMonth() === 11) {
return currentDate.getDate() > 15
}
} else if (type === 'end') {
if (range) {
const [start, end] = range
return currentDate < start
}
}
},
isRangeTimeDisabled (current, type, range) {
const month = (new Date(current)).getMonth()
return {
isHourDisabled: (hour) => {
if (month === 11) {
return hour > 1 && hour <= 19
} else {
return false
}
},
isMinuteDisabled: (minute, selectedHour) => {
// debugger
if (month === 11 && selectedHour === 22) {
return minute >= 20 && minute <= 30
} else {
return false
}
},
isSecondDisabled: (second, selectedMinute, selectedHour) => {
if (month === 11 && selectedHour === 12 && selectedMinute >= 40 && selectedMinute <= 50) {
return second >= 20 && second <= 30
} else {
return false
}
}
}
},
},
}
```
```css
.n-date-picker {
margin: 0 12px 8px 0;
}
```