v-datepicker-lite 0.1.1 → 0.1.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 +10 -10
- package/composables/useCalendar.d.ts +2 -1
- package/index.js +934 -890
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,13 +4,13 @@ A lightweight and customizable Vue 3 date picker component with support for date
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
7
|
+
- **Multiple Selection Modes**: Supports `date`, `time`, `dateTime`, `week`, and `month` modes.
|
|
8
|
+
- **Responsive Design**: Adapts to various screen sizes with a clean, modern UI.
|
|
9
|
+
- **Accessibility**: Includes ARIA attributes and keyboard navigation for enhanced usability.
|
|
10
|
+
- **Customizable**: Flexible props for date format, time format, min/max dates, disabled dates, and more.
|
|
11
|
+
- **Configurable Time Intervals**: Supports any minute interval (1-60 minutes) for time selection in both TimePicker and DatePicker components.
|
|
12
|
+
- **Performance Optimized**: Uses Vue 3 composition API for efficient rendering and state management.
|
|
13
|
+
- **TypeScript Support**: Fully typed with TypeScript for better developer experience.
|
|
14
14
|
|
|
15
15
|
## Demo
|
|
16
16
|
|
|
@@ -240,9 +240,9 @@ const selectedTime = ref(null)
|
|
|
240
240
|
|
|
241
241
|
The `minuteInterval` prop allows you to customize the minute options displayed in both the TimePicker and DatePicker (when in `dateTime` or `time` mode). This is useful for:
|
|
242
242
|
|
|
243
|
-
-
|
|
244
|
-
-
|
|
245
|
-
-
|
|
243
|
+
- **Scheduling applications**: Set 15 or 30-minute intervals for appointment booking
|
|
244
|
+
- **Time tracking**: Use 5 or 10-minute intervals for precise time logging
|
|
245
|
+
- **Simplified selection**: Use 60-minute intervals to show only full hours
|
|
246
246
|
|
|
247
247
|
### Examples:
|
|
248
248
|
|
|
@@ -6,6 +6,7 @@ export declare function useCalendar(props: any, emit: any): {
|
|
|
6
6
|
selectedDate: import('vue').ComputedRef<any>;
|
|
7
7
|
canGoPrev: import('vue').ComputedRef<boolean>;
|
|
8
8
|
canGoNext: import('vue').ComputedRef<boolean>;
|
|
9
|
+
hasTime: import('vue').ComputedRef<boolean>;
|
|
9
10
|
goToPrevMonth: () => void;
|
|
10
11
|
goToNextMonth: () => void;
|
|
11
12
|
goToPrevYear: () => void;
|
|
@@ -18,5 +19,5 @@ export declare function useCalendar(props: any, emit: any): {
|
|
|
18
19
|
onWeekSelect: (weekStart: Date) => void;
|
|
19
20
|
onMonthSelect: (month: number) => void;
|
|
20
21
|
onYearSelect: (year: number) => void;
|
|
21
|
-
emitValue: (date: Date) => void;
|
|
22
|
+
emitValue: (date: Date, forceTime?: boolean) => void;
|
|
22
23
|
};
|