} SetterMap
253 | */
254 |
255 | const formatHelper = {
256 | validParts: function(/** @type {string} */ type) {
257 | if (type === 'standard') {
258 | return /t|hh?|HH?|p|P|z|ii?|ss?|dd?|DD?|S|mm?|MM?|yy(?:yy)?/g;
259 | } else if (type === 'php') {
260 | return /[dDjlNwzFmMnStyYaABgGhHisU]/g;
261 | } else {
262 | throw new Error('Invalid format type.');
263 | }
264 | },
265 | nonpunctuation: /[^ -\/:-@\[-`{-~\t\n\rTZ]+/g,
266 | /**
267 | *
268 | * @param {string} format
269 | * @param {string} type
270 | * @returns {{ separators: string[], parts: string[]} }
271 | */
272 | parseFormat: function (/** @type {string} */ format, /** @type {string} */ type) {
273 | // IE treats \0 as a string end in inputs (truncating the value),
274 | // so it's a bad format delimiter, anyway
275 | var separators = format.replace(this.validParts(type), '\0').split('\0'),
276 | parts = format.match(this.validParts(type)) || [];
277 | if (!separators || !separators.length || !parts || parts.length === 0) {
278 | // throw new Error('Invalid date format.');
279 | console.warn('invalid date format', separators, parts);
280 | }
281 | return {separators: separators, parts: parts};
282 | },
283 | /**
284 | * @param {string} type
285 | * @returns {{setters_map: SetterMap, setters_order: string[]}}
286 | */
287 | setters: function(type) {
288 | /** @type {string[]} */
289 | let setters_order
290 | /** @type {SetterMap} */
291 | let setters_map = {};
292 | if (type === 'standard') {
293 | setters_order = ['yyyy', 'yy', 'm', 'mm', 'M', 'MM','d', 'dd', 'D','DD', 'hh', 'h', 'HH', 'H', 'ii', 'i', 'ss', 's', 'S', 'p', 'P', 't'];
294 | setters_map = {
295 | hh: (d, v) => d.setHours(v),
296 | h: (d, v) => d.setHours(v),
297 | HH: (d, v) => d.setHours(v === 12 ? 0 : v),
298 | H: (d, v) => d.setHours(v === 12 ? 0 : v),
299 | i: (d, v) => d.setMinutes(v),
300 | s: (d, v) => d.setSeconds(v),
301 | yyyy: (d, v) => d.setFullYear(v),
302 | yy: (d, v) => d.setFullYear((v < 50 ? 2000 : 1900) + v),
303 | m: (d, v) => {
304 | v -= 1;
305 | while (v < 0) v += 12;
306 | v %= 12;
307 | d.setMonth(v);
308 | while (d.getMonth() !== v)
309 | if (isNaN(d.getMonth()))
310 | return d;
311 | else
312 | d.setDate(d.getDate() - 1);
313 | return d;
314 | },
315 | d: (d, v) => d.setDate(v),
316 | p: (d, v) => d.setHours(v === 1 && d.getHours() < 12 ? d.getHours() + 12 : d.getHours()),
317 | t: (d, v) => d.setTime(v),
318 | mm: ()=>{},
319 | M: ()=>{},
320 | MM: ()=>{},
321 | ii: ()=>{},
322 | ss: ()=>{},
323 | dd: ()=>{},
324 | D: ()=>{},
325 | DD: ()=>{},
326 | P: ()=>{}
327 | };
328 | setters_map.mm = setters_map.M = setters_map.MM = setters_map.m;
329 | setters_map.ii = setters_map.i;
330 | setters_map.ss = setters_map.s;
331 | setters_map.dd = setters_map.D = setters_map.DD = setters_map.d;
332 | setters_map.P = setters_map.p;
333 | } else {
334 | // php
335 | setters_order = ['Y','yy','m','M','F','n','d','D','j','l','N','S','H','G','h','g','i','s','p','P','U'];
336 | setters_map = {
337 | H: (d, v) => d.setHours(v),
338 | G: (d, v) => d.setHours(v),
339 | h: (d, v) => d.setHours(v === 12 ? 0 : v),
340 | g: (d, v) => d.setHours(v === 12 ? 0 : v),
341 | i: (d, v) => d.setMinutes(v),
342 | s: (d, v) => d.setSeconds(v),
343 | Y: (d, v) => d.setFullYear(v),
344 | yy: (d, v) => d.setFullYear((v < 50 ? 2000 : 1900) + v),
345 | m: (d, v) => {
346 | v -= 1;
347 | while (v < 0) v += 12;
348 | v %= 12;
349 | d.setMonth(v);
350 | while (d.getMonth() !== v)
351 | if (isNaN(d.getMonth()))
352 | return d;
353 | else
354 | d.setDate(d.getDate() - 1);
355 | return d;
356 | },
357 | n: (d, v) => d.setMonth(v - 1),
358 | d: (d, v) => d.setDate(v),
359 | a: (d, v) => d.setHours(v === 1 ? d.getHours() + 12 : d.getHours()),
360 | U: (d, v) => d.setTime(v * 1000)
361 | };
362 | setters_map.F = setters_map.M = setters_map.m;
363 | setters_map.D = setters_map.j = setters_map.l = setters_map.N = setters_map.d;
364 | setters_map.A = setters_map.a;
365 | }
366 | return { setters_order, setters_map };
367 | }
368 | }
369 |
--------------------------------------------------------------------------------
/src/lib/utils/grid.js:
--------------------------------------------------------------------------------
1 |
2 | import { MODE_YEAR, MODE_DECADE } from "./constants.js";
3 | import { getDaysInMonth } from "./dateUtils.js";
4 |
5 | /**
6 | * @typedef {object} Dataset
7 | * @property {any[][]} grid
8 | * @property {Date[][]} days
9 | * @property {string[][]} months
10 | * @property {number[][]} years
11 | * @property {number[]} selectionMark
12 | * @property {number} todayMark
13 | * @property {number} prevTo
14 | * @property {number} nextFrom
15 | *
16 | * @typedef {import("$lib/i18n").i18nType} i18nType
17 | */
18 |
19 | /**
20 | * Compute view grid content based on given 'currentView' property
21 | *
22 | * @param {Date} currentDate
23 | * @param {Date[]} selectedDates
24 | * @param {number} view
25 | * @param {i18nType} locale
26 | * @param {number} weekStart
27 | * @returns {Dataset}
28 | */
29 | export function compute(currentDate, selectedDates, view, locale, weekStart) {
30 |
31 | /** ************************************ MODE_DECADE: */
32 | /** ************************************ years 4 x 3 */
33 | if (view === MODE_DECADE) {
34 | let prevTo = 10; // base is year 2000
35 | let nextFrom = 20;
36 | const todayMark = -1;
37 | const grid = [];
38 | let yearRow = [];
39 | let currYear = currentDate.getFullYear() - (currentDate.getFullYear() % 10);
40 | currYear -= (currYear % 20 ? 12 : 10);
41 | if (currYear % 10) { // if start is 10
42 | prevTo = 12;
43 | nextFrom = 22;
44 | }
45 | for (let i = 0; i < 32; i++) {
46 | yearRow.push(currYear + i);
47 | if (yearRow.length === 4) {
48 | grid.push(yearRow);
49 | yearRow = [];
50 | }
51 | }
52 | /** @var number[] */
53 | let selectionMark = [];
54 | if (!selectedDates[0]) {
55 | selectedDates[0] = new Date();
56 | }
57 | if (selectedDates[0].getFullYear() >= currYear) {
58 | selectionMark.push(selectedDates[0].getFullYear() % currYear);
59 | }
60 |
61 | // @ts-ignore
62 | return {
63 | years: grid, todayMark, nextFrom, prevTo, selectionMark
64 | }
65 | }
66 |
67 | /** ************************************ MODE_YEAR: */
68 | /** ************************************ months 4 x 3 */
69 | if (view === MODE_YEAR) {
70 | let grid = [];
71 | let monthRow = [];
72 | let prevTo = 12;
73 | let nextFrom = 24;
74 | const ISO = currentDate.toISOString().split('T')[0].substring(0, 8);
75 | const dateNormalized = new Date(ISO + '01 00:00:00');
76 | const initYear = dateNormalized.getFullYear() - 1;
77 | dateNormalized.setFullYear(initYear);
78 | let todayMark = 0;
79 | for (let y = 0; y < 3; y++) {
80 | for (let i = 0; i < 12; i++) {
81 | dateNormalized.setMonth(i);
82 | monthRow.push(locale.monthsShort[i % 12]);
83 | if (monthRow.length === 4) {
84 | grid.push(monthRow);
85 | monthRow = [];
86 | }
87 | }
88 | dateNormalized.setFullYear(dateNormalized.getFullYear() + 1);
89 | }
90 | /** @type {number[]} */
91 | let selectionMark = [];
92 | if (!selectedDates[0]) {
93 | selectedDates[0] = new Date();
94 | }
95 | if (selectedDates[0].getFullYear() - initYear >= 0 && selectedDates[0].getFullYear() - initYear <= 2) {
96 | selectionMark.push(selectedDates[0].getMonth() + ((selectedDates[0].getFullYear() - initYear || 0) * 12));
97 | }
98 | // @ts-ignore
99 | return {
100 | months: grid, todayMark, nextFrom, prevTo, selectionMark
101 | }
102 | }
103 |
104 | /** ************************************ MONTH */
105 | /** ************************************ days 7x6 */
106 | let d = currentDate || new Date(), // or currently selected date
107 | y = d.getFullYear(),
108 | m = d.getMonth(),
109 | dM = d.getDate(),
110 | h = d.getHours(),
111 | today = new Date();
112 | let prevMonth = new Date(y, m-1, 28, 0, 0, 0, 0),
113 | day = getDaysInMonth(prevMonth.getFullYear(), prevMonth.getMonth());
114 | prevMonth.setDate(day);
115 | prevMonth.setDate(day - (prevMonth.getDay() - weekStart + 7) % 7);
116 |
117 | let nextMonth = new Date(prevMonth);
118 | nextMonth.setDate(nextMonth.getDate() + 42);
119 | let nextMonthValue = nextMonth.valueOf();
120 |
121 | let grid = [];
122 | let dayRow = [];
123 | let todayMark = -1;
124 | /** @type {number[]} */
125 | let selectionMark = [];
126 | let prevTo = 0;
127 | let nextFrom = 42;
128 | let inc = 0;
129 | while(prevMonth.valueOf() < nextMonthValue) {
130 | inc++;
131 | dayRow.push(new Date(prevMonth));
132 | if (prevMonth.getFullYear() < y || (prevMonth.getFullYear() === y && prevMonth.getMonth() < m)) {
133 | prevTo = inc;
134 | } else if (nextFrom === 42 && (prevMonth.getFullYear() > y || (prevMonth.getFullYear() === y && prevMonth.getMonth() > m))) {
135 | nextFrom = inc - 1;
136 | }
137 |
138 | prevMonth.setDate(prevMonth.getDate() + 1);
139 |
140 |
141 | if (prevMonth.getFullYear() === today.getFullYear() &&
142 | prevMonth.getMonth() === today.getMonth() &&
143 | prevMonth.getDate() === today.getDate()
144 | ) {
145 | todayMark = inc;
146 | }
147 | if (selectionMark.length !== selectedDates.length) {
148 | selectedDates.map(s => {
149 | if (prevMonth.getFullYear() === s.getFullYear()
150 | && prevMonth.getMonth() === s.getMonth()
151 | && prevMonth.getDate() === s.getDate()
152 | )
153 | selectionMark.push(inc);
154 | })
155 | }
156 |
157 | if (dayRow.length === 7) {
158 | grid.push(dayRow);
159 | dayRow = [];
160 | }
161 | }
162 | // @ts-ignore
163 | return {
164 | grid, days: grid, todayMark, prevTo, nextFrom, selectionMark,
165 | };
166 | }
167 |
--------------------------------------------------------------------------------
/src/lib/utils/state.js:
--------------------------------------------------------------------------------
1 | import { formatDate, parseDate } from "./dateUtils.js";
2 |
3 | /**
4 | * @typedef {object} ValueInit
5 | * @property {string[]} iValues
6 | * @property {string|null} iValueCombined
7 | * @property {Date[]} iDates
8 | */
9 |
10 | /**
11 | * Init internal props
12 | *
13 | * @param {string|string[]|null} value
14 | * @param {string} format
15 | * @param {import("$lib/i18n/index.js").i18nType} i18n
16 | * @param {string} formatType
17 | * @returns {ValueInit}
18 | */
19 | export function initProps(value, format, i18n, formatType) {
20 | /** @type {string[]} */
21 | let valueArray = value
22 | ? (Array.isArray(value)
23 | ? value
24 | : value.split(',') // for range we can get combined string
25 | )
26 | : [];
27 |
28 | // strip seconds if present in initial value
29 | valueArray = valueArray.map(value => value.replace(/(:\d+):\d+(.*)/, "$1$2"));
30 |
31 | return {
32 | iValues: valueArray,
33 | iValueCombined: valueArray.length ? valueArray.join() : null,
34 | iDates: valueArray.map(val => parseDate(val, format, i18n, formatType)),
35 | }
36 | }
37 |
38 | /**
39 | * FUTURE: test that this works for PHP format type as well
40 | *
41 | * @param {'auto'|'date'|'datetime'|'time'} mode
42 | * @param {string} format
43 | * @returns {'date'|'datetime'|'time'}
44 | */
45 | export function computeResolvedMode(mode, format) {
46 | return mode === "auto"
47 | ? format.match(/g|hh?|ii?/i) && format.match(/y|m|d/i)
48 | ? "datetime"
49 | : format.match(/g|hh?|ii?/i)
50 | ? "time"
51 | : "date"
52 | : mode;
53 | }
54 |
--------------------------------------------------------------------------------
/src/lib/utils/transitions.js:
--------------------------------------------------------------------------------
1 | import { cubicOut } from 'svelte/easing';
2 |
3 |
4 | /**
5 | *
6 | * @typedef {object} ScaleParams
7 | * @property {number} duration
8 | * @property {number} start
9 | * @property {number} opacity
10 | * @property {number|undefined} end
11 | *
12 | * @param {HTMLElement} node
13 | * @param {ScaleParams | import('svelte/transition').FadeParams} params
14 | * @returns {import('svelte/transition').TransitionConfig}
15 | */
16 | // @ts-ignore
17 | export function scale(node, { duration = 400, start = 0, end = 1, opacity = 0 }) {
18 | const style = getComputedStyle(node);
19 | const target_opacity = +style.opacity;
20 | const transform = style.transform === 'none' ? '' : style.transform;
21 | const sd = 1 - start;
22 | const od = target_opacity * (1 - opacity);
23 | end = end || 1;
24 | return {
25 | delay: 0,
26 | duration,
27 | easing: cubicOut,
28 | css: (/** @type number */ _t, /** @type number */ u) => `
29 | transform: ${transform} scale(${end !== 1 ? start + end * u : 1 - (sd * u)});
30 | opacity: ${target_opacity - (od * u)};
31 | `
32 | };
33 | }
34 |
--------------------------------------------------------------------------------
/src/routes/+layout.server.js:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 |
--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
95 |
96 |
97 |
98 | {#if !isWide}
99 |
100 |
101 | {
104 | e.stopPropagation();
105 | onNavToggle();
106 | }}
107 | >
108 | Menu
112 |
113 |
114 |
115 | {/if}
116 |
117 | 📅 Svelty Picker
118 |
119 |
129 |
130 |
133 |
134 |
135 |
158 |
159 |
160 | {@render children?.()}
161 |
162 |
163 | {#if page_nav.length}
164 | On this page
165 |
166 | {#each page_nav as link}
167 | {link.text}
171 | {/if}
172 |
173 |
174 |
175 |
176 |
177 | Made with
Svelte ❤ by
Martin Skocik .
178 | ♦
179 | You can support me through
GitHub .
180 |
181 |
182 |
47 |
48 |
49 |
50 | Date Picker: {date_datepicker}
51 | updatePickersValue(date, 'date')} />
53 |
54 |
55 | Time Picker: {date_timepicker}
56 | updatePickersValue(time, 'time')} />
58 |
59 |
60 |
88 |
89 | Date Time Picker: {date_datetime}
90 |
91 |
92 |
94 |
95 |
96 |
99 | Date Range picker: {date_range}
100 |
101 |
102 |
104 |
105 |
106 |
107 |
108 | Date Time Range picker: {datetime_range}
109 |
110 |
111 |
113 |
114 |
115 |
139 |
--------------------------------------------------------------------------------
/src/routes/autocommit-changes/+page.svelte.md:
--------------------------------------------------------------------------------
1 |
31 |
32 |
33 | # Auto-commit changes
34 |
35 |
36 | On every change by mouse/touch, change callbacks are triggered. So if you use `datetime` picker, for every part - day, hour, minute there will be one event triggered. In some situations this may not be desired, therefore you can disable `autocommit`
37 |
38 |
39 |
40 |
41 |
42 |
43 | Historical context
44 |
45 |
46 | Previous versions (below v4) had problem that every interaction triggered change event. This was visible especially when picker was used in `datetime` mode.
47 | Therefore the whole logic has been reworked and basically we can talk about two modes - "auto commit" and "manual commit".
48 |
49 |
50 |
51 | In v6 it was reverted back, because it simplified codebase massively and it's really straightforward
52 |
53 |
55 |
56 |
57 |
58 |
59 | ### Auto-commit mode
60 |
61 | For datepicker it's simple. User picks a date, bound value (if any) is updated, `change` event triggered and picker is closed.
62 | For timepicker it's very similar (`change` triggered on every update) with the exception that picker closes automatically only
63 | after _minute_ selection. So you can change hour many times and picker will stay open. Select minutes and it will close. Also event is triggered etc.
64 |
65 | When using keyboard to change date, bound value is not updated immediately, but only by hitting Enter or on input
66 | blur. This is very important distinction against manual value setting.
67 |
68 | ### Manual-commit mode
69 |
70 | When `autocommit` is set to `false`, buttons **_Ok_** and **_Cancel_** are shown by default (can be overwritten by `actionRow` snippet).
71 | In this mode the main difference is, that value is set and event triggered only on `Enter` key or pressing `Ok` button.
72 | Pressing `Cancel` or leaving input _resets_ internal state to previous value (if set).
73 |
74 | ** 💡 IMPORTANT NOTE**
75 |
76 | When using `isRange` with combination of `'datetime` mode., auto-commit is _always_ OFF automatically to provide meaningful user experience.
77 |
78 |
79 | ## Example
80 |
81 |
82 |
83 | Settings
84 |
85 |
89 |
92 |
93 |
94 | Modes
95 | {#each modes as mode}
96 |
99 |
100 |
101 |
102 | {#if isRange}
103 | {rangeValue}
105 | {:else}
106 | {#key activeMode}
107 | {value}
110 | {/if}
111 |
112 |
113 |
121 |
--------------------------------------------------------------------------------
/src/routes/disabling-dates/+page.svelte.md:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | # Disabling dates
14 |
15 | Restricting selectable is supported by `startDate` and `endDate` properties. You can provide `string` or `Date`.
16 | When `string` is passed, it must match `format` of given Svelty-picker. These border dates are *INCLUDED* in allowed date range.
17 |
18 | It is recommended to pass `strings` and not `Dates` to these properties. When datetime is passed, time range will be restricted
19 | as well if applicable. If conversion from `Date` to `string` is required, you can use ulitity functions as mentioned on [Working with dates](/working-with-dates) page.
20 |
21 | If you need something advanced you can provide function through `disableDatesFn`, in which you can resolve whether given date is disabled or not.
22 | Just take into account that all `Date` objects passed into this function will be in local time of given user.
23 |
24 | ```js
25 | function isDateDisabled(date: Date): bool
26 | ```
27 |
28 | Both methods can be combined together if needed.
29 |
30 | ### Example
31 |
32 |
64 |
65 |
My german picker (global)
66 |
68 |
69 |
Japanese override
70 |
72 |
{keys}
16 |
17 | Setting locale is perfect use case for using [global configuration](/global-config).
18 |
19 | ## Example
20 |
21 |
22 |
23 |
My german picker
24 |
25 |
26 |
27 |
Japanese override
28 |
29 |
30 |
33 |
34 |
35 |
36 |
37 | ```svelte
38 |
46 |
47 |
48 |
49 |
My german picker
50 |
52 |
53 |
Japanese override
54 |
56 |
102 |
104 |
105 | 💡 For timestamp in ***seconds*** use `php` formatting. For timestamp with ***miliseconds*** use `standard` formatting.
106 |
107 | ### Example
108 |
109 |
110 |
111 |
112 | Format === displayFormat{valueDefault || 'null'}
113 |
114 |
115 |
116 |
117 |
118 | Format !== displayFormat{valueDifferent || 'null'}
119 |
120 |
121 |
122 |
123 |
124 | Time only format:{valueTimeOnly || 'null'}
125 |
126 |
127 |
128 |
132 |
133 |
134 | Format === displayFormat{valueDefault}
135 |
136 |
137 |
138 |
139 |
140 | Format !== displayFormat{valueDifferent}
141 |
142 |
143 |
144 |
145 |
146 | Time only format:{valueTimeOnly}
147 |
148 |
149 |
150 |
13 | {#each items as item}
14 |
15 | {item.label}
16 |
17 | {/each}
18 |
19 | {#each items as item}
20 | {#if activeTabValue == item.value}
21 |
22 |
24 | {/if}
25 | {/each}
26 |
27 |
69 |
--------------------------------------------------------------------------------
/src/routes/modes-and-formats/format-php.md:
--------------------------------------------------------------------------------
1 | | Format | Description | Example
2 | |------|---------------------------------------------------------------------|--------------------------------------
3 | | `d` | Day of the month, 2 digits with leading zeros | 01 to 31
4 | | `D` | A textual representation of a day, three letters | Mon through Sun
5 | | `j` | Day of the month without leading zeros | 1 to 31
6 | | `l` | A full textual representation of the day of the week | Sunday through Saturday
7 | | `N` | ISO 8601 numeric representation of the day of the week | 1 (for Monday) through 7 (for Sunday)
8 | | `S` | English ordinal suffix for the day of the month, 2 characters | st, nd, rd or th. Works well with `j`
9 | | `F` | A full textual representation of a month, such as January or March | January through December
10 | | `m` | Numeric representation of a month, with leading zeros | 01 through 12
11 | | `M` | A short textual representation of a month, three letters | Jan through Dec
12 | | `n` | Numeric representation of a month, without leading zeros | 1 through 12
13 | | `Y` | A full numeric representation of a year, at least 4 digits | 0787, 1999, 2003
14 | | `y` | A two digit representation of a year | 99 or 03
15 | | `a` | Lowercase Ante meridiem and Post meridiem | am or pm
16 | | `A` | Uppercase Ante meridiem and Post meridiem | AM or PM
17 | | `g` | 12-hour format of an hour without leading zeros | 1 through 12
18 | | `G` | 24-hour format of an hour without leading zeros | 0 through 23
19 | | `h` | 12-hour format of an hour with leading zeros | 01 through 12
20 | | `H` | 24-hour format of an hour with leading zeros | 00 through 23
21 | | `i` | Minutes with leading zeros | 00 to 59
22 | | `s` | Seconds with leading zeros | 00
23 | | `U` | timestamp in seconds. |
24 |
25 |
26 | ☝️ For timestamp with miliseconds use `standard` formatting.
27 |
--------------------------------------------------------------------------------
/src/routes/modes-and-formats/format-standard.md:
--------------------------------------------------------------------------------
1 | | Format | Description | Example
2 | |--------|----------------------------------------------------------------------------------|--------------------------------------
3 | | `d` | day of the month without leading zeros | 1 to 31
4 | | `dd` | day of the month, 2 digits with leading zeros | 01 to 31
5 | | `D` | short textual representation of a weekday (i18n.daysShort) | Mon through Sun
6 | | `DD` | long textual representation of a weekday (i18n.days) | Sunday through Saturday
7 | | `S` | English ordinal suffix for the day of the month, (i18n.suffix) | st, nd, rd or th. Works well with `d`
8 | | `m` | numeric representation of month without leading zeros | 1 to 12
9 | | `mm` | numeric representation of the month, 2 digits with leading zeros | 01 to 12
10 | | `M` | short textual representation of a month, three letters (i18n.monthsShort) | Jan through Dec
11 | | `MM` | full textual representation of a month, such as January or March (i18n.months) | January through December
12 | | `yy` | two digit representation of a year | 99 or 03
13 | | `yyyy` | full numeric representation of a year, 4 digits | 1999, 2003
14 | | `h` | hour without leading zeros - 24-hour format | 0 - 23
15 | | `hh` | hour, 2 digits with leading zeros - 24-hour format | 00 - 23
16 | | `H` | hour without leading zeros - 12-hour format | 1 - 12
17 | | `HH` | hour, 2 digits with leading zeros - 12-hour format | 01 - 12
18 | | `i` | minutes, 2 digits with leading zeros | 00 - 59
19 | | `ii` | alias for `i` | 00 - 59
20 | | `s` | seconds, 2 digits with leading zeros | 00
21 | | `ss` | alias for `s` | 00
22 | | `p` | meridian in lower case ('am' or 'pm') - according to locale file (i18n.meridiem) | am or pm
23 | | `P` | meridian in upper case ('AM' or 'PM') - according to locale file (i18n.meridiem) | AM or PM
24 | | `t` | timestamp in milliseconds (although milliseconds are always 0). |
25 |
26 |
27 | ☝️ For timestamp in seconds use `php` formatting.
28 |
--------------------------------------------------------------------------------
/src/routes/properties/+page.svelte.md:
--------------------------------------------------------------------------------
1 | # Properties
2 |
3 | Scroll down for [event callback props](#event-callback-props).
4 |
5 |
6 |
7 | | Property | Type | Default | Description |
8 | |-----------------|-----------------------------|-------------------|-------------------|
9 | | inputId | `string` | `""` | id attribute for input element
10 | | name | `string` | `'date'` | html attribute for underlying `string\|Date | `null` | limit minimal selectable date |
17 | | endDate | string\|Date | `null` | limit maximal selectable date |
18 | | pickerOnly | `bool` | `false` | Picker is always visible and input field is then hidden, but still present |
19 | | startView | `number` | `2` | Which mode should picker at, `0` - decade, `1` - year, `2` - month (default), `3` - time picker
20 | | mode | `string` | `auto` | restrict picker's mode. Possible values: `auto\|date\|datetime\|time`. By default it try to guess the mode from `format` |
21 | | disableDatesFn | `function` | `null` | Function whether passed date should be disabled or not |
22 | | manualInput | `bool` | `false` | Whether manual date entry is allowed |
23 | | format | `string` | `'yyyy-mm-dd'` | Format of entered date/time. |
24 | | formatType | `string` | `'standard'` | Format type (`standard` or `php`) |
25 | | displayFormat | `string` | `null` | Display format of entered date/time. |
26 | | displayFormatType | `string` | `null` | Display format type (`standard` or `php`) |
27 | | hourOnly | `bool` | `false` | Only allow hour selection for the time portion of the datetime selection
28 | | minuteIncrement | `number` | `1` | number in range `1-60` to set the increment of minutes choosable |
29 | | weekStart | `number` | `1` | number in range `0-6` to select first day of the week. Sunday is `0` |
30 | | inputClasses | `string` | `""` | input css class string |
31 | | todayBtnClasses | `string` | `'sdt-action-btn sdt-today-btn'` | today button css classes |
32 | | clearBtnClasses | `string` | `'sdt-action-btn sdt-clear-btn'` | clear button css classes |
33 | | todayBtn | `bool` | `true` | Show today button |
34 | | clearBtn | `bool` | `true` | Show clear button |
35 | | clearToggle | `bool` | `true` | Allows to clear selected date when clicking on the same date when in `mode='date'` or `mode='auto'` resolving to `'date'` |
36 | | autocommit | `bool` | `true` | Whether date/time selection is automatic or manual |
37 | | i18n | `object` | `en` | localization object, english is by default |
38 | | validatorAction | `array` | `null` | Bind validator action for inner `
42 |
43 |
44 | ## Event callback props
45 |
46 |
47 |
48 |
49 | | Property | Arguments | Description |
50 | |-----------------|-------------------------------|--------------
51 | | `onChange` | `string`\|`string[]`\|`null` | Happens when value is changed. New value is passed as argument
52 | | `onDatechange` | `prop: onChangeProperty` | Happens when value is changed, but details passed on the event are more detailed, see the type below
53 | | `onFocus` | `` | When input is focused. Won't be trigger in `pickerOnly` mode
54 | | `onInput` | `string` | When manually entered input matches given `format`. `manualInput` must be set to allow value entering
55 | | `onBlur` | `` | When input loses focus. Won't be trigger in `pickerOnly` mode
56 |
57 |
58 |
59 | ```ts
60 | type onChangeProperty = {
61 | value: string|string[],
62 | dateValue: Date|Date[],
63 | displayValue: string,
64 | valueFormat: string,
65 | displayFormat: string,
66 | event: 'date'|'hour'|'minute'|'datetime' // which event triggered the callback
67 | }
68 | ```
69 |
--------------------------------------------------------------------------------
/src/routes/snippets/+page.svelte.md:
--------------------------------------------------------------------------------
1 |
24 |
25 | # Snippets
26 |
27 | There are 2 available snippets to override/customize.
28 |
29 |
30 | ## children
31 |
32 | This snippet can be used for adding icon. Don't forget to position your icon absolutely. Or move your styling to `
37 |
38 |
45 |
55 |
62 |
63 | Pick
72 |
73 | ?
82 |
83 | Date
92 |
93 |
94 |
95 | ```svelte
96 |
97 |
99 | ```
100 |
101 | ## actionRow
102 |
103 | Snippet represents row below calendar/time picker. By default showing ***Today*** and ***Clear*** buttons. And if `autocommit`=`false` also
104 | ***Ok*** and ***Cancel*** buttons.
105 |
106 | 💡 If you just want to hide ***Today*** or ***Clear*** buttons, use controlling props and provide appropriate `i18n` message
107 | instead of overriding `actionRow` snippet.
108 |
109 | ### Snipet type
110 |
111 | ```ts
112 | Snippet<[ prop: {
113 | autocloseSupported: boolean,
114 | todayBtnClasses: string,
115 | clearBtnClasses: string,
116 | onCancel: function,
117 | onConfirm: function,
118 | onClear: function,
119 | onToday: function,
120 | isTodayDisabled: boolean,
121 | i18n: import('svelty-picker/i18n').i18nType,
122 | currentMode: string
123 | }]>
124 | ```
125 |
126 | Parameter description:
127 |
128 | - `autocloseSupported` - determined by `autocommit` and `isRange` properties
129 | - `todayBtnClasses` - CSS classes for 'today' button
130 | - `clearBtnClasses` - CSS classes for 'clear' button
131 | - `onCancel` - discards current selection (when `autocommit` is set to `false`)
132 | - `onConfirm` - handler which confirms current selection (when `autocommit` is set to `false`)
133 | - `onClear` - clears current selection
134 | - `onToday` - selects today date
135 | - `isTodayDisabled` - useful when you use `startDate` or `endDate` or `disableDatesFn` to disable dates. Serves for disabled 'Today' button
136 | - `i18n` - current locale
137 | - `currentMode` - returns currently active mode: `date` or `time` (where `time` is available only for datetime or time picker)
138 |
139 | ### Default implementation
140 |
141 | ```svelte
142 | {#snippet action_row({
143 | autocloseSupported,
144 | todayBtnClasses,
145 | clearBtnClasses,
146 | onCancel,
147 | onConfirm,
148 | onClear,
149 | onToday,
150 | isTodayDisabled,
151 | i18n,
152 | currentMode
153 | })}
154 | {#if !autocloseSupported || true}
155 |
156 | {#if !autocloseSupported}
157 |
158 |
163 | {i18n.cancelBtn}
164 |
165 |
170 | {i18n.okBtn}
171 |
172 |
173 | {/if}
174 | {#if todayBtn || clearBtn}
175 |
176 | {#if todayBtn && currentMode === 'date'}
177 |
183 | {i18n.todayBtn}
184 |
185 | {/if}
186 | {#if clearBtn}
187 |
192 | {i18n.clearBtn}
193 |
194 | {/if}
195 |
196 | {/if}
197 |
198 | {/if}
199 | {/snippet}
200 | ```
201 |
202 |
223 |
--------------------------------------------------------------------------------
/src/routes/theme/+page.svelte.md:
--------------------------------------------------------------------------------
1 | # Theme
2 |
3 | Component exposes following CSS variables to customize it's appearance as you can see through whole in example below or on the homepage.
4 |
5 | ```css
6 | :root {
7 | /* general */
8 | --sdt-bg-main: #fff; /** wrap background color */
9 | --sdt-shadow-color: #ccc; /** wrap shadow color */
10 | --sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color); /** wrap shadow settings */
11 | --sdt-radius: 4px; /** wrap radius */
12 | --sdt-color: #000; /** data to select(e.g date/time) text color (except header & buttons) */
13 | --sdt-color-selected: #fff; /** selected data(e.g date/time) text color */
14 | --sdt-header-color: #000; /** header items color (e.g. text & buttons) */
15 | --sdt-header-btn-bg-hover: #dfdfdf; /** header items hover background color */
16 | --sdt-bg-selected: #286090; /** selected data(e.g date/time) background color */
17 |
18 | /* action buttons */
19 | --sdt-today-bg: #1e486d; /** date picker today button hover background color */
20 | --sdt-today-color: var(--sdt-bg-main); /** date picker today button text & border color */
21 | --sdt-clear-color: #dc3545; /** clear button text & border color */
22 | --sdt-clear-bg: transparent; /** clear button background color */
23 | --sdt-clear-hover-color: var(--sdt-bg-main); /** clear button hover text color */
24 | --sdt-clear-hover-bg: #dc3545; /** clear button hover background color */
25 |
26 | /* time picker */
27 | --sdt-clock-selected-bg: var(--sdt-bg-selected); /** selected time background color */
28 | --sdt-clock-bg: #eeeded; /** time picker inner circle background color */
29 | --sdt-clock-color: var(--sdt-color); /** time picker text color (watch "--sdt-color") */
30 | --sdt-clock-color-hover: var(--sdt-color); /** time picker hover text color (watch "--sdt-color") */
31 | --sdt-clock-time-bg: transparent; /** time picker time background color */
32 | --sdt-clock-time-bg-hover: transparent; /** time picker time selection hover background color */
33 | --sdt-clock-disabled-time: #b22222; /** disabled time picker time text color */
34 | --sdt-clock-disabled-time-bg: #eee; /** disabled time picker time background color */
35 |
36 | /* date picker */
37 | --sdt-table-selected-bg: var(--sdt-bg-selected); /** selected date background color */
38 | --sdt-table-disabled-date: #b22222; /** disabled dates text color */
39 | --sdt-table-disabled-date-bg: #eee; /** disabled dates background color */
40 | --sdt-table-bg: transparent; /** date picker inner table background color */
41 | --sdt-table-data-bg-hover: #eee; /** table selection data hover background color */
42 | --sdt-table-today-indicator: #ccc; /** date picker current day marker color */
43 |
44 | }
45 | ```
46 |
47 | ### Definitions from this website
48 |
49 | ```html
50 |
109 | ```
110 |
--------------------------------------------------------------------------------
/src/routes/working-with-dates/+page.svelte.md:
--------------------------------------------------------------------------------
1 |
11 |
12 | # Working with dates
13 |
14 | Although library works internally `Date` objects, `value` property must be `string` or `string[]` when in daterange mode.
15 | It makes internal logic simpler and makes library dependency-free.
16 |
17 | Since svelte 5.9 you can use [function binding](https://svelte.dev/docs/svelte/bind#Function-bindings) for binding `value` property.
18 | Therefore you can convert your date objects to strings and vice versa. Even handle timezones! There are 2 helper functions
19 | available to help you with these transformations. Library use them internaly to transform to/from specified [formats](/modes-and-formats).
20 |
21 |
22 | ```js
23 | /**
24 | * String -> date
25 | *
26 | * @param {Date|string} date
27 | * @param {string} format
28 | * @param {i18nType} i18n
29 | * @param {string} type
30 | * @returns {Date}
31 | */
32 | export function parseDate(date, format, i18n, type) { /* ... */}
33 |
34 | /**
35 | * Date -> string
36 | *
37 | * @param {Date} date
38 | * @param {string} format
39 | * @param {i18nType} i18n
40 | * @param {string} type
41 | * @returns {string}
42 | */
43 | export function formatDate(date, format, i18n, type) { /* ... */}
44 | ```
45 |
46 |
47 |
48 | Version 5 and below
49 |
50 |
51 | In v5 it was possible to set initial date through initialDate, which has been removed in v6.
52 |
53 |
55 |
56 |
57 | ### Example
58 |
59 | `date` variable value: {date}
60 | {
65 | return formatDate(date, 'yyyy/mm/dd', en, 'standard');
66 | },
67 | (v) => {
68 | date = v ? parseDate(v, 'yyyy/mm/dd', en, 'standard') : null;
69 | }
70 | }
71 | />
72 |
73 | ```svelte
74 |
84 |
85 | Selected date: {date}
86 | {
91 | return formatDate(date, 'yyyy/mm/dd', en, 'standard');
92 | },
93 | (v) => {
94 | date = v ? parseDate(v, 'yyyy/mm/dd', en, 'standard') : null;
95 | }
96 | }
97 | />
98 | ```
99 |
--------------------------------------------------------------------------------
/src/style/base.css:
--------------------------------------------------------------------------------
1 | @media (prefers-reduced-motion: reduce) {
2 | *,
3 | ::before,
4 | ::after {
5 | animation-delay: -1ms !important;
6 | animation-duration: 1ms !important;
7 | animation-iteration-count: 1 !important;
8 | background-attachment: initial !important;
9 | scroll-behavior: auto !important;
10 | transition-duration: 0s !important;
11 | transition-delay: 0s !important;
12 | }
13 | }
14 |
15 | *,
16 | ::before,
17 | ::after {
18 | box-sizing: border-box;
19 | }
20 |
21 | html {
22 | line-height: 1.4;
23 | font-size: 16px;
24 | -webkit-text-size-adjust: 100%;
25 | }
26 |
27 | html.dark {
28 | color-scheme: dark;
29 | }
30 |
31 | body {
32 | margin: 0;
33 | width: 100%;
34 | min-width: 320px;
35 | min-height: 100vh;
36 | line-height: 24px;
37 | font-family: var(--vp-font-family-base);
38 | font-size: 16px;
39 | font-weight: 400;
40 | color: var(--vp-c-text-1);
41 | background-color: var(--vp-c-bg);
42 | font-synthesis: style;
43 | text-rendering: optimizeLegibility;
44 | -webkit-font-smoothing: antialiased;
45 | -moz-osx-font-smoothing: grayscale;
46 | }
47 |
48 | main {
49 | display: block;
50 | }
51 |
52 | h1,
53 | h2,
54 | h3,
55 | h4,
56 | h5,
57 | h6 {
58 | margin: 0;
59 | line-height: 24px;
60 | font-size: 16px;
61 | font-weight: 400;
62 | }
63 |
64 | p {
65 | margin: 0;
66 | }
67 |
68 | strong,
69 | b {
70 | font-weight: 600;
71 | }
72 |
73 | /**
74 | * Avoid 300ms click delay on touch devices that support the `touch-action`
75 | * CSS property.
76 | *
77 | * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
78 | * touch devices and IE Mobile 10-11 DON'T remove the click delay when
79 | * `} - highlighted html
24 | */
25 | async function highlighter(code, lang, meta) {
26 | const highlighter = await getSingletonHighlighter({
27 | langs: ['svelte', 'css', 'javascript', 'bash', 'html'],
28 | themes: ['catppuccin-latte', 'monokai']
29 | });
30 | const darkHtml = escapeHtml(escapeSvelte(highlighter.codeToHtml(code, {
31 | lang,
32 | theme: 'monokai',
33 | transformers: [
34 | transformerNotationDiff()
35 | ]
36 | })));
37 | const lightHtml = escapeHtml(escapeSvelte(highlighter.codeToHtml(code, {
38 | lang,
39 | theme: 'catppuccin-latte',
40 | transformers: [
41 | transformerNotationDiff()
42 | ]
43 | })));
44 | // return `{@html \`${darkHtml}${lightHtml}\` }`;
45 | return `{@html \`${lightHtml}${darkHtml}
\` }`;
46 | // const html = shikiHighlighter.codeToHtml(code, {
47 | // lang: lang,
48 | // theme: THEME,
49 | // transformers: [
50 | // transformerNotationDiff()
51 | // ]
52 | // });
53 | // return escapeSvelte(html);
54 | }
55 |
56 | export default highlighter;
57 |
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mskocik/svelty-picker/3c291e4425ea258e4d042f3eb6e1e68bd46adde0/static/favicon.png
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { mdsvex } from "mdsvex";
2 | import adapter from '@sveltejs/adapter-auto';
3 | import mdsvexConfig from './mdsvex.config.js';
4 |
5 | /** @type {import('@sveltejs/kit').Config} */
6 | const config = {
7 | kit: {
8 | // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
9 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
10 | // See https://svelte.dev/docs/kit/adapters for more information about adapters.
11 | adapter: adapter()
12 | },
13 |
14 | preprocess: [mdsvex(mdsvexConfig)],
15 | extensions: [".svelte", ".svelte.md"]
16 | };
17 |
18 | export default config;
19 |
--------------------------------------------------------------------------------
/test/01-render.test.js:
--------------------------------------------------------------------------------
1 | import { render } from "@testing-library/svelte";
2 | import { describe, it, expect } from "vitest";
3 | import SveltyPicker from '$lib/components/SveltyPicker.svelte';
4 | import userEvent from "@testing-library/user-event";
5 |
6 | describe('DOM Render', async () => {
7 | it('input only', () => {
8 | const { container } = render(SveltyPicker, { props: {
9 | // value: new Date()
10 | }});
11 |
12 | expect(container.querySelector('input[type=text]')).toBeInTheDocument();
13 | });
14 |
15 |
16 | it('show popup after focus', async () => {
17 | const { container } = render(SveltyPicker, {
18 | onfocus: () => console.log('focuesed')
19 | });
20 |
21 | expect(container.querySelector('.sdt-calendar-wrap')).not.toBeInTheDocument();
22 |
23 | const user = userEvent.setup();
24 | await user.click(container.querySelector('input[type=text]'));
25 |
26 | expect(container.querySelector('.sdt-calendar-wrap')).toBeInTheDocument();
27 | });
28 |
29 |
30 | it('pickerOnly', () => {
31 | const { container } = render(SveltyPicker, { props: {
32 | pickerOnly: true
33 | }});
34 |
35 | expect(container.querySelector('.sdt-component-wrap')).toBeInTheDocument();
36 | expect(container.querySelector('.sdt-calendar-wrap')).toBeInTheDocument();
37 | });
38 |
39 | });
40 |
--------------------------------------------------------------------------------
/test/02-datepicker.test.svelte.js:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from "vitest";
2 | // import { render } from "vitest-browser-svelte";
3 | import { render } from "@testing-library/svelte";
4 | import SveltyPicker from "$lib/components/SveltyPicker.svelte";
5 | import { userEvent } from "@testing-library/user-event";
6 | import { test } from "vitest";
7 | import { flushSync } from "svelte";
8 |
9 | function sleep(ms) {
10 | return new Promise(resolve => {
11 | setTimeout(resolve, ms);
12 | });
13 | }
14 |
15 |
16 |
17 | describe('Date selection [pickerOnly]', async () => {
18 | it('simple', async () => {
19 | let props = $state({
20 | value: null,
21 | pickerOnly: true
22 | });
23 |
24 | const screen = render(SveltyPicker, { props });
25 |
26 | const user = userEvent.setup();
27 |
28 | const day = screen.getByText('12', { selector: 'button' });
29 | await user.click(day);
30 |
31 | // console.log(screen.container.innerHTML);
32 |
33 | expect(screen.container.querySelector('td.is-selected')).toBeInTheDocument();
34 | expect(props.value.split('-').pop()).toEqual('12');
35 |
36 | });
37 |
38 | it('with initial value', async () => {
39 | let props = $state({
40 | value: '2024-12-09',
41 | pickerOnly: true
42 | });
43 |
44 | const screen = render(SveltyPicker, { props });
45 |
46 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('9');
47 |
48 | const user = userEvent.setup();
49 | await user.click(screen.getByText('12', { exact: true }));
50 |
51 |
52 | expect(screen.container.querySelector('td.is-selected')).toBeInTheDocument();
53 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('12');
54 | expect(props.value).toEqual('2024-12-12');
55 | });
56 |
57 |
58 | it('autocommit: false', async () => {
59 | let props = $state({
60 | value: '2024-12-09',
61 | pickerOnly: true,
62 | autocommit: false,
63 | });
64 |
65 | const screen = render(SveltyPicker, { props });
66 |
67 | const user = userEvent.setup();
68 | // await user.click(screen.container.querySelector('input[type=text]'));
69 |
70 | await user.click(screen.getByText('12', { exact: true }));
71 |
72 | expect(props.value).toEqual('2024-12-09');
73 |
74 | // expect(screen.container.querySelector('.value-dirty')).toBeInTheDocument();
75 |
76 | await user.click(screen.getByText('Ok', { exact: true }));
77 |
78 | expect(screen.container.querySelector('td.is-selected')).toBeInTheDocument();
79 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('12');
80 | expect(props.value).toEqual('2024-12-12');
81 | });
82 |
83 |
84 | it('update value from parent', async () => {
85 | let props = $state({
86 | value: '2024-12-09',
87 | pickerOnly: true
88 | });
89 |
90 | const screen = render(SveltyPicker, { props });
91 |
92 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('9');
93 |
94 | props.value = '2024-12-12';
95 |
96 | await sleep(500);
97 |
98 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('12');
99 | });
100 | });
101 |
102 | describe('Date selection', async () => {
103 | it('simple', async () => {
104 | let props = $state({
105 | value: null,
106 | });
107 |
108 | const screen = render(SveltyPicker, { props });
109 |
110 | const user = userEvent.setup();
111 | await user.click(screen.container.querySelector('input[type=text]'));
112 |
113 | expect(props.value).toBeNull();
114 |
115 | const day = screen.getByText('12', { selector: 'button' });
116 | await user.click(day);
117 |
118 | expect(props.value.split('-').pop()).toEqual('12');
119 |
120 | });
121 |
122 | it('with initial value', async () => {
123 | let props = $state({
124 | value: '2024-12-09',
125 | });
126 |
127 | const screen = render(SveltyPicker, { props });
128 |
129 | const user = userEvent.setup();
130 | await user.click(screen.container.querySelector('input[type=text]'));
131 |
132 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('9');
133 |
134 | await user.click(screen.getByText('12', { exact: true }));
135 |
136 | expect(props.value).toEqual('2024-12-12');
137 |
138 | await user.click(screen.container.querySelector('input[type=text]'));
139 |
140 | expect(screen.container.querySelector('td.is-selected')).toBeInTheDocument();
141 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('12');
142 | });
143 |
144 |
145 | it('autocommit: false', async () => {
146 | let props = $state({
147 | value: '2024-12-09',
148 | autocommit: false,
149 | });
150 |
151 | const screen = render(SveltyPicker, { props });
152 |
153 | const user = userEvent.setup();
154 | await user.click(screen.container.querySelector('input[type=text]'));
155 |
156 | await user.click(screen.getByText('12', { exact: true }));
157 |
158 | expect(props.value).toEqual('2024-12-09');
159 |
160 | expect(screen.container.querySelector('.value-dirty')).toBeInTheDocument();
161 |
162 | await user.click(screen.getByText('Ok', { exact: true }));
163 |
164 | flushSync();
165 |
166 | // popup should be closed, but is not in jsdom 🤷 TODO: use vite-browser here
167 | // expect(screen.container.querySelector('.sdt-calendar-wrap')).not.toBeInTheDocument();
168 | // expect(screen.container.querySelector('td.is-selected')).not.toBeInTheDocument();
169 |
170 | expect(props.value).toEqual('2024-12-12');
171 | });
172 |
173 |
174 | it('update value from parent', async () => {
175 | let props = $state({
176 | value: '2024-12-09',
177 | });
178 |
179 | const screen = render(SveltyPicker, { props });
180 |
181 | const user = userEvent.setup();
182 | await user.click(screen.container.querySelector('input[type=text]'));
183 |
184 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('9');
185 |
186 | props.value = '2024-12-12';
187 |
188 | await sleep(500);
189 |
190 | expect(screen.container.querySelector('td.is-selected').textContent).toEqual('12');
191 | });
192 | });
193 |
194 |
195 | describe('formatting', () => {
196 | it('simple format test', async () => {
197 | let props = $state({
198 | value: '2024-12-09',
199 | displayFormat: 'yyyy.mm.dd',
200 | autocommit: false,
201 | });
202 |
203 | const screen = render(SveltyPicker, { props });
204 |
205 | expect(screen.container.querySelector('input[type=hidden]').value).toEqual('2024-12-09');
206 | expect(screen.container.querySelector('input[type=text]').value).toEqual('2024.12.09');
207 | });
208 |
209 | it('update [format]', async () => {
210 | let props = $state({
211 | value: '2024-12-09',
212 | autocommit: false,
213 | });
214 |
215 | const screen = render(SveltyPicker, { props });
216 |
217 | screen.rerender({
218 | format: 'dd.mm.yyyy'
219 | });
220 |
221 | await sleep(500);
222 |
223 | expect(screen.container.querySelector('input[type=hidden]').value).toEqual('09.12.2024');
224 | expect(screen.container.querySelector('input[type=text]').value).toEqual('09.12.2024');
225 | });
226 |
227 | it('update [displayFormat]', async () => {
228 | let props = $state({
229 | value: '2024-12-09',
230 | autocommit: false,
231 | });
232 |
233 | const screen = render(SveltyPicker, { props });
234 |
235 | screen.rerender({
236 | displayFormat: 'dd.mm.yyyy'
237 | });
238 |
239 | await sleep(500);
240 |
241 | expect(screen.container.querySelector('input[type=hidden]').value).toEqual('2024-12-09');
242 | expect(screen.container.querySelector('input[type=text]').value).toEqual('09.12.2024');
243 | });
244 | })
245 |
246 | test('clear', async () => {
247 |
248 | let props = $state({
249 | value: '10:24',
250 | mode: 'time',
251 | format: 'hh:ii',
252 | pickerOnly: true
253 | });
254 | const screen = render(SveltyPicker, { props });
255 |
256 | const user = userEvent.setup();
257 | await user.click(screen.getByText('Clear'));
258 |
259 | expect(props.value || null).toEqual(null);
260 | });
261 |
--------------------------------------------------------------------------------
/test/03-timepicker.test.svelte.js:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from "vitest";
2 | // import { render } from "vitest-browser-svelte";
3 | import { render } from "@testing-library/svelte";
4 | import SveltyPicker from "$lib/components/SveltyPicker.svelte";
5 | import { userEvent } from "@testing-library/user-event";
6 |
7 | function sleep(ms) {
8 | return new Promise(resolve => {
9 | setTimeout(resolve, ms);
10 | });
11 | }
12 |
13 | describe('Time selection', async () => {
14 | it('simple', async () => {
15 | let props = $state({
16 | value: null,
17 | format: 'hh:ii'
18 | });
19 |
20 | const screen = render(SveltyPicker, { props });
21 |
22 | const mainInput = screen.container.querySelector('input[type=text]');
23 |
24 | const user = userEvent.setup();
25 | await user.click(mainInput);
26 |
27 | const hour = screen.getByText('12', { selector: 'button.sdt-tick' });
28 | await user.click(hour);
29 |
30 | const minute = screen.getByText('30', { selector: 'button.sdt-tick' });
31 | await user.click(minute);
32 |
33 |
34 | // popup should be closed, but is not in jsdom 🤷 TODO: use vite-browser here
35 | // expect(screen.container.querySelector('.sdt-calendar-wrap')).not.toBeInTheDocument();
36 | expect(props.value).toEqual('12:30');
37 |
38 | });
39 | });
40 |
41 |
42 | describe('Time selection [pickerOnly]', async () => {
43 | it('simple', async () => {
44 | let props = $state({
45 | value: null,
46 | format: 'hh:ii',
47 | pickerOnly: true
48 | });
49 |
50 | const screen = render(SveltyPicker, { props });
51 |
52 | const user = userEvent.setup();
53 |
54 | const hour = screen.getByText('12', { selector: 'button.sdt-tick' });
55 | await user.click(hour);
56 |
57 | const minute = screen.getByText('30', { selector: 'button.sdt-tick' });
58 | await user.click(minute);
59 |
60 | expect(minute.classList.contains('is-selected')).toBeTruthy();
61 | expect(screen.container.querySelector('button.is-selected[data-value="30"]')).toBeInTheDocument();
62 | expect(props.value).toEqual('12:30');
63 |
64 | });
65 | });
66 |
--------------------------------------------------------------------------------
/test/04-datetime.test.svelte.js:
--------------------------------------------------------------------------------
1 | import { test } from "vitest";
2 |
3 | test.skip('datetime tests', () => {
4 | // TODO:
5 | });
6 |
--------------------------------------------------------------------------------
/test/05-daterange.test.svelte.js:
--------------------------------------------------------------------------------
1 | import { test } from "vitest";
2 |
3 | test.skip('daterange tests', () => {
4 | // TODO:
5 | });
6 |
--------------------------------------------------------------------------------
/test/vitest-setup.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/vitest';
2 | import { vi } from 'vitest';
3 |
4 | // mocking Element.animate
5 | Element.prototype.animate = vi
6 | .fn()
7 | .mockImplementation(() => ({ cancel: vi.fn(), finished: Promise.resolve() }));
8 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vitest/config";
2 | import { sveltekit } from '@sveltejs/kit/vite';
3 | import {svelteTesting} from '@testing-library/svelte/vite'
4 |
5 | export default defineConfig({
6 | plugins: [sveltekit(), svelteTesting()],
7 | optimizeDeps: {
8 | include: ['@floating-ui/dom']
9 | },
10 | test: {
11 | environment: 'jsdom',
12 | include: ['test/**/*.{test,spec,test.svelte}.{js,ts}'],
13 | setupFiles: ['test/vitest-setup.js'],
14 | // browser: {
15 | // enabled: true,
16 | // provider: 'playwright',
17 | // name: 'firefox',
18 | // }
19 | }
20 | });
21 |
--------------------------------------------------------------------------------