DatePicker DatePicker is used to select or input a date.
Usage import { DatePicker } from 'stwui' ;
import DatePicker from 'stwui/date-picker' ; <script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker name ="date" placeholder ="Basic" /> <script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker name ="date" allowClear >
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
</DatePicker > With day limit (min: 11/4/2025) Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker name ="date" allowClear >
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
</DatePicker > With Leading Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
const calendar = "svg-path" ;
</script>
<DatePicker
name ="date"
allowClear
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Leading slot ="leading" data ={calendar} />
</DatePicker > With Trailing Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
const calendar = "svg-path" ;
</script>
<DatePicker
name ="date"
label ="Date"
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > <script lang="ts" >
import { DatePicker } from 'stwui' ;
let value : Date | null ;
let error : string | undefined = "You're doing it wrong!" ;
$ : if (value) {
error = undefined ;
} else {
error = "You're doing it wrong!" ;
}
</script>
<DatePicker
name ="date"
label ="Date"
bind:value
{error }
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > <script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker
name ="date"
label ="Date"
disabled
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > <script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker
name ="date"
label ="Date"
showTime
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > With Time (24 hour) Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker
name ="date"
label ="Date"
showTime
format ="MMMM D, YYYY @ H:mm"
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > With Time And Step Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker
name ="date"
label ="Date"
showTime
minuteStep ={15}
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > <script lang="ts" >
import { DatePicker } from 'stwui' ;
import type { DatePickerAction } from 'stwui/types' ;
let value : Date | null ;
function handleToday (const today = dayjs ().toISOString ();
value = new Date (today);
}
let actions : DatePickerAction [] = [
{
label : 'Today' ,
action : handleToday
}
]
</script>
<DatePicker
name ="date"
label ="Date"
{actions }
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > With user input Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker
name ="date-10"
placeholder ="MM/DD/YYYY"
class ="w-full"
allowUserInput
format ="MM/DD/YYYY"
/> With user input (with time) Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker
name ="date-11"
placeholder ="MM/DD/YYYY HH:mm"
class ="w-full"
allowUserInput
showTime
format ="MM/DD/YYYY HH:mm"
/> <script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker
name ="date"
label ="Date"
mobile
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > Mobile With Actions Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
import type { DatePickerAction } from 'stwui/types' ;
let value : Date | null ;
function handleToday (const today = dayjs ().toISOString ();
value = new Date (today);
}
let actions : DatePickerAction [] = [
{
label : 'Today' ,
action : handleToday
}
]
</script>
<DatePicker
bind:value
name ="date"
label ="Date"
mobile
{actions }
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker > Mobile With Time Preview
Code
<script lang="ts" >
import { DatePicker } from 'stwui' ;
</script>
<DatePicker
name ="date"
label ="Date"
mobile
showTime
>
<DatePicker.Label slot ="label" > Date</DatePicker.Label >
<DatePicker.Trailing slot ="trailing" data ={calendar} />
</DatePicker >
Localization By default, the locale is en-US. However, there are several other locales available
through Dayjs. To use other languages, you can simply import the locale and assign it
globally. Once you import the locale, you can call dayjs.locale()
with the key of the imported locale to change the global locale. The list of supported locales
can be found
here .
import dayjs from 'dayjs' ;
import 'dayjs/locale/de' ;
dayjs.locale ('de' ); DatePicker Props name string nanoid() error string | undefined placeholder string | undefined value Date | null null min Date | undefined max Date | undefined format string (dayjs format ) MMMM D, YYYY | MMMM D, YYYY @ h:mm A locale Locale {} visible boolean false closeOnSelect boolean true disabled boolean false showTime boolean false mobile boolean false allowUserInput boolean false
DatePicker Slots label <Input.Label slot="label" /> Copy
leading <Input.Leading slot="leading" /> Copy
trailing <Input.Trailing slot="trailing" /> Copy
DatePicker.Leading Props data string (IconData) viewBox string 0 0 24 24 size string 24px width string 24px height string 24px color string currentColor stroke string | undefined fill string currentColor
DatePicker.Trailing Props data string (IconData) viewBox string 0 0 24 24 size string 24px width string 24px height string 24px color string currentColor stroke string | undefined fill string currentColor
DatePicker Class Identifiers stwui-datepicker-wrapper stwui-datepicker-trigger stwui-datepicker-input stwui-datepicker-clear-wrapper stwui-datepicker-leading-wrapper stwui-datepicker-trailing-wrapper stwui-datepicker-error-icon stwui-datepicker-error stwui-datepicker-calendar-wrapper stwui-datepicker-previous-year stwui-datepicker-previous-month stwui-datepicker-current-month-wrapper stwui-datepicker-next-month stwui-datepicker-next-year stwui-datepicker-actions-wrapper stwui-datepicker-apply-clear-wrapper stwui-datepicker-timepicker-wrapper stwui-datepicker-label
