├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dev
├── App.svelte
└── main.js
├── docs
├── bundle.css
├── bundle.css.map
├── bundle.js
├── bundle.js.map
└── index.html
├── package-lock.json
├── package.json
├── rollup.config.js
├── rollup.dev.config.js
└── src
├── DatePicker.svelte
├── Switcher.svelte
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | public/bundle.*
4 | dist/*
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | dev
2 | docs
3 | node_modules
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # svelte-touch-datepicker changelog
2 |
3 | ## 1.0.0
4 |
5 | * First release
6 |
7 | ## 1.1.0
8 |
9 | * bug fixes
10 | * allow css custom property
11 |
12 | ## 1.2.0
13 |
14 | * default import support
15 |
16 | ## 1.2.1
17 |
18 | * fix pull to refresh on swipe down on mobile chrome
19 |
20 | ## 1.2.2
21 |
22 | * bugfix
23 | * readme update
24 |
25 | ## 1.3
26 |
27 | * feat: wheel control for desktop
28 |
29 | ## 1.4
30 | * merged PR #6 and #7
31 |
32 | ## 1.4.1
33 | * workout issue #8
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | (The MIT License)
2 |
3 | Copyright (c) 2019 Sharif Ahmed me.sharifahmed@gmail.com sharifahmed.me
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | 'Software'), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Native like date-picker for Svelte (With wheel control for desktop)
2 |
3 |
4 |
6 |
8 |
10 |
11 |
12 | ## 🚀[See it in Action](https://sharifclick.github.io/svelte-touch-datepicker/)
13 |
14 | ## Installation
15 |
16 | ```bash
17 | npm i -D svelte-touch-datepicker
18 | ```
19 |
20 | ## Usage
21 |
22 | ```html
23 |
30 |
31 |
46 |
47 |
48 |
49 |
Date: {_date}
50 |
51 |
52 |
46 |
47 |
Date: {_date}
48 |
49 |
50 |
\r\n
\r\n
Date: {_date}
\r\n
\r\n \r\n
\r\n
\r\n {#each data as item }\r\n {item} \r\n {/each}\r\n \r\n
was created with unknown prop '${key}'`);
612 | });
613 |
614 | function ul_binding($$value) {
615 | binding_callbacks[$$value ? "unshift" : "push"](() => {
616 | $$invalidate(1, itemWrapper = $$value);
617 | });
618 | }
619 |
620 | $$self.$set = $$props => {
621 | if ("selected" in $$props) $$invalidate(4, selected = $$props.selected);
622 | if ("data" in $$props) $$invalidate(0, data = $$props.data);
623 | if ("type" in $$props) $$invalidate(5, type = $$props.type);
624 | };
625 |
626 | $$self.$capture_state = () => {
627 | return {
628 | selected,
629 | data,
630 | type,
631 | position,
632 | offset,
633 | dragging,
634 | itemWrapper,
635 | previousY,
636 | onMouseDown,
637 | onMouseMove,
638 | onMouseUp,
639 | onWheel
640 | };
641 | };
642 |
643 | $$self.$inject_state = $$props => {
644 | if ("selected" in $$props) $$invalidate(4, selected = $$props.selected);
645 | if ("data" in $$props) $$invalidate(0, data = $$props.data);
646 | if ("type" in $$props) $$invalidate(5, type = $$props.type);
647 | if ("position" in $$props) position = $$props.position;
648 | if ("offset" in $$props) offset = $$props.offset;
649 | if ("dragging" in $$props) dragging = $$props.dragging;
650 | if ("itemWrapper" in $$props) $$invalidate(1, itemWrapper = $$props.itemWrapper);
651 | if ("previousY" in $$props) previousY = $$props.previousY;
652 | if ("onMouseDown" in $$props) $$invalidate(2, onMouseDown = $$props.onMouseDown);
653 | if ("onMouseMove" in $$props) onMouseMove = $$props.onMouseMove;
654 | if ("onMouseUp" in $$props) onMouseUp = $$props.onMouseUp;
655 | if ("onWheel" in $$props) $$invalidate(3, onWheel = $$props.onWheel);
656 | };
657 |
658 | return [
659 | data,
660 | itemWrapper,
661 | onMouseDown,
662 | onWheel,
663 | selected,
664 | type,
665 | position,
666 | offset,
667 | dragging,
668 | previousY,
669 | dispatch,
670 | onDateChange,
671 | setPosition,
672 | onMouseMove,
673 | onMouseUp,
674 | ul_binding
675 | ];
676 | }
677 |
678 | class Switcher extends SvelteComponentDev {
679 | constructor(options) {
680 | super(options);
681 | init(this, options, instance, create_fragment, safe_not_equal, { selected: 4, data: 0, type: 5 });
682 |
683 | dispatch_dev("SvelteRegisterComponent", {
684 | component: this,
685 | tagName: "Switcher",
686 | options,
687 | id: create_fragment.name
688 | });
689 |
690 | const { ctx } = this.$$;
691 | const props = options.props || ({});
692 |
693 | if (/*selected*/ ctx[4] === undefined && !("selected" in props)) {
694 | console.warn(" was created without expected prop 'selected'");
695 | }
696 |
697 | if (/*type*/ ctx[5] === undefined && !("type" in props)) {
698 | console.warn(" was created without expected prop 'type'");
699 | }
700 | }
701 |
702 | get selected() {
703 | throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ': Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ': Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ': Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ': Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ': Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ' was created with unknown prop '${key}'`);
1080 | });
1081 |
1082 | const focus_handler = () => {
1083 | $$invalidate(1, visible = !visible);
1084 | };
1085 |
1086 | function div5_binding($$value) {
1087 | binding_callbacks[$$value ? "unshift" : "push"](() => {
1088 | $$invalidate(4, popup = $$value);
1089 | });
1090 | }
1091 |
1092 | $$self.$set = $$props => {
1093 | if ("date" in $$props) $$invalidate(0, date = $$props.date);
1094 | if ("visible" in $$props) $$invalidate(1, visible = $$props.visible);
1095 | if ("years_map" in $$props) $$invalidate(13, years_map = $$props.years_map);
1096 | if ("classes" in $$props) $$invalidate(2, classes = $$props.classes);
1097 | };
1098 |
1099 | $$self.$capture_state = () => {
1100 | return {
1101 | date,
1102 | visible,
1103 | years_map,
1104 | classes,
1105 | years_count,
1106 | _date,
1107 | popup,
1108 | resetDate,
1109 | dateChanged,
1110 | DAYS
1111 | };
1112 | };
1113 |
1114 | $$self.$inject_state = $$props => {
1115 | if ("date" in $$props) $$invalidate(0, date = $$props.date);
1116 | if ("visible" in $$props) $$invalidate(1, visible = $$props.visible);
1117 | if ("years_map" in $$props) $$invalidate(13, years_map = $$props.years_map);
1118 | if ("classes" in $$props) $$invalidate(2, classes = $$props.classes);
1119 | if ("years_count" in $$props) years_count = $$props.years_count;
1120 | if ("_date" in $$props) $$invalidate(3, _date = $$props._date);
1121 | if ("popup" in $$props) $$invalidate(4, popup = $$props.popup);
1122 | if ("resetDate" in $$props) $$invalidate(9, resetDate = $$props.resetDate);
1123 | if ("dateChanged" in $$props) $$invalidate(10, dateChanged = $$props.dateChanged);
1124 | if ("DAYS" in $$props) $$invalidate(5, DAYS = $$props.DAYS);
1125 | };
1126 |
1127 | let DAYS;
1128 |
1129 | $$self.$$.update = () => {
1130 | if ($$self.$$.dirty & /*date*/ 1) {
1131 | $$invalidate(5, DAYS = new Array(new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()).fill(1).map((v, i) => v + i));
1132 | }
1133 |
1134 | if ($$self.$$.dirty & /*date*/ 1) {
1135 | $$invalidate(3, _date = date.toLocaleDateString("en-US"));
1136 | }
1137 | };
1138 |
1139 | return [
1140 | date,
1141 | visible,
1142 | classes,
1143 | _date,
1144 | popup,
1145 | DAYS,
1146 | MONTHS,
1147 | YEARS,
1148 | WEEKDAY,
1149 | resetDate,
1150 | dateChanged,
1151 | confirmDate,
1152 | clickedOutside,
1153 | years_map,
1154 | years_count,
1155 | dispatch,
1156 | focus_handler,
1157 | div5_binding
1158 | ];
1159 | }
1160 |
1161 | class DatePicker extends SvelteComponentDev {
1162 | constructor(options) {
1163 | super(options);
1164 |
1165 | init(this, options, instance$1, create_fragment$1, safe_not_equal, {
1166 | date: 0,
1167 | visible: 1,
1168 | years_map: 13,
1169 | classes: 2
1170 | });
1171 |
1172 | dispatch_dev("SvelteRegisterComponent", {
1173 | component: this,
1174 | tagName: "DatePicker",
1175 | options,
1176 | id: create_fragment$1.name
1177 | });
1178 | }
1179 |
1180 | get date() {
1181 | throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ': Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ': Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ': Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ': Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ': Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ': Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ': Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '\r\n
\r\n {#each data as item }\r\n {item} \r\n {/each}\r\n \r\n
\r\n
\r\n
Date: {_date}
\r\n
\r\n \r\n
Svelte app
8 |
9 |
151 |
152 | {#each data as item }
153 | {item}
154 | {/each}
155 |
156 |
5 |
6 | 
7 |
8 | 
9 |