react-day-picker-bikram-sambat 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,6 +7,10 @@
|
|
|
7
7
|
|
|
8
8
|
[Bikram Sambat](https://en.wikipedia.org/wiki/Bikram_Sambat) (BS) calendar plugin for [react-day-picker](https://daypicker.dev) — the official calendar of Nepal.
|
|
9
9
|
|
|
10
|
+
<p align="left">
|
|
11
|
+
<img src="assets/ss8.png" alt="Bikram Sambat example screenshot" />
|
|
12
|
+
</p>
|
|
13
|
+
|
|
10
14
|
## Why Bikram Sambat?
|
|
11
15
|
|
|
12
16
|
The Bikram Sambat is Nepal's official calendar, approximately 56.7 years ahead of the Gregorian calendar. It's a lunisolar calendar widely used in Nepal for:
|
|
@@ -42,6 +46,10 @@ npm install react react-day-picker
|
|
|
42
46
|
| ------------------ | ---------- |
|
|
43
47
|
| `react-day-picker` | `>=9.0.0` |
|
|
44
48
|
|
|
49
|
+
## shadcn/ui Component
|
|
50
|
+
|
|
51
|
+
Looking for a shadcn/ui component? Check out [bikram-sambat-shadcnui](https://bs-calendar.lifeatearth.com) — a shadcn/ui component registry based on this package.
|
|
52
|
+
|
|
45
53
|
## Quick start
|
|
46
54
|
|
|
47
55
|
```tsx
|
|
@@ -68,6 +76,10 @@ function App() {
|
|
|
68
76
|
}
|
|
69
77
|
```
|
|
70
78
|
|
|
79
|
+
<p align="center">
|
|
80
|
+
<img src="assets/ss1.png" alt="Basic calendar example screenshot" width="400" />
|
|
81
|
+
</p>
|
|
82
|
+
|
|
71
83
|
### English locale with Latin digits
|
|
72
84
|
|
|
73
85
|
```tsx
|
|
@@ -79,6 +91,10 @@ function App() {
|
|
|
79
91
|
}
|
|
80
92
|
```
|
|
81
93
|
|
|
94
|
+
<p align="center">
|
|
95
|
+
<img src="assets/ss7.png" alt="English locale example screenshot" width="400" />
|
|
96
|
+
</p>
|
|
97
|
+
|
|
82
98
|
### Single date selection
|
|
83
99
|
|
|
84
100
|
```tsx
|
|
@@ -93,6 +109,10 @@ function App() {
|
|
|
93
109
|
}
|
|
94
110
|
```
|
|
95
111
|
|
|
112
|
+
<p align="center">
|
|
113
|
+
<img src="assets/ss9.png" alt="Single date selection example screenshot" width="400" />
|
|
114
|
+
</p>
|
|
115
|
+
|
|
96
116
|
### Date range selection
|
|
97
117
|
|
|
98
118
|
```tsx
|
|
@@ -108,6 +128,10 @@ function App() {
|
|
|
108
128
|
}
|
|
109
129
|
```
|
|
110
130
|
|
|
131
|
+
<p align="center">
|
|
132
|
+
<img src="assets/ss2.png" alt="Date range selection example screenshot" width="400" />
|
|
133
|
+
</p>
|
|
134
|
+
|
|
111
135
|
### Multiple date selection
|
|
112
136
|
|
|
113
137
|
```tsx
|
|
@@ -122,6 +146,10 @@ function App() {
|
|
|
122
146
|
}
|
|
123
147
|
```
|
|
124
148
|
|
|
149
|
+
<p align="center">
|
|
150
|
+
<img src="assets/ss3.png" alt="Multiple date selection example screenshot" width="400" />
|
|
151
|
+
</p>
|
|
152
|
+
|
|
125
153
|
### With dropdown navigation
|
|
126
154
|
|
|
127
155
|
```tsx
|
|
@@ -139,6 +167,10 @@ function App() {
|
|
|
139
167
|
}
|
|
140
168
|
```
|
|
141
169
|
|
|
170
|
+
<p align="center">
|
|
171
|
+
<img src="assets/ss10.png" alt="Dropdown navigation example screenshot" width="400" />
|
|
172
|
+
</p>
|
|
173
|
+
|
|
142
174
|
### Disabling dates
|
|
143
175
|
|
|
144
176
|
```tsx
|
|
@@ -155,6 +187,10 @@ function App() {
|
|
|
155
187
|
}
|
|
156
188
|
```
|
|
157
189
|
|
|
190
|
+
<p align="center">
|
|
191
|
+
<img src="assets/ss6.png" alt="Disabling dates example screenshot" width="400" />
|
|
192
|
+
</p>
|
|
193
|
+
|
|
158
194
|
### With week numbers
|
|
159
195
|
|
|
160
196
|
```tsx
|
|
@@ -166,6 +202,10 @@ function App() {
|
|
|
166
202
|
}
|
|
167
203
|
```
|
|
168
204
|
|
|
205
|
+
<p align="center">
|
|
206
|
+
<img src="assets/ss5.png" alt="Week numbers example screenshot" width="400" />
|
|
207
|
+
</p>
|
|
208
|
+
|
|
169
209
|
### Multiple months
|
|
170
210
|
|
|
171
211
|
```tsx
|
|
@@ -177,6 +217,10 @@ function App() {
|
|
|
177
217
|
}
|
|
178
218
|
```
|
|
179
219
|
|
|
220
|
+
<p align="center">
|
|
221
|
+
<img src="assets/ss4.png" alt="Multiple month example screenshot" width="400" />
|
|
222
|
+
</p>
|
|
223
|
+
|
|
180
224
|
### Importing locales separately
|
|
181
225
|
|
|
182
226
|
Locales can be imported individually to reduce bundle size:
|
|
@@ -473,4 +517,5 @@ Contributions are welcome!
|
|
|
473
517
|
## Related
|
|
474
518
|
|
|
475
519
|
- [react-day-picker](https://daypicker.dev) — The base calendar component
|
|
520
|
+
- [bikram-sambat-shadui](https://bs-calendar.lifeatearth.com) — shadcn/ui component registry based on this package
|
|
476
521
|
- [Nepali Calendar Mac](https://nepalicalendar.lifeatearth.com) — Lightweight Mac's menu bar Nepali Calendar app.
|
package/package.json
CHANGED