bs-ad-calendar-react 1.0.3 → 1.1.1
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/LICENSE +1 -1
- package/README.md +135 -153
- package/dist/bs-ad-calendar.js +120 -112
- package/dist/bs-ad-calendar.umd.cjs +1 -1
- package/package.json +4 -1
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,46 +1,48 @@
|
|
|
1
1
|
# BS-AD Calendar
|
|
2
2
|
|
|
3
|
-
A modern
|
|
3
|
+
A modern React calendar component for seamless conversion between **Bikram Sambat (BS)** and **Gregorian (AD)** calendars.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/bs-ad-calendar-react)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## Live Demo
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
[View Demo](https://bibekamatya.github.io/bs-ad-calendar/)
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
🎨 **Customizable Themes** - Light/dark themes with custom color support
|
|
14
|
-
📅 **Date & Range Selection** - Single date or date range selection modes
|
|
15
|
-
🌏 **Localization** - Nepali months, days, and number support
|
|
16
|
-
⌨️ **Keyboard Navigation** - Full keyboard accessibility
|
|
17
|
-
📱 **Responsive Design** - Works on all screen sizes
|
|
18
|
-
🎯 **DatePicker Component** - Input field with popup calendar
|
|
19
|
-
🔧 **TypeScript** - Full type definitions included
|
|
20
|
-
♿ **Accessible** - ARIA labels and keyboard navigation
|
|
12
|
+
## Key Feature
|
|
21
13
|
|
|
22
|
-
|
|
14
|
+
**Select any date → Get both BS and AD dates automatically**
|
|
23
15
|
|
|
24
|
-
```bash
|
|
25
|
-
npm install bs-ad-calendar-react
|
|
26
16
|
```
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
yarn add bs-ad-calendar-react
|
|
17
|
+
Input: Click Poush 15, 2081 (BS)
|
|
18
|
+
Output: { bs: "2081-09-15", ad: "2024-12-31", formatted: {...} }
|
|
30
19
|
```
|
|
31
20
|
|
|
21
|
+
## Features
|
|
22
|
+
|
|
23
|
+
- Automatic dual calendar conversion
|
|
24
|
+
- Single date and range selection
|
|
25
|
+
- Customizable themes and colors
|
|
26
|
+
- Nepali localization
|
|
27
|
+
- Keyboard navigation
|
|
28
|
+
- Responsive design
|
|
29
|
+
- TypeScript support
|
|
30
|
+
- Accessible (ARIA labels)
|
|
31
|
+
|
|
32
|
+
## Installation
|
|
33
|
+
|
|
32
34
|
```bash
|
|
33
|
-
|
|
35
|
+
npm install bs-ad-calendar-react
|
|
34
36
|
```
|
|
35
37
|
|
|
36
|
-
##
|
|
38
|
+
## Examples
|
|
37
39
|
|
|
38
40
|
### Basic Calendar
|
|
39
41
|
|
|
40
42
|
```tsx
|
|
41
43
|
import { Calendar } from 'bs-ad-calendar-react'
|
|
42
44
|
|
|
43
|
-
function App() {
|
|
45
|
+
export default function App() {
|
|
44
46
|
return (
|
|
45
47
|
<Calendar
|
|
46
48
|
calendarType="BS"
|
|
@@ -50,111 +52,86 @@ function App() {
|
|
|
50
52
|
}
|
|
51
53
|
```
|
|
52
54
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
placeholder="Select a date"
|
|
63
|
-
onDateSelect={(date) => console.log(date)}
|
|
64
|
-
/>
|
|
65
|
-
)
|
|
55
|
+
**Output:**
|
|
56
|
+
```
|
|
57
|
+
{
|
|
58
|
+
bs: "2081-09-15",
|
|
59
|
+
ad: "2024-12-31",
|
|
60
|
+
formatted: {
|
|
61
|
+
bs: "Poush 15, 2081",
|
|
62
|
+
ad: "December 31, 2024"
|
|
63
|
+
}
|
|
66
64
|
}
|
|
67
65
|
```
|
|
68
66
|
|
|
69
67
|
### Range Selection
|
|
70
68
|
|
|
71
69
|
```tsx
|
|
72
|
-
|
|
70
|
+
<Calendar
|
|
71
|
+
calendarType="BS"
|
|
72
|
+
mode="range"
|
|
73
|
+
showRangePresets
|
|
74
|
+
onRangeSelect={(range) => console.log(range)}
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
73
77
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
showRangePresets
|
|
80
|
-
onRangeSelect={(range) => console.log(range)}
|
|
81
|
-
/>
|
|
82
|
-
)
|
|
78
|
+
**Output:**
|
|
79
|
+
```
|
|
80
|
+
{
|
|
81
|
+
start: { year: 2081, month: 8, day: 1 },
|
|
82
|
+
end: { year: 2081, month: 8, day: 30 }
|
|
83
83
|
}
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
### Calendar Props
|
|
89
|
-
|
|
90
|
-
| Prop | Type | Default | Description |
|
|
91
|
-
|------|------|---------|-------------|
|
|
92
|
-
| `calendarType` | `'BS' \| 'AD'` | `'AD'` | Calendar type |
|
|
93
|
-
| `mode` | `'single' \| 'range'` | `'single'` | Selection mode |
|
|
94
|
-
| `onDateSelect` | `(date: DateOutput) => void` | - | Single date selection callback |
|
|
95
|
-
| `onRangeSelect` | `(range: DateRange) => void` | - | Range selection callback |
|
|
96
|
-
| `showToday` | `boolean` | `true` | Highlight today's date |
|
|
97
|
-
| `disabled` | `boolean` | `false` | Disable calendar interaction |
|
|
98
|
-
| `minDate` | `string` | - | Minimum selectable date (ISO format) |
|
|
99
|
-
| `maxDate` | `string` | - | Maximum selectable date (ISO format) |
|
|
100
|
-
| `theme` | `'light' \| 'dark' \| 'custom'` | `'light'` | Theme variant |
|
|
101
|
-
| `colors` | `ColorConfig` | - | Custom color configuration |
|
|
102
|
-
| `showNepaliMonths` | `boolean` | `false` | Show Nepali month names |
|
|
103
|
-
| `showNepaliDays` | `boolean` | `false` | Show Nepali day names |
|
|
104
|
-
| `showNepaliNumbers` | `boolean` | `false` | Show Nepali numerals |
|
|
105
|
-
| `showRangePresets` | `boolean` | `false` | Show range preset buttons |
|
|
106
|
-
| `rangePresetsPosition` | `'top' \| 'left'` | `'top'` | Position of range presets |
|
|
107
|
-
| `className` | `string` | - | Additional CSS class |
|
|
108
|
-
|
|
109
|
-
### DatePicker Props
|
|
110
|
-
|
|
111
|
-
Extends all Calendar props plus:
|
|
112
|
-
|
|
113
|
-
| Prop | Type | Default | Description |
|
|
114
|
-
|------|------|---------|-------------|
|
|
115
|
-
| `placeholder` | `string` | `'Select date'` | Input placeholder text |
|
|
116
|
-
| `inputClassName` | `string` | - | Input container CSS class |
|
|
117
|
-
| `popupClassName` | `string` | - | Popup calendar CSS class |
|
|
118
|
-
|
|
119
|
-
### Color Configuration
|
|
86
|
+
### Custom Range Presets
|
|
120
87
|
|
|
121
88
|
```tsx
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}
|
|
89
|
+
<Calendar
|
|
90
|
+
calendarType="BS"
|
|
91
|
+
mode="range"
|
|
92
|
+
showRangePresets
|
|
93
|
+
predefinedRanges={[
|
|
94
|
+
{
|
|
95
|
+
key: 'last-30-days',
|
|
96
|
+
label: 'Last 30 Days',
|
|
97
|
+
getValue: () => ({
|
|
98
|
+
start: { year: 2081, month: 8, day: 1 },
|
|
99
|
+
end: { year: 2081, month: 8, day: 30 }
|
|
100
|
+
})
|
|
101
|
+
}
|
|
102
|
+
]}
|
|
103
|
+
onRangeSelect={(range) => console.log(range)}
|
|
104
|
+
/>
|
|
132
105
|
```
|
|
133
106
|
|
|
134
|
-
###
|
|
107
|
+
### DatePicker Input
|
|
135
108
|
|
|
136
109
|
```tsx
|
|
137
|
-
{
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
110
|
+
import { DatePicker } from 'bs-ad-calendar-react'
|
|
111
|
+
|
|
112
|
+
export default function App() {
|
|
113
|
+
return (
|
|
114
|
+
<DatePicker
|
|
115
|
+
calendarType="AD"
|
|
116
|
+
placeholder="Select a date"
|
|
117
|
+
onDateSelect={(date) => console.log(date)}
|
|
118
|
+
/>
|
|
119
|
+
)
|
|
144
120
|
}
|
|
145
121
|
```
|
|
146
122
|
|
|
147
|
-
###
|
|
123
|
+
### Nepali Localization
|
|
148
124
|
|
|
149
125
|
```tsx
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
126
|
+
<Calendar
|
|
127
|
+
calendarType="BS"
|
|
128
|
+
showNepaliMonths
|
|
129
|
+
showNepaliDays
|
|
130
|
+
showNepaliNumbers
|
|
131
|
+
onDateSelect={(date) => console.log(date)}
|
|
132
|
+
/>
|
|
154
133
|
```
|
|
155
134
|
|
|
156
|
-
## Examples
|
|
157
|
-
|
|
158
135
|
### Custom Colors
|
|
159
136
|
|
|
160
137
|
```tsx
|
|
@@ -163,21 +140,18 @@ colors={{
|
|
|
163
140
|
colors={{
|
|
164
141
|
primary: '#10b981',
|
|
165
142
|
selected: '#059669',
|
|
166
|
-
today: '#d1fae5'
|
|
167
|
-
hover: '#ecfdf5'
|
|
143
|
+
today: '#d1fae5'
|
|
168
144
|
}}
|
|
169
145
|
onDateSelect={(date) => console.log(date)}
|
|
170
146
|
/>
|
|
171
147
|
```
|
|
172
148
|
|
|
173
|
-
###
|
|
149
|
+
### Dark Theme
|
|
174
150
|
|
|
175
151
|
```tsx
|
|
176
152
|
<Calendar
|
|
177
153
|
calendarType="BS"
|
|
178
|
-
|
|
179
|
-
showNepaliDays
|
|
180
|
-
showNepaliNumbers
|
|
154
|
+
theme="dark"
|
|
181
155
|
onDateSelect={(date) => console.log(date)}
|
|
182
156
|
/>
|
|
183
157
|
```
|
|
@@ -193,76 +167,84 @@ colors={{
|
|
|
193
167
|
/>
|
|
194
168
|
```
|
|
195
169
|
|
|
196
|
-
###
|
|
170
|
+
### Disabled State
|
|
197
171
|
|
|
198
172
|
```tsx
|
|
199
173
|
<Calendar
|
|
200
174
|
calendarType="BS"
|
|
201
|
-
|
|
175
|
+
disabled
|
|
202
176
|
onDateSelect={(date) => console.log(date)}
|
|
203
177
|
/>
|
|
204
178
|
```
|
|
205
179
|
|
|
206
|
-
|
|
180
|
+
## API Reference
|
|
181
|
+
|
|
182
|
+
### Calendar Props
|
|
183
|
+
|
|
184
|
+
| Prop | Type | Default | Description |
|
|
185
|
+
|------|------|---------|-------------|
|
|
186
|
+
| `calendarType` | `'BS' \| 'AD'` | `'AD'` | Calendar type |
|
|
187
|
+
| `mode` | `'single' \| 'range'` | `'single'` | Selection mode |
|
|
188
|
+
| `onDateSelect` | `(date: DateOutput) => void` | - | Date callback |
|
|
189
|
+
| `onRangeSelect` | `(range: DateRange) => void` | - | Range callback |
|
|
190
|
+
| `showToday` | `boolean` | `true` | Highlight today |
|
|
191
|
+
| `disabled` | `boolean` | `false` | Disable interaction |
|
|
192
|
+
| `minDate` | `string` | - | Min selectable date |
|
|
193
|
+
| `maxDate` | `string` | - | Max selectable date |
|
|
194
|
+
| `theme` | `'light' \| 'dark'` | `'light'` | Theme |
|
|
195
|
+
| `colors` | `ColorConfig` | - | Custom colors |
|
|
196
|
+
| `showNepaliMonths` | `boolean` | `false` | Nepali months |
|
|
197
|
+
| `showNepaliDays` | `boolean` | `false` | Nepali days |
|
|
198
|
+
| `showNepaliNumbers` | `boolean` | `false` | Nepali numbers |
|
|
199
|
+
| `showRangePresets` | `boolean` | `false` | Show presets |
|
|
200
|
+
| `predefinedRanges` | `PredefinedRange[]` | - | Custom presets |
|
|
201
|
+
|
|
202
|
+
### DatePicker Props
|
|
203
|
+
|
|
204
|
+
Extends Calendar props plus:
|
|
205
|
+
|
|
206
|
+
| Prop | Type | Default | Description |
|
|
207
|
+
|------|------|---------|-------------|
|
|
208
|
+
| `placeholder` | `string` | `'Select date'` | Input placeholder |
|
|
209
|
+
| `inputClassName` | `string` | - | Input CSS class |
|
|
210
|
+
| `popupClassName` | `string` | - | Popup CSS class |
|
|
211
|
+
|
|
212
|
+
### Output Format
|
|
207
213
|
|
|
208
214
|
```tsx
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
getValue: (type) => ({
|
|
218
|
-
start: { year: 2081, month: 8, day: 1 },
|
|
219
|
-
end: { year: 2081, month: 8, day: 30 }
|
|
220
|
-
})
|
|
221
|
-
}
|
|
222
|
-
]}
|
|
223
|
-
onRangeSelect={(range) => console.log(range)}
|
|
224
|
-
/>
|
|
215
|
+
{
|
|
216
|
+
bs: "2081-09-15",
|
|
217
|
+
ad: "2024-12-31",
|
|
218
|
+
formatted: {
|
|
219
|
+
bs: "Poush 15, 2081",
|
|
220
|
+
ad: "December 31, 2024"
|
|
221
|
+
}
|
|
222
|
+
}
|
|
225
223
|
```
|
|
226
224
|
|
|
227
225
|
## Keyboard Navigation
|
|
228
226
|
|
|
229
|
-
-
|
|
230
|
-
-
|
|
231
|
-
-
|
|
232
|
-
-
|
|
233
|
-
- **Tab**: Navigate between interactive elements
|
|
227
|
+
- Arrow Left/Right - Navigate months
|
|
228
|
+
- Arrow Up/Down - Navigate years
|
|
229
|
+
- PageUp/PageDown - Navigate months
|
|
230
|
+
- Shift + PageUp/PageDown - Navigate years
|
|
234
231
|
|
|
235
232
|
## Browser Support
|
|
236
233
|
|
|
237
|
-
|
|
238
|
-
- Firefox (latest)
|
|
239
|
-
- Safari (latest)
|
|
240
|
-
- Edge (latest)
|
|
234
|
+
Chrome, Firefox, Safari, Edge (latest versions)
|
|
241
235
|
|
|
242
236
|
## TypeScript
|
|
243
237
|
|
|
244
|
-
Full TypeScript support with exported types:
|
|
245
|
-
|
|
246
238
|
```tsx
|
|
247
|
-
import type {
|
|
248
|
-
DateInfo,
|
|
249
|
-
DateRange,
|
|
250
|
-
DateOutput,
|
|
251
|
-
CalendarProps
|
|
252
|
-
} from 'bs-ad-calendar-react'
|
|
239
|
+
import type { DateOutput, DateRange, CalendarProps } from 'bs-ad-calendar-react'
|
|
253
240
|
```
|
|
254
241
|
|
|
255
|
-
## Contributing
|
|
256
|
-
|
|
257
|
-
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
258
|
-
|
|
259
242
|
## License
|
|
260
243
|
|
|
261
244
|
MIT © [Bibek Amatya](https://github.com/bibekamatya)
|
|
262
245
|
|
|
263
246
|
## Links
|
|
264
247
|
|
|
265
|
-
- [GitHub
|
|
266
|
-
- [NPM
|
|
267
|
-
- [
|
|
268
|
-
- [Report Issues](https://github.com/bibekamatya/bs-ad-calendar/issues)
|
|
248
|
+
- [GitHub](https://github.com/bibekamatya/bs-ad-calendar)
|
|
249
|
+
- [NPM](https://www.npmjs.com/package/bs-ad-calendar-react)
|
|
250
|
+
- [Demo](https://bibekamatya.github.io/bs-ad-calendar/)
|