packages/docs/src/routes/(routes)/components/calendar/+page.md
</svelte:head>
:INFO:
You can also use the native HTML
<input type="date">for a date picker. Read more
daisyUI includes styles for 3 popular calendar libraries.
Use any of them, based on your needs.
You don't need to import the CSS files for these libraries. daisyUI will style them automatically.
Cally is a web component calendar and it works everywhere. Read the docs
<!--
* Import Cally web component from CDN
<script type="module" src="https://unpkg.com/cally"></script>
* Or install as a dependency:
npm i cally
* and import it in JS
import "cally";
-->
<calendar-date class="$$cally bg-base-100 border border-base-300 shadow-lg rounded-box">
<svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
<svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
<calendar-month></calendar-month>
</calendar-date>
<!--
* Import Cally web component from CDN
<script type="module" src="https://unpkg.com/cally"></script>
* Or install as a dependency:
npm i cally
* and import it in JS
import "cally";
-->
<button popovertarget="cally-popover1" class="$$input $$input-border" id="cally1" style="anchor-name:--cally1">
Pick a date
</button>
<div popover id="cally-popover1" class="$$dropdown bg-base-100 rounded-box shadow-lg" style="position-anchor:--cally1">
<calendar-date class="$$cally" onchange={document.getElementById('cally1').innerText = this.value}>
<svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
<svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
<calendar-month></calendar-month>
</calendar-date>
</div>
Pikaday is a JS datepicker library and you can use it from CDN or as a JS dependency Read the docs
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<input type="text" class="$$input $$pika-single" id="myDatepicker">
<script>
var picker = new Pikaday({ field: document.getElementById('myDatepicker') });
</script>
npm i pikaday
<script>
import Pikaday from "pikaday";
let myDatepicker;
$effect(() => {
if (myDatepicker) {
const picker = new Pikaday({
field: myDatepicker
});
return () => picker.destroy();
}
});
</script>
<input type="text" class="$$input $$pika-single" bind:this={myDatepicker} value="Pick a day" />
npm i pikaday
<script>
import Pikaday from "pikaday";
export default {
mounted: function() {
const picker = new Pikaday({
field: this.$refs.myDatepicker
});
}
};
</script>
<template>
<input type="text" class="$$input $$pika-single" ref="myDatepicker" value="Pick a day"/>
</template>
npm i pikaday
import { useEffect, useRef } from "react";
import Pikaday from "pikaday";
export default function App() {
const myDatepicker = useRef(null);
useEffect(() => {
const picker = new Pikaday({
field: myDatepicker.current
});
return () => picker.destroy();
}, []);
return (
<input type="text" className="$$input $$pika-single" defaultValue="Pick a date" ref={myDatepicker} />
);
}
React Day Picker is a flexible date picker component for React. Read the docs
npm i react-day-picker
import { useState } from "react";
import { DayPicker } from "react-day-picker";
export default function App() {
const [date, setDate] = useState<Date | undefined>();
return (
<>
<button popoverTarget="rdp-popover" className="$$input $$input-border" style={{ anchorName: "--rdp" } as React.CSSProperties}>
{date ? date.toLocaleDateString() : "Pick a date"}
</button>
<div popover="auto" id="rdp-popover" className="$$dropdown" style={{ positionAnchor: "--rdp" } as React.CSSProperties}>
<DayPicker className="$$react-day-picker" mode="single" selected={date} onSelect={setDate} />
</div>
</>
);
}