bs-ad-calendar-react 1.1.0 → 1.2.0
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 +165 -86
- package/dist/bs-ad-calendar.css +1 -1
- package/dist/bs-ad-calendar.js +1261 -1120
- package/dist/bs-ad-calendar.umd.cjs +8 -8
- package/dist/vite.svg +1 -1
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -13,32 +13,20 @@ A modern React calendar component for seamless conversion between **Bikram Samba
|
|
|
13
13
|
|
|
14
14
|
**Select any date → Get both BS and AD dates automatically**
|
|
15
15
|
|
|
16
|
-
When you click a date on either calendar, you instantly receive both the BS and AD equivalents with formatted output.
|
|
17
|
-
|
|
18
|
-
**Example Output:**
|
|
19
16
|
```
|
|
20
|
-
Input: Click
|
|
21
|
-
|
|
22
|
-
Output:
|
|
23
|
-
{
|
|
24
|
-
bs: "2081-09-15",
|
|
25
|
-
ad: "2024-12-31",
|
|
26
|
-
formatted: {
|
|
27
|
-
bs: "Poush 15, 2081",
|
|
28
|
-
ad: "December 31, 2024"
|
|
29
|
-
}
|
|
30
|
-
}
|
|
17
|
+
Input: Click Poush 15, 2081 (BS)
|
|
18
|
+
Output: { bs: "2081-09-15", ad: "2024-12-31", formatted: {...} }
|
|
31
19
|
```
|
|
32
20
|
|
|
33
21
|
## Features
|
|
34
22
|
|
|
35
23
|
- Automatic dual calendar conversion
|
|
36
|
-
- Single date and range selection
|
|
37
|
-
- Customizable themes
|
|
38
|
-
- Nepali localization
|
|
39
|
-
-
|
|
24
|
+
- Single date and range selection
|
|
25
|
+
- Customizable themes and colors
|
|
26
|
+
- Nepali localization
|
|
27
|
+
- Keyboard navigation
|
|
40
28
|
- Responsive design
|
|
41
|
-
-
|
|
29
|
+
- TypeScript support
|
|
42
30
|
- Accessible (ARIA labels)
|
|
43
31
|
|
|
44
32
|
## Installation
|
|
@@ -47,9 +35,9 @@ Output:
|
|
|
47
35
|
npm install bs-ad-calendar-react
|
|
48
36
|
```
|
|
49
37
|
|
|
50
|
-
##
|
|
38
|
+
## Examples
|
|
51
39
|
|
|
52
|
-
### Basic
|
|
40
|
+
### Basic Calendar
|
|
53
41
|
|
|
54
42
|
```tsx
|
|
55
43
|
import { Calendar } from 'bs-ad-calendar-react'
|
|
@@ -58,17 +46,86 @@ export default function App() {
|
|
|
58
46
|
return (
|
|
59
47
|
<Calendar
|
|
60
48
|
calendarType="BS"
|
|
61
|
-
onDateSelect={(date) =>
|
|
62
|
-
console.log(date.bs) // "2081-09-15"
|
|
63
|
-
console.log(date.ad) // "2024-12-31"
|
|
64
|
-
console.log(date.formatted.bs) // "Poush 15, 2081"
|
|
65
|
-
console.log(date.formatted.ad) // "December 31, 2024"
|
|
66
|
-
}}
|
|
49
|
+
onDateSelect={(date) => console.log(date)}
|
|
67
50
|
/>
|
|
68
51
|
)
|
|
69
52
|
}
|
|
70
53
|
```
|
|
71
54
|
|
|
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
|
+
}
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Range Selection
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<Calendar
|
|
71
|
+
calendarType="BS"
|
|
72
|
+
mode="range"
|
|
73
|
+
showRangePresets
|
|
74
|
+
onRangeSelect={(range) => console.log(range)}
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
**Output:**
|
|
79
|
+
```
|
|
80
|
+
{
|
|
81
|
+
start: { year: 2081, month: 8, day: 1 },
|
|
82
|
+
end: { year: 2081, month: 8, day: 30 }
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Range Presets with Filtering
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'
|
|
90
|
+
|
|
91
|
+
<Calendar
|
|
92
|
+
calendarType="BS"
|
|
93
|
+
mode="range"
|
|
94
|
+
showRangePresets
|
|
95
|
+
rangePresetsPosition="left"
|
|
96
|
+
presetKeys={[
|
|
97
|
+
PRESET_KEYS.LAST_7_DAYS,
|
|
98
|
+
PRESET_KEYS.LAST_30_DAYS,
|
|
99
|
+
PRESET_KEYS.THIS_MONTH,
|
|
100
|
+
PRESET_KEYS.LAST_MONTH
|
|
101
|
+
]}
|
|
102
|
+
onRangeSelect={(range) => console.log(range)}
|
|
103
|
+
/>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Custom Preset Labels
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'
|
|
110
|
+
|
|
111
|
+
<Calendar
|
|
112
|
+
calendarType="AD"
|
|
113
|
+
mode="range"
|
|
114
|
+
showRangePresets
|
|
115
|
+
presetKeys={[
|
|
116
|
+
PRESET_KEYS.LAST_7_DAYS,
|
|
117
|
+
PRESET_KEYS.LAST_30_DAYS,
|
|
118
|
+
PRESET_KEYS.THIS_MONTH
|
|
119
|
+
]}
|
|
120
|
+
presetLabels={{
|
|
121
|
+
[PRESET_KEYS.LAST_7_DAYS]: 'Past Week',
|
|
122
|
+
[PRESET_KEYS.LAST_30_DAYS]: 'Past Month',
|
|
123
|
+
[PRESET_KEYS.THIS_MONTH]: 'Current Month'
|
|
124
|
+
}}
|
|
125
|
+
onRangeSelect={(range) => console.log(range)}
|
|
126
|
+
/>
|
|
127
|
+
```
|
|
128
|
+
|
|
72
129
|
### DatePicker Input
|
|
73
130
|
|
|
74
131
|
```tsx
|
|
@@ -85,21 +142,61 @@ export default function App() {
|
|
|
85
142
|
}
|
|
86
143
|
```
|
|
87
144
|
|
|
88
|
-
###
|
|
145
|
+
### Nepali Localization
|
|
89
146
|
|
|
90
147
|
```tsx
|
|
91
|
-
|
|
148
|
+
<Calendar
|
|
149
|
+
calendarType="BS"
|
|
150
|
+
showNepaliMonths
|
|
151
|
+
showNepaliDays
|
|
152
|
+
showNepaliNumbers
|
|
153
|
+
onDateSelect={(date) => console.log(date)}
|
|
154
|
+
/>
|
|
155
|
+
```
|
|
92
156
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
157
|
+
### Custom Colors
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
<Calendar
|
|
161
|
+
calendarType="BS"
|
|
162
|
+
colors={{
|
|
163
|
+
primary: '#10b981',
|
|
164
|
+
selected: '#059669',
|
|
165
|
+
today: '#d1fae5'
|
|
166
|
+
}}
|
|
167
|
+
onDateSelect={(date) => console.log(date)}
|
|
168
|
+
/>
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Dark Theme
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
<Calendar
|
|
175
|
+
calendarType="BS"
|
|
176
|
+
theme="dark"
|
|
177
|
+
onDateSelect={(date) => console.log(date)}
|
|
178
|
+
/>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
### Date Constraints
|
|
182
|
+
|
|
183
|
+
```tsx
|
|
184
|
+
<Calendar
|
|
185
|
+
calendarType="AD"
|
|
186
|
+
minDate="2024-01-01"
|
|
187
|
+
maxDate="2024-12-31"
|
|
188
|
+
onDateSelect={(date) => console.log(date)}
|
|
189
|
+
/>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
### Disabled State
|
|
193
|
+
|
|
194
|
+
```tsx
|
|
195
|
+
<Calendar
|
|
196
|
+
calendarType="BS"
|
|
197
|
+
disabled
|
|
198
|
+
onDateSelect={(date) => console.log(date)}
|
|
199
|
+
/>
|
|
103
200
|
```
|
|
104
201
|
|
|
105
202
|
## API Reference
|
|
@@ -110,18 +207,22 @@ export default function App() {
|
|
|
110
207
|
|------|------|---------|-------------|
|
|
111
208
|
| `calendarType` | `'BS' \| 'AD'` | `'AD'` | Calendar type |
|
|
112
209
|
| `mode` | `'single' \| 'range'` | `'single'` | Selection mode |
|
|
113
|
-
| `onDateSelect` | `(date: DateOutput) => void` | - | Date
|
|
114
|
-
| `onRangeSelect` | `(range: DateRange) => void` | - | Range
|
|
210
|
+
| `onDateSelect` | `(date: DateOutput) => void` | - | Date callback |
|
|
211
|
+
| `onRangeSelect` | `(range: DateRange) => void` | - | Range callback |
|
|
115
212
|
| `showToday` | `boolean` | `true` | Highlight today |
|
|
116
213
|
| `disabled` | `boolean` | `false` | Disable interaction |
|
|
117
214
|
| `minDate` | `string` | - | Min selectable date |
|
|
118
215
|
| `maxDate` | `string` | - | Max selectable date |
|
|
119
|
-
| `theme` | `'light' \| 'dark'` | `'light'` | Theme
|
|
216
|
+
| `theme` | `'light' \| 'dark'` | `'light'` | Theme |
|
|
120
217
|
| `colors` | `ColorConfig` | - | Custom colors |
|
|
121
|
-
| `showNepaliMonths` | `boolean` | `false` | Nepali
|
|
122
|
-
| `showNepaliDays` | `boolean` | `false` | Nepali
|
|
123
|
-
| `showNepaliNumbers` | `boolean` | `false` | Nepali
|
|
124
|
-
| `showRangePresets` | `boolean` | `false` | Show
|
|
218
|
+
| `showNepaliMonths` | `boolean` | `false` | Nepali months |
|
|
219
|
+
| `showNepaliDays` | `boolean` | `false` | Nepali days |
|
|
220
|
+
| `showNepaliNumbers` | `boolean` | `false` | Nepali numbers |
|
|
221
|
+
| `showRangePresets` | `boolean` | `false` | Show presets |
|
|
222
|
+
| `rangePresetsPosition` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | Preset position |
|
|
223
|
+
| `presetKeys` | `string[]` | - | Filter presets |
|
|
224
|
+
| `presetLabels` | `Record<string, string>` | - | Rename presets |
|
|
225
|
+
| `predefinedRanges` | `PredefinedRange[]` | - | Custom presets |
|
|
125
226
|
|
|
126
227
|
### DatePicker Props
|
|
127
228
|
|
|
@@ -146,46 +247,6 @@ Extends Calendar props plus:
|
|
|
146
247
|
}
|
|
147
248
|
```
|
|
148
249
|
|
|
149
|
-
## Examples
|
|
150
|
-
|
|
151
|
-
### Custom Theme
|
|
152
|
-
|
|
153
|
-
```tsx
|
|
154
|
-
<Calendar
|
|
155
|
-
calendarType="BS"
|
|
156
|
-
colors={{
|
|
157
|
-
primary: '#10b981',
|
|
158
|
-
selected: '#059669',
|
|
159
|
-
today: '#d1fae5'
|
|
160
|
-
}}
|
|
161
|
-
onDateSelect={(date) => console.log(date)}
|
|
162
|
-
/>
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
### Nepali Localization
|
|
166
|
-
|
|
167
|
-
```tsx
|
|
168
|
-
<Calendar
|
|
169
|
-
calendarType="BS"
|
|
170
|
-
showNepaliMonths
|
|
171
|
-
showNepaliDays
|
|
172
|
-
showNepaliNumbers
|
|
173
|
-
onDateSelect={(date) => console.log(date)}
|
|
174
|
-
/>
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### Date Range
|
|
178
|
-
|
|
179
|
-
```tsx
|
|
180
|
-
<Calendar
|
|
181
|
-
calendarType="BS"
|
|
182
|
-
mode="range"
|
|
183
|
-
minDate="2024-01-01"
|
|
184
|
-
maxDate="2024-12-31"
|
|
185
|
-
onRangeSelect={(range) => console.log(range)}
|
|
186
|
-
/>
|
|
187
|
-
```
|
|
188
|
-
|
|
189
250
|
## Keyboard Navigation
|
|
190
251
|
|
|
191
252
|
- Arrow Left/Right - Navigate months
|
|
@@ -201,6 +262,24 @@ Chrome, Firefox, Safari, Edge (latest versions)
|
|
|
201
262
|
|
|
202
263
|
```tsx
|
|
203
264
|
import type { DateOutput, DateRange, CalendarProps } from 'bs-ad-calendar-react'
|
|
265
|
+
import { PRESET_KEYS } from 'bs-ad-calendar-react'
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
## Available Preset Keys
|
|
269
|
+
|
|
270
|
+
```tsx
|
|
271
|
+
PRESET_KEYS.TODAY // Today
|
|
272
|
+
PRESET_KEYS.YESTERDAY // Yesterday
|
|
273
|
+
PRESET_KEYS.THIS_WEEK // This Week
|
|
274
|
+
PRESET_KEYS.LAST_7_DAYS // Last 7 Days
|
|
275
|
+
PRESET_KEYS.LAST_30_DAYS // Last 30 Days
|
|
276
|
+
PRESET_KEYS.THIS_MONTH // This Month
|
|
277
|
+
PRESET_KEYS.LAST_MONTH // Last Month
|
|
278
|
+
PRESET_KEYS.LAST_3_MONTHS // Last 3 Months
|
|
279
|
+
PRESET_KEYS.LAST_6_MONTHS // Last 6 Months
|
|
280
|
+
PRESET_KEYS.LAST_9_MONTHS // Last 9 Months
|
|
281
|
+
PRESET_KEYS.LAST_180_DAYS // Last 180 Days
|
|
282
|
+
PRESET_KEYS.LAST_YEAR // Last Year (12 months)
|
|
204
283
|
```
|
|
205
284
|
|
|
206
285
|
## License
|
package/dist/bs-ad-calendar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._calendar_lve6c_1{background:var(--calendar-background, white);border:1px solid var(--calendar-border, #e5e7eb);border-radius:8px;box-shadow:0 4px 6px -1px #0000001a;padding:16px;font-family:system-ui,-apple-system,sans-serif;color:var(--calendar-text, #1f2937)}._calendar_lve6c_1>div:has(._grid_lve6c_14){display:flex;gap:16px}@media(max-width:600px){._calendar_lve6c_1>div:has(._grid_lve6c_14){flex-direction:column}}._header_lve6c_25{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}._navButton_lve6c_32{background:none;border:none;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s;color:var(--calendar-text, #1f2937);font-size:18px;font-weight:700;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}._navButton_lve6c_32:hover:not(:disabled){background-color:var(--calendar-hover, #f3f4f6)}._navButton_lve6c_32:disabled{opacity:.5;cursor:not-allowed}._monthYear_lve6c_58{font-weight:600;font-size:16px;color:var(--calendar-text, #1f2937);background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:4px;transition:background-color .2s}._monthYear_lve6c_58:hover:not(:disabled){background-color:var(--calendar-hover, #f3f4f6)}._monthYear_lve6c_58:disabled{cursor:not-allowed}._pickerOverlay_lve6c_78{position:fixed;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1000}._pickerContent_lve6c_88{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;width:90%;max-width:400px;max-height:90vh;overflow:auto}._pickerHeader_lve6c_98{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e5e7eb}._pickerHeader_lve6c_98 h3{margin:0;font-size:16px;font-weight:600}._closeButton_lve6c_112{background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}._closeButton_lve6c_112:hover{background:#f3f4f6}._pickerBody_lve6c_131{padding:16px}._pickerSection_lve6c_135{margin-bottom:20px}._pickerSection_lve6c_135:last-child{margin-bottom:0}._pickerSection_lve6c_135 label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#374151}._pickerSectionHeader_lve6c_151{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}._pickerSectionHeader_lve6c_151 label{margin-bottom:0}._yearNav_lve6c_162{display:flex;align-items:center;gap:8px}._yearNav_lve6c_162 button{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:16px;color:var(--calendar-primary, #3b82f6)}._yearNav_lve6c_162 button:hover:not(:disabled){background:var(--calendar-hover, #eff6ff)}._yearNav_lve6c_162 button:disabled{opacity:.3;cursor:not-allowed}._yearNav_lve6c_162 span{font-size:13px;font-weight:500;min-width:80px;text-align:center}._yearGrid_lve6c_194{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}._yearGrid_lve6c_194 button{padding:10px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}._yearGrid_lve6c_194 button:hover{background:#f3f4f6}._yearGrid_lve6c_194 button._selected_lve6c_214{background:var(--calendar-selected, #3b82f6);color:#fff;border-color:var(--calendar-selected, #3b82f6)}._monthGrid_lve6c_220{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}._monthGrid_lve6c_220 button{padding:12px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}._monthGrid_lve6c_220 button:hover{background:#f3f4f6}._monthGrid_lve6c_220 button._selected_lve6c_214{background:var(--calendar-selected, #3b82f6);color:#fff;border-color:var(--calendar-selected, #3b82f6)}._grid_lve6c_14{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}._dayHeader_lve6c_252{text-align:center;font-weight:500;font-size:12px;color:var(--calendar-disabled, #6b7280);padding:8px 4px}._day_lve6c_252{aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;transition:all .2s;font-size:14px;color:var(--calendar-text, #1f2937);min-height:32px}._day_lve6c_252:hover:not(._dayDisabled_lve6c_273):not(._dayOtherMonth_lve6c_273){background-color:var(--calendar-hover, #f3f4f6)}._daySelected_lve6c_277{background-color:var(--calendar-selected, #3b82f6)!important;color:#fff!important}._dayToday_lve6c_282{background-color:var(--calendar-today, #dbeafe);color:var(--calendar-primary, #1d4ed8);font-weight:600}._dayInRange_lve6c_288{background-color:var(--calendar-hover, #eff6ff);color:var(--calendar-primary, #1d4ed8)}._dayDisabled_lve6c_273{color:var(--calendar-disabled, #d1d5db);cursor:not-allowed}._dayOtherMonth_lve6c_273{color:var(--calendar-disabled, #9ca3af);cursor:default}._calendar_lve6c_1[data-theme=dark]{--calendar-primary: #60a5fa;--calendar-background: #1f2937;--calendar-text: #f9fafb;--calendar-border: #374151;--calendar-hover: #374151;--calendar-selected: #3b82f6;--calendar-today: #1e40af;--calendar-disabled: #6b7280}._datePicker_z7mc2_1{position:relative;display:inline-block;width:100%}._input_z7mc2_7{width:100%;padding:10px 40px 10px 12px;border:1px solid var(--datepicker-border, #d1d5db);border-radius:var(--datepicker-radius, 6px);font-size:var(--datepicker-font-size, 14px);cursor:pointer;background:var(--datepicker-background, white);color:var(--datepicker-text, #1f2937);transition:border-color .2s,box-shadow .2s;box-sizing:border-box}._input_z7mc2_7:hover{border-color:var(--datepicker-border-hover, #9ca3af)}._input_z7mc2_7:focus{outline:none;border-color:var(--datepicker-border-focus, #3b82f6);box-shadow:0 0 0 3px var(--datepicker-focus-ring, rgba(59, 130, 246, .1))}._input_z7mc2_7:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.6}._iconButton_z7mc2_38{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--datepicker-icon, #6b7280);transition:color .2s}._iconButton_z7mc2_38:hover{color:var(--datepicker-icon-hover, #3b82f6)}._iconButton_z7mc2_38:disabled{cursor:not-allowed;opacity:.5}._popup_z7mc2_64{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;box-shadow:0 10px 25px #00000026;border-radius:8px;background:#fff}@media(max-width:640px){._popup_z7mc2_64{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90vw}}
|