vue3-ios-datepicker 0.0.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/README.md +72 -0
- package/dist/components/DatePicker.vue.d.ts +23 -0
- package/dist/components/Vue3IosDatepicker.vue.d.ts +32 -0
- package/dist/index.d.ts +2 -0
- package/dist/models/types.d.ts +4 -0
- package/dist/vue3-ios-datepicker.es.js +1587 -0
- package/dist/vue3-ios-datepicker.umd.js +23 -0
- package/package.json +35 -0
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
## Getting Started
|
|
2
|
+
|
|
3
|
+
## Features
|
|
4
|
+
|
|
5
|
+
- Single date picker
|
|
6
|
+
- Time picker
|
|
7
|
+
- Month picker
|
|
8
|
+
- Year picker
|
|
9
|
+
- Quarter picker
|
|
10
|
+
- Week picker
|
|
11
|
+
- Custom `v-model`
|
|
12
|
+
- SSR support
|
|
13
|
+
- Highly configurable
|
|
14
|
+
- Accessible
|
|
15
|
+
- Included type definitions
|
|
16
|
+
|
|
17
|
+
### Installation
|
|
18
|
+
|
|
19
|
+
```console
|
|
20
|
+
# npm
|
|
21
|
+
npm install vue3-ios-datepicker
|
|
22
|
+
|
|
23
|
+
# yarn
|
|
24
|
+
yarn add vue3-ios-datepicker
|
|
25
|
+
|
|
26
|
+
# pnpm
|
|
27
|
+
pnpm add vue3-ios-datepicker
|
|
28
|
+
|
|
29
|
+
# bun
|
|
30
|
+
bun add vue3-ios-datepicker
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### How to use
|
|
34
|
+
|
|
35
|
+
```vue
|
|
36
|
+
<template>
|
|
37
|
+
<Vue3IosDatepicker v-model="value" />
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script setup lang="ts">
|
|
41
|
+
import { Vue3IosDatepicker } from "vue3-ios-datepicker"; // import component
|
|
42
|
+
const value = ref<Date>(new Date());
|
|
43
|
+
</script>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Props and attributes
|
|
47
|
+
|
|
48
|
+
| ID | Type | Default | Description |
|
|
49
|
+
| -------------- | -------- | -------------- | -------------------------------------------------- |
|
|
50
|
+
| `placeholder` | `String` | `Select date` | Placeholder of native input |
|
|
51
|
+
| `id` | `String` | | Id of native input |
|
|
52
|
+
| `name` | `String` | | Name of native input |
|
|
53
|
+
| `format` | `String` | `YYYY-MM-DD` | Format of the displayed value in the input box |
|
|
54
|
+
| `iconClose` | `String` | | Custom close icon in bottom sheet of calendar |
|
|
55
|
+
| `class` | `String` | | Custom class container |
|
|
56
|
+
| `inputClass` | `String` | | Custom class native input |
|
|
57
|
+
| `title` | `String` | `Select Date` | Custom title in bottom sheet of calendar |
|
|
58
|
+
| `defaultValue` | `Date` | | Optional, default date of the calendar |
|
|
59
|
+
| `confirmLabel` | `String` | `OK` | Text of confirm button in bottom sheet of calendar |
|
|
60
|
+
| `icon` | `String` | `CalendarIcon` | Custom calendar icon |
|
|
61
|
+
| `options` | `Object` | | See in below |
|
|
62
|
+
|
|
63
|
+
## Options
|
|
64
|
+
|
|
65
|
+
| ID | Type | Default | Description |
|
|
66
|
+
| --------- | ------ | ------- | ----------------------------------------------------- |
|
|
67
|
+
| `minDate` | `Date` | | disable confirm button if value less than minDate |
|
|
68
|
+
| `maxDate` | `Date` | | disable confirm button if value greather than maxDate |
|
|
69
|
+
|
|
70
|
+
## Events
|
|
71
|
+
|
|
72
|
+
- `onChange`: Emitted value when click confirm button
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { IOptions } from '../models/types.js';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
modelValue: string;
|
|
4
|
+
placeholder: string;
|
|
5
|
+
id: string;
|
|
6
|
+
name: string;
|
|
7
|
+
class: string;
|
|
8
|
+
format: string;
|
|
9
|
+
title: string;
|
|
10
|
+
defaultValue?: Date;
|
|
11
|
+
confirmLabel: string;
|
|
12
|
+
options?: IOptions;
|
|
13
|
+
};
|
|
14
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
15
|
+
"update:modelValue": (value: string) => any;
|
|
16
|
+
onChange: (value: string) => any;
|
|
17
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
18
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
19
|
+
onOnChange?: ((value: string) => any) | undefined;
|
|
20
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
21
|
+
EDatePicker: HTMLInputElement;
|
|
22
|
+
}, HTMLDivElement>;
|
|
23
|
+
export default _default;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { IOptions } from '../models/types';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
modelValue?: Date;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
id?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
format?: string;
|
|
8
|
+
iconClose?: string;
|
|
9
|
+
class?: string;
|
|
10
|
+
inputClass?: string;
|
|
11
|
+
title?: string;
|
|
12
|
+
defaultValue?: Date;
|
|
13
|
+
confirmLabel?: string;
|
|
14
|
+
options?: IOptions;
|
|
15
|
+
icon?: string;
|
|
16
|
+
};
|
|
17
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
18
|
+
"update:modelValue": (value: Date) => any;
|
|
19
|
+
onChange: (value: string) => any;
|
|
20
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
21
|
+
"onUpdate:modelValue"?: ((value: Date) => any) | undefined;
|
|
22
|
+
onOnChange?: ((value: string) => any) | undefined;
|
|
23
|
+
}>, {
|
|
24
|
+
placeholder: string;
|
|
25
|
+
class: string;
|
|
26
|
+
format: string;
|
|
27
|
+
title: string;
|
|
28
|
+
confirmLabel: string;
|
|
29
|
+
inputClass: string;
|
|
30
|
+
icon: string;
|
|
31
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
32
|
+
export default _default;
|
package/dist/index.d.ts
ADDED