# Demo

# Default

<Datepicker placeholder="Select Date" />

# v-model


Wed Apr 16 2025 03:31:06 GMT+0000 (Coordinated Universal Time)

<Datepicker v-model="vModelExample" />

# First day of Week

<Datepicker first-day-of-week="mon" />

# Don't show edge dates

<Datepicker :show-edge-dates="false" />

# Custom open Date

Settings
openDate: 

<Datepicker :open-date="openDate" />

# Inline

Sun Mon Tue Wed Thu Fri Sat
<Datepicker :inline="true" />

# Fixed position

<Datepicker fixed-position="top-right" />

# Rtl

<Datepicker :language="$datepickerLocals.he" />

# Day view only

<Datepicker minimum-view="day" maximum-view="day" />

# Day and month view only

<Datepicker minimum-view="day" maximum-view="month" initial-view="month" />

# With Button

<Datepicker :calendar-button="true" :show-calendar-on-button-click="true" />

# Year picker range

Settings
yearPickerRange: 10

<Datepicker :year-picker-range="yearPickerRange" />

# Comparison append picker to body

Don't append datepicker to body

Append to body

<Datepicker :append-to-body="true" />

# Comparison use utc or not

UTC

UTC date: 

Browser Timezone

Browser timezone date: 
<Datepicker :use-utc="true" />