probablykasper/date-picker-svelte

Date and time picker for Svelte

Hi, I'm a developer from Norway

⭐️	📦 Repo	📚 Description
114	cpc	Text calculator with support for units and conversion
39	ferrum	Music library app for Mac, Linux and Windows
284	date-picker-svelte	Date and time picker for Svelte
98	kadium	App for staying ontop of YouTube channels' uploads
68	mr-tagger	Music file tagging app for Mac, Linux and Windows
79	time-machine-inspector	Time Machine backup size inspector app
64	remind-me-again	Toggleable cron reminders app for Mac, Linux and Windows
5	vidl	CLI for downloading video/audio
3	taskler	Simple text editor for your New Tab page
6	thumbnail-grabber	Chrome extension for grabbing thumbnails/covers
3	starchart	GitHub star history graph
3	embler	Turn binaries into applications
4	notifier	Android app for scheduling notifications
13	readme-template-action	Integrate GitHub API data in your README.md
17	redlux	AAC decoder for MPEG-4 and AAC files, with rodio support
1	2dcam	After Effects 2d camera
1	to	CLI audio, video and image file converter
1	serve	Simple static file/directory HTTP server

date-picker-svelte's Issues

feat: ability to pass name and id as props to set on input field

Awesome datepicker for Svelte!

Hopefully i'm not missing anything, but the ability to set name and id attributes on the input element inside of DateInput, via props, would be nice.

My use case is that i'd like the component to integrate more seamlessly with form libraries like felte and it's ValidationMessage component, which uses those attributes on the input to filter validation messages for display.

My use case is specific, but id and name are common attributes to set, and native, so i'd suspect this would enable other use-cases as well, without introducing anything opinionated to the api surface.

In lieu of that, I'll need to use the DatePicker and then manually bind it to an input, which isn't a big lift or anything, just busy work. Setting id and name via props on DateInput would make the component more turnkey for forms, me thinks :) .

add closeOnSelection prop on DatePicker

request add closeOnSelection prop on DatePicker

Feature Request: Ability to choose date range

Hi there, would love for this lib to be able to support the ability to select a date range. There's a serious lack of date picker components for Svelte / Sveltekit and would love to see this added!

Add selected date to "select" event

When the on:select event is triggered, the detail object is empty:

<script lang="ts">
  import { DateInput } from 'date-picker-svelte';

  const handleChange = (event: Event) => {
    console.log(event);
  };
</script>

<DateInput on:select={handleChange} />

Is it possible to add the selected date to that event?

Feature Request: Slot Support for Day Customization

Currenly there is no way to disable some days from being selected or to highlight some day. This functionality could be implemented within library but a quick way to allow this would be just to allow passing slot for the day in the compoment.

Proposed Behavior

<DatePicker let:calendarDay>
  <span>{calendarDay.number}</span>
</DatePicker

This will make something like this possible

<DatePicker bind:value let:calendarDay>
  <span
    class:highlighted-day={isHighlighted(calendarDay)}
    class:disabled-day={!isHighlighted(calendarDay)}
    on:click={(event) => {
      if (!isHighlighted(calendarDay)) {
        event.preventDefault();
        event.stopPropagation();
      }
    }}
    class="h-full w-full flex items-center justify-center"
  >
    <span>{calendarDay.number}</span>
  </span>
</DatePicker>

Add inputs to DatePicker

I love your datepicker. I think it is great!

I would love to be able to add some input values to the DatePicker Calendar.

I have a current calendar that allows us to add our own inputs. I also would like to have the option to add a button at the bottom. I would be able to handle all the bindings myself but just being able to add things below the calendar.

My thoughts are writing something like this and having the ability for the button to close the calendar once clicked.

<DatePicker> <select> <option value="">--Please choose an option--</option> <option value="foo">Foo</option> <option value="bar">Bar</option> </select> <button>test</button> </DatePicker>

Setting text class in DateInput?

Is there a way to use a text style class on the DateInput component? Here is what I am trying:

<div>
	<DateInput bind:value placeholder="eg. 2023-06-01 12:34:56" class="text-gray-400" />
</div>

But the class is not being applied to the text in the input.

I see in src/lib/DateInput.svelte that the class is being applied to the div that's around the input:

<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="date-time-field {classes}" on:focusout={onFocusOut} on:keydown={keydown}>
  <input

So I tried adding a new style that applies the original style to an input (using the @apply directive from tailwind):

<style>
	.text-gray-400-input input {
		@apply text-gray-400;
	}

But this requires a class directive class: instead of class=" which looks like it's not supported by this component.

Is there currently no way to customize the font in the DateInput? Or am I missing something obvious?

Styling for bootstrap

Hi,
I am still a little new to svelte...
Is there a way to style the input, so it is conform with my bootsrap formatiing?
see my example:

(using sveltestrap)
thx

Add `name` prop

I´m using your datepicker and it's really awesome. However, one thing I dont understand is how to put the datepicker in a form and set a name for it so it will be passed together with a form submit? Right now i created a normal input field that i hide with css and just bind that value together with the datepickers value but it would for sure be cool to just be able to add a name attribute to the Datepicker itself? Is it possible to do already or?

weekStartsOn invalid prop for DateInput

DateInput is missing the prop "weekStartsOn", I'm supplying it via a const object, but my console gives me this warning, I've also checked the component definition

Initial date bug

When providing max date and not passing any date to keep the placeholder visible when u open the date picker the date will always show 2003 year and no days untill you select a month or another year.

code to reproduce the bug

<script>
    import { DateInput } from 'date-picker-svelte'

    let date;
    let date_string;
    let is_date_valid;
    let max_date = new Date();

    // Atleast 14 years old
    max_date.setDate(max_date.getDate() - 5110);

    $: if (date && is_date_valid) {
        date.setHours(12, 0, 0, 0)
        date.toISOString()
        date_string = date.toISOString().slice(0, 10);
    }
</script>

<input bind:value={date_string} type="date" class="hidden" id="id_birth_date" name="birth_date">
<DateInput bind:value={date} bind:valid={is_date_valid} max={max_date} format="yyyy-MM-dd" placeholder="Select a date"/>

Month view in DatePicker does not change on date change.

If the date that is bound is changed from another source, the month (and maybe year) does not change according to the change that happened to the date.

Month stays the same.

for dateinput possibly open popup above the input field

When the dateinput component is at the bottom of the parent, it would be great if the popup could open above the input field

Do not change current selected date when changing month

First of all, let me thank you for a great datepicker.

I've noticed a behavior that seems to me unusual. When the month or year is switched, the new date is immediately selected.

For example, May 5 is currently selected. If we move the calendar forward one month, June 5 will be selected immediately, and so on. In my opinion the date should not be selected unless I explicitly click on the new date in the new month. At least this is how the datepicker works in Google calendar or the classic jQuery UI datepicker.

Is it possible to change the behavior of your datepicker, or at least make a setting for this behavior?

Ability to disable certain date/s and/or ranges or date

Add customizable CSS variables for unavailable dates when using min/max

Hello,

Thank you for this great component.

One neat feature that could come in handy is the ability to change the background color of unselectable dates when using the min and max properties. I think it would be convenient for the user to be able to recognize straight away the days they can click on instead of trying every one of them.

It might be a good first enhancement to gray them out without customizable CSS variables.

Not so dark-mode.

I have my date-picker configured to be in dark mode with some color tweaks.
But the combo box that contains the lists of the months is in light mode and the text not displaying correctly, shadowing the ones avaible and showing the unavaible like they're avaible.

Also, i would like to ask how to change the names of the months, because i need to put it on spanish, but can't seem to find the way to do it. If someone can be so kind to help me :).

Thanks.

Allow unrestricted date ranges without min/max

min and max are non-nullable and have default values. Changing this would require a textbox for setting the year.

min defaults to The start of the year - 20 years and max defaults to The end of today:

date-picker-svelte/src/lib/DatePicker.svelte

Lines 39 to 42 in 1912846

	/** The earliest year the user can select */
	export let min = new Date(defaultDate.getFullYear() - 20, 0, 1)
	/** The latest year the user can select */
	export let max = new Date(defaultDate.getFullYear(), 11, 31, 23, 59, 59, 999)

`valid` prop overridden

I have a 'start' and 'end' date time picker and I control if the end date is greater than the start date.
I want to reflect that visually by passing the 'valid' prop to the 'end' picker but it seems it's getting overridden by the internal date format check. Is it possible to do such change? Or is there is any other preferred ways?

Clicking on the arrow buttons submits the form (if the component is placed inside a form)

I'm trying to use this component for an upcoming project. Everything integrates very well except for one issue:

When the component is placed inside a form, clicking on the left/right arrows (to navigate between months) submits the form. This has led to some confusing results :-)

The solution would be to either replace the button tags with some div tags, or to add a "return: false;" or "stopPropagation" when clicking on the buttons.

Allow date-fns formatting

I've noticed there are limited tokens to be used for the DateInput text. date-fns is already a dependency so it would be nice to use the formatting provided by the dependency.

Is there any way to change year to be buddhist era?

I know datepicker can be changing a locale to any of 'date-fns/locale' can provide
but is there any way I can made the datepicker's year to be buddhist era?

Thank you.

Input field showing date only, no date-time?

Is it possible to remove the time part in the input field, set GMT/Zulu time by default?

Picker don't work on Firefox

Hi, on Firefox the component doesn't work correctly.

The mask doesn't update. I was trying to fix it but can't find the issue.

When passing browseWithoutSelecting and a value, month/year selector doesn't work

Hey, thanks for your work, the component is amazing.

I've seen that whenever you pass browseWithoutSelecting and a value, the month and year selectors (arrows included) don't work.

Here's a REPL replicating the bug: https://svelte.dev/repl/2c23cf5f7ae048e1808948bf1b3d2860?version=3.57.0

months dropdown doesn't seem to work

Click on a months dropdown. List of months appears. Click on any month. Month will not change.

Maybe I'm doing something wrong, or maybe this is by design since same behavior works fine with left and right arrows.

Behavior can be observed in REPL:
https://svelte.dev/repl/044911429c4b4e659362518d9a5deaae?version=3.49.0

Enable Time Input

Hey,

I discovered this nice library, but I wondered if you are able to activate the time picker function.

It would look like this..

Thanks in advance

d is not always a date type when you fill data from Rest API

date-picker-svelte/src/lib/DateInput.svelte

Line 27 in 648561e

} else if (d.getTime() !== $innerStore?.getTime()) {

we need a string check block over there so that we can convert string to date and then make those checking. Like this:

else if(typeof d === 'string'){ let temp = new Date(Date.parse(d)); if (temp.getTime() !== $innerStore?.getTime()){ innerStore.set(temp); value = temp; } }

Support for Year-Month precision?

It might be nice to show an abbreviated version of the picker when the desired precision is year-month, that excludes the calendarDay selection. Would need a way to configure the desired precision when invoking the component (can the format be used?) Dropping this here to open up for discussion.

[Feature request] Add more formats for the input

Hi, thank for the lovely library. I love it so much. Is there any way to add more formats for the input?

I got that format on the moment's doc

Feature Request: DateInput: ability to disable or make it view only

Currently I have a custom wrapper component for input, like so:

  <LabelInput
    label="Date"
    id="date"
    name="date"
    required
    {disabled}
  >
    <span slot="dateInput">
      <DateInput
        bind:value={date}
        format="MM/dd/yyyy"
        {min}
        {max}
        placeholder={min.toLocaleDateString(undefined, {
          year: "numeric",
          month: "numeric",
          day: "numeric",
        })}
      />
    </span>
  </LabelInput>

adding a disable prop to the DateInput would be a nice QoL feature when the component is meant only for displaying dates

stopPropagation on date select

Hi there, love your work. A quick one, I'm trying to apply a stopPropagation on the date select event but I believe I cant since your on:select event is custom.

So far what i've tried.

<script>
const select = (e) => {
  e.stopPropagation()
  doSomething()
}
</script>

<DatePicker bind:value={date} on:select={(e) => select(e)} />

Any chance we could add a on:click|stopPropagation @

date-picker-svelte/src/lib/DatePicker.svelte

Line 291 in 791a951

on:click={() => selectDay(calendarDay)}

Ability to pick time

Would be cool to expand the date picker by adding the ability to pick a time, with an optional 24h or 12h time format.
Currently, it is possible to pick a time only by typing the time information within the input.
What would be cool to have is the ability to show the calendar together with a list of times.

Could look similar to a native datetime-local input.

iPhone closeOnSelection triggered by month and year dropdown

When a month or a year is selected, the whole calendar popup gets closed, which makes it impossible to select a date.

This seems to happen only on iPhones, it works fine on Android

Defining name and id props does not POST the inner input

Specifically for DateInput, I have this code:

<label for="dateTaken" class="form-label"
    >Date Taken</label
>
<DateInput
    bind:value={dateTaken}
    format="yyyy/MM/dd"
    placeholder="Not set"
    id="dateTaken"
    name="dateTaken"
/>
{dateTaken}

within my form tag, upon submit, I see my other fields on the incoming post request except for dateTaken, submitting this issue before a doing a simple fork, not sure if adding those two fields would mess with the existing functionality

Month dropdown does not work

Using the arrows to change the months works great, but selecting the month via the dropdown doesn't change anything.
Had the issue on newest version on firefox V106.0.1

Conflicts in svelte resolve

Hi,

I upgraded my project dependencies and some new warnings appeared. This is the message:
[vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

Here there is more info about the conflicts by the vite-plugin-svelte team:
https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve

Add Icon

How to add an icon inside the input?

Min Date Disabled Minute Even On Next Hours

In my scenario, a user can't create a new event that is earlier than now. I am using the "min" value for this as new Date().

-- I can't choose an earlier date than I want (this is ok), but I can't choose an earlier minute on the same day even if I choose the next hours.

-- Screen Record link: https://youtu.be/nqiWTvIPqA4

Code block:
<DatePicker bind:value={date} visible="true" closeOnSelection={false} max = {new Date("2025-12-31 23:59:59")} min = {new Date()} />

Allow passing class props to DateInput

In DateInput.svelte allow us to add custom class in the input tag, by adding:

  <input
    class:invalid={!valid}
    class={$$props.class} //please add this
    type="text"
    bind:value={text}
    {placeholder}
    {disabled}
    on:focus={() => (visible = true)}
    on:mousedown={() => (visible = true)}
    on:input={input}
  />

Automatically infer locales

The Intl.DateTimeFormat API has a few neat utilities for date-specific localization, including ones that can be used by this component to simplify locales. Additionally when a provided local is not specified/undefined, it will automatically return data based on the user's navigator.language making it ideal for this sort of thing. It also means that there's no hardcoding or date formatting libraries required (I think).

function getDays(locale) {
	const { format } = new Intl.DateTimeFormat(locale, {
		weekday: "short"
	});
	return [...Array(7).keys()].map(day => format(new Date(Date.UTC(2000, 1, day))));
}

getDays(); // returns based on navigator.language. e.g. ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
getDays("ja-JP"); // returns a specific hardcoded locale. e.g. ["日","月","火","水","木","金","土"]

function getMonths(locale) {
	const { format } = new Intl.DateTimeFormat(locale, {
		month: "long"
	});
	return [...Array(12).keys()].map(month => format(new Date(2000, month)));
}

getMonths(); // returns based on navigator.language. e.g. ["January","February","March","April","May","June","July","August","September","October","November","December"]
getMonths("ja-JP"); // returns a specific hardcoded locale. e.g. ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]

In this setup, the consumer of the library can simply provide a locale string and have the browser automatically output a localized array. It also means that if no locale is specified (through props, I guess) the datepicker will use the user's system language without any bundle overhead from a library like date-fns.

Allow standard html attributes to be passed to `input`

Hello. I don't have a ton of experience in Svelte yet so maybe this is not an issue, but it would be great to allow any valid html attribute to be applied to the inner input this library exposes. Some examples I can think of

• id
• aria- attributes
• data- attributes

Is there an easy way to do this in Svelte or one would need to create wrapper proprs for all of them? This doesn't scale well with dynamic ones like data- which are custom (valid) attributes. Here's an example of how Vue handles this

Happy to put up a PR once we agree on the strategy here

Handle nullable date.

The library already allows null values, but when I pass to the DateInput I get this error:

Is there any way to add an element that removes the date from the picker?
Asking this cause my date field is nullable.

REPL broken, loading date-fns

The REPL linked from the homepage seems broken:

Cannot find "/af/index.js" in [email protected]

Funny enough, when I try different browsers, sometimes the error message changes to a different language directory (ar, sv, kk).

on:change call validation function?

on:change does not seem to fire when DatePicker is changed or closed. Is there an alernative way of calling a custom validation function when the user selects a date?

Allow loading the component without a default value

I'm assuming that if not binding a date with bind:value={date}, the placeholder value should be what's rendered in the field before selecting a date.

It's however not the case, as can be seen in the official demo.

The value in the field at page load defaults to the current date, NOT the placeholder value.

This occurs because the component loads with a default value here:

date-picker-svelte/src/lib/DateInput.svelte

Line 29 in 244b6c5

export let value = defaultDate

Which is set to the current date here:

date-picker-svelte/src/lib/DateInput.svelte

Line 11 in 244b6c5

const defaultDate = new Date()

I hope we can fix this, as showing a non-date placeholder like -- / -- / ---- or Select date is a pretty common use case.

Outline 'today' on date picker

Enhancement request: It would be great to outline today's date on the calendar to make it easier to identify. Similar to how Flatpickr or MUI style the today item.

svelte 4 update ?

I've briefly tested on svelte 4 but couldn't detect any problem.
Are you considering upgrading the peer dependency requirement to svelte 4 ?
Through a new version maybe ?

Custom CSS

Hello,

Thanks for a great component!

I'm trying to change --sc-theme-calendar-maxWidth: 100vw;
to: --sc-theme-calendar-maxWidth: 80vw;

I can't seem to figure out where to place this to take over the css variable.

Any help would be great.

Thanks Again.

Support for natural tabbing experience

This came up for me while testing ISSUE#1

Currently when you tab into the date picker, the entire picker is selected and you can start left-right-up-down navigating through dates but there is no visual clue that a user could start doing this. Then the tab moves to the year, and then month.

Proposal:
When you tab into the picker:

1. the year becomes active first - they can select the year with keyboard (up/down - spacebar to select)
2. next tab is the month (similar experience to date)
3. next tab is into the calendarDay section - the default day gets highlighted and they can tab/shift-tab forwards and backwards through the days (or use the arrow keys as current). In addition to clicking on the day, the user can use the spacebar to select the day (just like a checkbox or radio button)

I will throw together an experimental PR