Casual UI - Vue

Basic Usage

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="Select date"
  />
  <p><strong>date:</strong> {{ date }}</p>
  <p><strong>formattedValue:</strong> {{ formattedValue }}</p>
</template>
Click to open/fold code
Open Vue Repl Editor

Disabled

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>
Click to open/fold code
Open Vue Repl Editor

Sizes

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="xs"
      size="xs"
    />
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="sm"
      size="sm"
    />
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="md (default)"
    />
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="lg"
      size="lg"
    />
    <c-date-picker
      v-model="date"
      v-model:formattedValue="formattedValue"
      placeholder="xl"
      size="xl"
    />
  </div>
  <p><strong>date:</strong> {{ date }}</p>
  <p><strong>formattedValue:</strong> {{ formattedValue }}</p>
</template>
Click to open/fold code
Open Vue Repl Editor

Range Select

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="Select range"
  />
  <p><strong>dateRange:</strong> {{ dateRange }}</p>
  <p><strong>formattedRange:</strong> {{ formattedRange }}</p>
</template>
Click to open/fold code
Open Vue Repl Editor

Month & Year

  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="Select month"
        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="Select year"
        format="YYYY"
        unit="year"
      />
      <p><strong>year:</strong> {{ year }}</p>
      <p><strong>formattedYear:</strong> {{ formattedYear }}</p>
    </div>
  </div>
</template>
Click to open/fold code
Open Vue Repl Editor

CDatePicker API

Props
Events
modelValue
Date | null
Default  () => new Date()

Selected date. Can be used with v-model.

formattedValue
string
Default  ''

Selected date after formatted. Can be used with v-model:formattedValue.

dateRange
TSTupleType
Default  () => [null, null]

The selected date range. Can be used with v-model:dateRange.

formattedDateRange
TSTupleType
Default  () => ['', '']

The selected date range after formatted. Can be used with v-model:formattedDateRange.

format
string
Default  'YYYY-MM-DD'

The format template. Refer to day.js for more information.

formatter
TSFunctionType
Default  defaultFormatter

Custom format function.

size
CSize
Default  'md'

The size of date picker.

hideOnSelect
boolean
Default  true

Determine whether to fold dropdown when date selected or not.

range
boolean
Default  false

Determine whether is range select or not.

placeholder
string
Default  ''

The placeholder of date picker.

disabled
boolean
Default  false

Determine whether is disabled or not.

unit
Unit
Default  'day'

The select unit. Can be used with v-model:unit.