# Datepicker

TIP

In each mode, datepicker will return a array of string like ['2019-12-31'] by an event @dates

# Multiple datepicker

In case of multiple datepicker on the same page, you can specify the id of each one with trigger-element-id prop.


  cp-datepicker(trigger-element-id="datepickerOne")

# Range

The CpDatepicker component is a basic datepicker component. It returns array of dates. It returns the event 'dates' with the array of dates.

You can specify its range by prop:

  • single
  • range
  cp-datepicker(mode="range")

TIP

It is single by default

# Init dates

You can specify a pre selected date by passing the initDateOne prop.


  cp-datepicker(init-date-one="2019-12-31")

TIP

In range mode, you can specify the end date by passing initDateTwoprop.

# Label

You can add a label to the component with label prop.


  cp-datepicker(label="Datepicker")

# Close after select

You can specify if the datepicker has to close after select or not with closeAfterSelectprop.

TIP

It is true by default


  cp-datepicker(:close-after-select="false")