Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 1x | <div class="datepicker-wrapper {className}" class:open > <input type="text" autocomplete="off" {...props} {placeholder} on:changeDate="{onchange}" on:input="{oninput}" on:keydown|capture="{onkeydown}" on:show="{onshow}" on:hide="{onhide}" bind:this="{inputEl}" bind:value="{value}"> <Icon name="calendar"/> </div> <script> import { onMount, createEventDispatcher } from 'svelte'; import { Datepicker } from 'vanillajs-datepicker'; import { Icon, icons } from '../icon'; import { pluck } from '../util'; export let format = 'yyyy-mm-dd'; export let value = ''; export let placeholder = format; export let elevate = false; export let showOnFocus = false; export let orientation = 'auto'; // '[left|right|auto] [top|bottom|auto]' let className = ''; export { className as class }; $:elevated = elevate === true || elevate === 'true'; $:props = pluck($$props, ['id', 'title', 'name', 'disabled', 'required']); const dispatch = createEventDispatcher(); let picker, inputEl; let open = false; onMount(() => { picker = new Datepicker(inputEl, { autohide: true, buttonClass: 'button button-normal button-text', container: elevated ? document.body : undefined, format, todayBtn: true, todayBtnMode: 1, orientation, todayHighlight: true, showOnFocus: (showOnFocus === 'true' || showOnFocus === true), prevArrow: icons.chevronLeft, nextArrow: icons.chevronRight, updateOnBlur: true, weekStart: 1, }); }); I function onkeydown (e) { if (e.key === 'Escape') { if (picker.active) e.stopPropagation(); requestAnimationFrame(() => picker.hide()); } else if (e.key === 'Enter') { iEf (picker.active) e.preventDefault(); requestAnimationFrame(() => picker.hide()); } // prevents picker's events in Safari // if (e.key.includes('Arrow') && picker.active) { // e.stopPropagation(); // } dispatch('keydown', { event: e, component: picker }); } function oninput () { const wasOpen = open; requestAnimationFrame(() => { const d = Datepicker.parseDate(value, format); const df = Datepicker.formatDate(d, format); if (df === value) { picker.setDate(value); if (wasOpen) picker.show(); } })I; } function onchange () { vaIlue = picker.getDate(format); dispatch('change', value); } function onshow () { open = true; } function onhide () { open = false; } </script> |