You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A small date picker built with Svelte. Demo available here: [svelte-calendar](https://6edesign.github.io/svelte-calendar/)
3
2
4
-
# Basic usage (svelte v3):
3
+
A small date picker built with Svelte 3. Demo available here: [demo page].
4
+
5
+
## Basic usage
6
+
7
+
```html
8
+
<Datepicker />
9
+
```
10
+
11
+
## With custom settings
12
+
5
13
```html
6
14
<Datepicker
7
-
format="{dateFormat}"
15
+
format={dateFormat}
8
16
start={threeDaysInPast}
9
17
end={inThirtyDays}
10
18
selectableCallback={noWeekendsSelectableCallback}
11
19
/>
12
20
```
13
-
`start` & `end` are Date objects.
14
21
15
-
`format` Date formatting uses [timeUtils](https://github.com/6eDesign/timeUtils) formatting.
22
+
`start` and `end` are [`Date`] objects.
23
+
24
+
`format` Date formatting uses [`timeUtils`] formatting (MM/DD/YYYY by default).
25
+
26
+
`selectableCallback` should be a function that accepts a single date as an argument and returns true (if selectable) or false (if unavailable).
27
+
28
+
More examples can be found on the [demo page].
29
+
30
+
## Binding data
31
+
32
+
```html
33
+
<Datepicker
34
+
bind:selected
35
+
bind:formattedSelected
36
+
bind:dateChosen
37
+
/>
38
+
```
39
+
40
+
`selected` is a [`Date`] object. `formattedSelected` is a string - it's the `Date` object formatted using [`timeUtils`].
16
41
17
-
`selectableCallback` should be a function that accepts a single date as an argument and return true (if selectable) or false (if unavailable).
42
+
`dateChosen` is a boolean, false by default, true after user selection.
18
43
19
-
## Developing/Modifying Svelte-Calendar Guide:
20
-
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
44
+
## Developing/Modifying Svelte-Calendar Guide
45
+
46
+
*Note that you will need to have [Node.js] installed.*
21
47
22
48
Install the dependencies...
23
49
@@ -26,10 +52,17 @@ cd svelte-calendar
26
52
npm install
27
53
```
28
54
29
-
...then start [Rollup](https://rollupjs.org):
55
+
...then start [Rollup]:
30
56
31
57
```bash
32
58
npm run dev
33
59
```
34
60
35
-
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and your browser will reload the page so you can see your changes automatically.
61
+
Navigate to [localhost:5000]. You should see your app running. Edit a component file in `src`, save it, and your browser will reload the page so you can see your changes automatically.
0 commit comments