Needs to be update to work in Runes mode

[gregg-cbs]

I know its tricky but how can we get this component to work when svelte is in Runes mode?

[AndreaGero]

Hello,

I've tried and it is working with Runes:

let startDate = $state(new Date());
let isOpen = $state(false);

function formatDate(dateString: Date) {
	if (isNaN(new Date(dateString).getMilliseconds())) {
		return '';
	}
	return (dateString && format(new Date(dateString), 'dd/MM/yyyy')) || '';
}

let formattedStartDate = $derived.by(() => formatDate(startDate));

const toggleDatePicker = () => (isOpen = !isOpen);

[gregg-cbs]

@AndreaGero In your svelte config please enable runes mode and then tell us if it works in Runes mode, seems you are confusing using Runes with Runes mode - Svelte 5 by default toggles between svelte 4 and 5 behavior depending on the components code for backwards compatibility. If you do not set runes mode to true in the config then the datepicker component will be running with svelte 4 reactivity, this is bad because then the whole page runs in svelte 4 reactivity which defeats the fine grained reactivity you get with Runes and in our case caused unnecessary dom updates and refreshes when unrelated state changed.

// svelte.config.js
const config = {
  compilerOptions: {
    runes: true,
  }
}

[gregg-cbs]

I forked this repo and migrated it to svelte 5 for my project, was not too bad of a change

[joecorsi]

I forked this repo and migrated it to svelte 5 for my project, was not too bad of a change

any chance you can share the repo?

[gregg-cbs]

Yeah i can, i am swapping out the css variables for plain css as i find it impossible to style or to work with the css when using variables. After that I will share the fork here so you can use it.

[joecorsi]

Yeah i can, i am swapping out the css variables for plain css as i find it impossible to style or to work with the css when using variables. After that I will share the fork here so you can use it.

thanks!

[gregg-cbs]

Here is the gist. It works in svelte 5 in runes mode.

A note is that i did not style Multipane and Showpresets. I have removed all original css and redid it because the original CSS was a mess, my css is not the easiest to modify because of how the classes are being applied but it works and its a lot less code. It looks the same as the original component. I allowed the calendar to be any width and it will work properly so you can make the calendar wider or thinner and the box sizes will adjust.

I am not maintaining this, i did this for myself and it works for me, hopefully it works for you. Copy and paste these files to your project and give it a try: https://gist.github.com/gregg-cbs/5a401f03d6b53c7a8d5587c0269a27be