Date Picker

Basic usage

Selected date: null
Selected date formatted:
Jul   2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
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
<script lang="ts">
  let date: Date | undefined = undefined
  let formattedDate = ''
</script>

<div>
  <b> Selected date: </b>
  {date}
</div>
<div class="my-4">
  <b> Selected date formatted: </b>
  {formattedDate}
</div>

<CDatePicker
  bind:value={date}
  bind:formattedValue={formattedDate}
  placeholder="Select date"
/>
svelte
Click fold/expand code

Disabled

Jul   2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
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
<script lang="ts">
  let date: Date
</script>

<CDatePicker bind:value={date} placeholder="Select date" disabled />
svelte
Click fold/expand code

Sizes

Jul   2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
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
Jul   2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
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
Jul   2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
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
Jul   2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
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
Jul   2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
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
<script lang="ts">
  let date: Date
</script>

<div class="c-flex c-items-center c-gutter-md c-wrap">
  <div>
    <CDatePicker size="xs" bind:value={date} placeholder="xs" />
  </div>
  <div>
    <CDatePicker size="sm" bind:value={date} placeholder="sm" />
  </div>
  <div>
    <CDatePicker bind:value={date} placeholder="md (default)" />
  </div>
  <div>
    <CDatePicker size="lg" bind:value={date} placeholder="lg" />
  </div>
  <div>
    <CDatePicker size="xl" bind:value={date} placeholder="xl" />
  </div>
</div>
svelte
Click fold/expand code

Select month & year

Selected month: null
Selected month formatted:
  2024
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Selected year: null
Selected year formatted:
  2024 - 2035
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
<script lang="ts">
  let month: Date
  let formattedMonth = ''
  let year: Date
  let yearFormatted = ''
</script>

<div class="grid md:grid-cols-2 grid-cols-1 gap-8">
  <div>
    <div>
      <b> Selected month: </b>
      {month}
    </div>
    <div class="my-2">
      <b> Selected month formatted: </b>
      {formattedMonth}
    </div>

    <CDatePicker
      bind:value={month}
      bind:formattedValue={formattedMonth}
      format="MM/YYYY"
      unit="month"
      placeholder="Select month"
    />
  </div>
  <div>
    <div>
      <b> Selected year: </b>
      {year}
    </div>
    <div class="my-2">
      <b> Selected year formatted: </b>
      {yearFormatted}
    </div>

    <CDatePicker
      bind:value={year}
      bind:formattedValue={yearFormatted}
      format="YYYY"
      unit="year"
      placeholder="Select year"
    />
  </div>
</div>
svelte
Click fold/expand code

Range select

Selected date range: ,
Selected date range formatted: ,
Jul   2024
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
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
<script lang="ts">
  let rangeValue: [Date, Date]
  let rangeFormattedValue: [string, string] = ['', '']
</script>

<div>
  <b> Selected date range: </b>
  {rangeValue}
</div>
<div class="my-2">
  <b> Selected date range formatted: </b>
  {rangeFormattedValue}
</div>

<CDatePicker
  bind:rangeValue
  bind:formattedRangeValue={rangeFormattedValue}
  placeholder="Select date range"
  range
/>
svelte
Click fold/expand code

CDatePicker Props

  • unit
    'year' | 'month' | 'day'
    default: day

    The select unit.

  • value
    Date | null
    default: null

    The selected date value. It is recommended to use bind:value.

  • formattedValue
    string
    default:

    The formatted display value. It is recommended to use bind:formattedValue.

  • rangeValue
    [Date | null, Date | null]
    default: undefined

    The date range value. This prop is used when in range select mode. It is recommended to use bind:rangeValue.

  • formattedRangeValue
    [string, string]
    default: undefined

    The formatted range value. It is recommended to use bind:formattedRangeValue.

  • format
    string
    default: YYYY-MM-DD

    The display format. For more information visit Dayjs

  • formatter
    (d: Date | null, format: string) => string=
    default: undefined

    Custom formatter function.

  • size
    'xs' | 'sm' | 'md' | 'lg' | 'xl'=
    default: undefined

    The size of date picker. Notice that the default is 'md' instead of undefined

  • placeholder
    string
    default:

    The placeholder. Same as CInput

  • disabled
    boolean
    default: false

    Determine whether the date picker is disabled or not.

  • range
    boolean
    default: false

    Determine use a date range selector or not.

  • hideOnSelect
    boolean
    default: true

    Hide the dropdown when date is selected.

  • validateOnClickOutside
    boolean
    default: true

    Determine whether do current form item validation on click outside or not.

CDatePicker Events

No data

CDatePicker Slots

No data

CDatePicker Exports

No data
Last update at: 2024/07/08 10:39:42