Casual UI - Vue

基础使用

Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

date:

formattedValue: 

<script setup>
import { ref } from 'vue'
const date = ref(null)
const formattedValue = ref('')
</script>

<template>
  <c-date-picker
    v-model="date"
    v-model:formattedValue="formattedValue"
    placeholder="请选择日期"
  />
  <p>
    <strong>date:</strong> {{ date }}
  </p>
  <p>
    <strong>formattedValue:</strong> {{ formattedValue }}
  </p>
</template>
点击展开/收起代码
点击打开交互式编辑器

禁用态

Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { ref } from 'vue'
const date1 = ref(null)
const date2 = ref(new Date())
</script>

<template>
  <c-date-picker v-model="date1" disabled />
  <c-date-picker v-model="date2" disabled class="c-ml-md" />
</template>
点击展开/收起代码
点击打开交互式编辑器

尺寸

Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

date:

formattedValue: 

<script setup>
import { ref } from 'vue'
const date = ref(null)
const formattedValue = ref('')
</script>

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="超小尺寸"
      size="xs"
    />
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="小尺寸"
      size="sm"
    />
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="中等尺寸（默认）"
    />
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="大尺寸"
      size="lg"
    />
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="超大尺寸"
      size="xl"
    />
  </div>
  <p>
    <strong>date:</strong> {{ date }}
  </p>
  <p>
    <strong>formattedValue:</strong> {{ formattedValue }}
  </p>
</template>
点击展开/收起代码
点击打开交互式编辑器

日期段选择

Jan   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

dateRange: [ null, null ]

formattedRange: [ "", "" ]

<script setup>
import { ref } from 'vue'
const dateRange = ref([null, null])
const formattedRange = ref(['', ''])
</script>

<template>
  <c-date-picker
    v-model:dateRange="dateRange"
    v-model:formattedDateRange="formattedRange"
    range
    placeholder="请选择日期段"
  />
  <p>
    <strong>dateRange:</strong> {{ dateRange }}
  </p>
  <p>
    <strong>formattedRange:</strong> {{ formattedRange }}
  </p>
</template>
点击展开/收起代码
点击打开交互式编辑器

选择月份、年份

  2023
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec

month:

formattedMonth:

  2023 - 2034
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034

year:

formattedYear: 

<script setup>
import { ref } from 'vue'
const month = ref(null)
const formattedMonth = ref('')
const year = ref(null)
const formattedYear = ref('')
</script>

<template>
  <div class="c-row c-gutter-x-md">
    <div class="c-col-6">
      <c-date-picker
        v-model="month"
        v-model:formattedValue="formattedMonth"
        placeholder="请选择月份"
        format="MMM, YYYY"
        unit="month"
      />
      <p>
        <strong>month:</strong> {{ month }}
      </p>
      <p>
        <strong>formattedMonth:</strong> {{ formattedMonth }}
      </p>
    </div>
    <div class="c-col-6">
      <c-date-picker
        v-model="year"
        v-model:formattedValue="formattedYear"
        placeholder="请选择年份"
        format="YYYY"
        unit="year"
      />
      <p>
        <strong>year:</strong> {{ year }}
      </p>
      <p>
        <strong>formattedYear:</strong> {{ formattedYear }}
      </p>
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

CDatePicker API

Props
Events
modelValue
Date | null
默认值  () => new Date()

当前选中值，用于v-model绑定

formattedValue
string
默认值  ''

格式化后的值，用于v-model:formattedValue绑定

dateRange
TSTupleType
默认值  () => [null, null]

选择日期范围时的值，用于v-model:dateRage绑定

formattedDateRange
TSTupleType
默认值  () => ['', '']

格式化后的日期段值，用于v-model:formattedDateRange绑定

format
string
默认值  'YYYY-MM-DD'

格式化模板，详情参考 Dayjs

formatter
TSFunctionType
默认值  defaultFormatter

自定义格式化函数

size
CSize
默认值  'md'

尺寸

hideOnSelect
boolean
默认值  true

是否在选择后自动收起下拉

range
boolean
默认值  false

是否使用日期段选择

placeholder
string
默认值  ''

预设文本

disabled
boolean
默认值  false

是否禁用

unit
Unit
默认值  'day'

选择单位，可用于v-model:unit绑定