Date Picker

Basic usage

Selected date: null
Selected date formatted:
Aug   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
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
<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"
/>
<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

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

<CDatePicker bind:value={date} placeholder="Select date" disabled />
<script lang="ts">
  let date: Date
</script>

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

Sizes

Aug   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
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
Aug   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
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
Aug   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
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
Aug   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
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
Aug   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
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
<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>
<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:
  2023
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Selected year: null
Selected year formatted:
  2023 - 2034
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
<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>
<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: ,
Aug   2023
Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
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
<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
/>
<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
Suggest changes to this page
Last update at: 2023/08/13 13:04:55