mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
doc(date-picker): refactor
This commit is contained in:
07akioni
parent
b687534295
commit
bfed0ca49b
72
demo/documentation/components/datePicker/enUS/actions.md
Normal file
72
demo/documentation/components/datePicker/enUS/actions.md
Normal file
@ -0,0 +1,72 @@
|
||||
# Actions
|
||||
```html
|
||||
<n-date-picker
|
||||
v-model="ts1"
|
||||
type="datetime"
|
||||
style="margin-right: 12px; margin-bottom: 12px;"
|
||||
:actions="['now']"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="ts2"
|
||||
type="date"
|
||||
:actions="['confirm']"
|
||||
style="margin-bottom: 12px;"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="ts3"
|
||||
type="datetimerange"
|
||||
style="margin-bottom: 12px;"
|
||||
:actions="['clear']"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="ts4"
|
||||
type="daterange"
|
||||
:actions="null"
|
||||
style="margin-bottom: 12px;"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ts1: null,
|
||||
ts2: 0,
|
||||
ts3: null,
|
||||
ts4: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onDateTimeChange(timestamp, dateTimeString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateTimeString}`);
|
||||
},
|
||||
onDateChange(timestamp, dateString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateString}`);
|
||||
},
|
||||
handleInputTs1(v) {
|
||||
if (v === "") {
|
||||
this.ts1 = null;
|
||||
return;
|
||||
}
|
||||
v = Number(v);
|
||||
this.ts1 = Number.isNaN(v) ? null : v;
|
||||
},
|
||||
handleInputTs2(v) {
|
||||
if (v === "") {
|
||||
this.ts2 = null;
|
||||
return;
|
||||
}
|
||||
v = Number(v);
|
||||
this.ts2 = Number.isNaN(v) ? null : v;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-date-picker {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
23
demo/documentation/components/datePicker/enUS/date.md
Normal file
23
demo/documentation/components/datePicker/enUS/date.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Date
|
||||
```html
|
||||
<n-date-picker
|
||||
v-model="timestamp"
|
||||
type="date"
|
||||
/>
|
||||
<n-date-picker v-model="timestamp2" type="date" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
timestamp: null,
|
||||
timestamp2: 1000000
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-date-picker {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
26
demo/documentation/components/datePicker/enUS/daterange.md
Normal file
26
demo/documentation/components/datePicker/enUS/daterange.md
Normal file
@ -0,0 +1,26 @@
|
||||
# Date Range
|
||||
```html
|
||||
<n-date-picker
|
||||
v-model="range1"
|
||||
type="daterange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="range2"
|
||||
type="daterange"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
range1: null,
|
||||
range2: [1562774466000, 1567180866000]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-date-picker {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
23
demo/documentation/components/datePicker/enUS/datetime.md
Normal file
23
demo/documentation/components/datePicker/enUS/datetime.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Date
|
||||
```html
|
||||
<n-date-picker
|
||||
v-model="timestamp"
|
||||
type="datetime"
|
||||
/>
|
||||
<n-date-picker v-model="timestamp2" type="datetime" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
timestamp: null,
|
||||
timestamp2: 1000000
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-date-picker {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,26 @@
|
||||
# Datetime Range
|
||||
```html
|
||||
<n-date-picker
|
||||
v-model="range1"
|
||||
type="datetimerange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="range2"
|
||||
type="datetimerange"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
range1: null,
|
||||
range2: [1562774466000, 1567180866000]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-date-picker {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
48
demo/documentation/components/datePicker/enUS/disabled.md
Normal file
48
demo/documentation/components/datePicker/enUS/disabled.md
Normal file
@ -0,0 +1,48 @@
|
||||
# Disabled
|
||||
```html
|
||||
<n-date-picker
|
||||
v-model="datetime"
|
||||
type="datetime"
|
||||
:disabled="disabled"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="datetime"
|
||||
type="date"
|
||||
:disabled="disabled"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="datetimerange"
|
||||
:disabled="disabled"
|
||||
type="datetimerange"
|
||||
/>
|
||||
<n-date-picker v-model="daterange" :disabled="disabled" type="daterange" />
|
||||
<n-switch v-model="disabled" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datetime: 891360258000,
|
||||
date: null,
|
||||
datetimerange: [324910284, 910391323],
|
||||
daterange: [324910284, 910391323],
|
||||
disabled: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onDateTimeChange(timestamp, dateTimeString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateTimeString}`);
|
||||
},
|
||||
onDateChange(timestamp, dateString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateString}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-date-picker {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
9
demo/documentation/components/datePicker/enUS/index.md
Normal file
9
demo/documentation/components/datePicker/enUS/index.md
Normal file
@ -0,0 +1,9 @@
|
||||
# DatePicker
|
||||
```demo
|
||||
date
|
||||
datetime
|
||||
daterange
|
||||
datetimerange
|
||||
disabled
|
||||
actions
|
||||
```
|
||||
@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Actions
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-date-picker
|
||||
v-model="ts1"
|
||||
type="datetime"
|
||||
style="margin-right: 12px; margin-bottom: 12px;"
|
||||
:actions="['now']"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="ts2"
|
||||
type="date"
|
||||
:actions="['confirm']"
|
||||
style="margin-bottom: 12px;"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="ts3"
|
||||
type="datetimerange"
|
||||
style="margin-bottom: 12px;"
|
||||
:actions="['clear']"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="ts4"
|
||||
type="daterange"
|
||||
:actions="null"
|
||||
style="margin-bottom: 12px;"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ts1: null,
|
||||
ts2: 0,
|
||||
ts3: null,
|
||||
ts4: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDateTimeChange (timestamp, dateTimeString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateTimeString}`)
|
||||
},
|
||||
onDateChange (timestamp, dateString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateString}`)
|
||||
},
|
||||
handleInputTs1 (v) {
|
||||
if (v === '') {
|
||||
this.ts1 = null
|
||||
return
|
||||
}
|
||||
v = Number(v)
|
||||
this.ts1 = Number.isNaN(v) ? null : v
|
||||
},
|
||||
handleInputTs2 (v) {
|
||||
if (v === '') {
|
||||
this.ts2 = null
|
||||
return
|
||||
}
|
||||
v = Number(v)
|
||||
this.ts2 = Number.isNaN(v) ? null : v
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-date-picker
|
||||
v-model="ts1"
|
||||
type="datetime"
|
||||
style="margin-right: 12px;"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="ts2"
|
||||
type="date"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<n-input
|
||||
:value="ts1"
|
||||
placeholder="ts1"
|
||||
type="text"
|
||||
style="margin-right: 12px;"
|
||||
@input="handleInputTs1"
|
||||
/>
|
||||
<n-input
|
||||
:value="ts2"
|
||||
placeholder="ts2"
|
||||
type="text"
|
||||
@input="handleInputTs2"
|
||||
/>
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">datetime v-model: {{ JSON.stringify(ts1) }}, date v-model: {{ JSON.stringify(ts2) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ts1: null,
|
||||
ts2: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDateTimeChange (timestamp, dateTimeString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateTimeString}`)
|
||||
},
|
||||
onDateChange (timestamp, dateString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateString}`)
|
||||
},
|
||||
handleInputTs1 (v) {
|
||||
if (v === '') {
|
||||
this.ts1 = null
|
||||
return
|
||||
}
|
||||
v = Number(v)
|
||||
this.ts1 = Number.isNaN(v) ? null : v
|
||||
},
|
||||
handleInputTs2 (v) {
|
||||
if (v === '') {
|
||||
this.ts2 = null
|
||||
return
|
||||
}
|
||||
v = Number(v)
|
||||
this.ts2 = Number.isNaN(v) ? null : v
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Disabled
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-date-picker
|
||||
v-model="datetime"
|
||||
type="datetime"
|
||||
style="margin-right: 12px; margin-bottom: 12px;"
|
||||
:disabled="disabled"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="datetime"
|
||||
type="date"
|
||||
:disabled="disabled"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="datetimerange"
|
||||
:disabled="disabled"
|
||||
type="datetimerange"
|
||||
style="margin-bottom: 12px;"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="daterange"
|
||||
:disabled="disabled"
|
||||
type="daterange"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<n-switch v-model="disabled" />
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">date v-model: {{ JSON.stringify(date) }}
|
||||
datetime v-model: {{ JSON.stringify(datetime) }}
|
||||
datetimerange v-model: {{ JSON.stringify(datetimerange) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
datetime: 891360258000,
|
||||
date: null,
|
||||
datetimerange: [324910284, 910391323],
|
||||
daterange: [324910284, 910391323],
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDateTimeChange (timestamp, dateTimeString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateTimeString}`)
|
||||
},
|
||||
onDateChange (timestamp, dateString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateString}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
DatePicker / n-date-picker
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
<disabled />
|
||||
<range />
|
||||
<actions />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
import disabled from './disabled.demo.vue'
|
||||
import range from './range.demo.vue'
|
||||
import actions from './actions.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicUsage,
|
||||
disabled,
|
||||
range,
|
||||
actions
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
DateTime Range
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-date-picker
|
||||
v-model="range1"
|
||||
type="datetimerange"
|
||||
style="margin-bottom: 12px;"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="range2"
|
||||
type="datetimerange"
|
||||
style="margin-bottom: 12px;"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="range3"
|
||||
type="daterange"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">range1 v-model: {{ JSON.stringify(range1) }}
|
||||
range2 v-model: {{ JSON.stringify(range2) }}
|
||||
range3 v-model: {{ JSON.stringify(range3) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* padding
|
||||
* padding
|
||||
* padding
|
||||
* padding
|
||||
* padding
|
||||
*/
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
range1: null,
|
||||
range2: [1562774466000, 1567180866000],
|
||||
range3: [1562774400000, 1567180800000]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -33,7 +33,7 @@ import message from './documentation/components/message'
|
||||
import tooltip from './documentation/components/tooltip'
|
||||
import popover from './documentation/components/popover'
|
||||
import alert from './documentation/components/alert'
|
||||
import datePickerDemo from './documentation/components/datePickerDemo'
|
||||
import datePicker from './documentation/components/datePicker'
|
||||
import inputNumberDemo from './documentation/components/inputNumberDemo'
|
||||
import nimbusIconDemo from './documentation/components/nimbusIconDemo'
|
||||
import radioDemo from './documentation/components/radioDemo'
|
||||
@ -153,7 +153,7 @@ const routes = [
|
||||
{ path: '/n-nimbus-confirm-card', component: nimbusConfirmCardDemo },
|
||||
{ path: '/n-pagination', component: pagination },
|
||||
{ path: '/n-alert', component: alert },
|
||||
{ path: '/n-date-picker', component: datePickerDemo },
|
||||
{ path: '/n-date-picker', component: datePicker },
|
||||
{ path: '/n-input-number', component: inputNumberDemo },
|
||||
{ path: '/n-nimbus-icon', component: nimbusIconDemo },
|
||||
{ path: '/n-radio', component: radioDemo },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user