@pr0vin/np-date-picker-vue-tw 1.0.7 → 1.0.8
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 +7 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,13 +30,13 @@ yarn add @pr0vin/np-date-picker-vue-tw
|
|
|
30
30
|
<script setup>
|
|
31
31
|
import { ref } from "vue";
|
|
32
32
|
import "@pr0vin/np-date-picker-vue-tw/dist/np-date-picker-vue-tw.css";
|
|
33
|
-
import
|
|
33
|
+
import { NepaliDatePicker } from "@pr0vin/np-date-picker-vue-tw";
|
|
34
34
|
|
|
35
35
|
const selectedDate = ref("");
|
|
36
36
|
</script>
|
|
37
37
|
|
|
38
38
|
<template>
|
|
39
|
-
<
|
|
39
|
+
<NepaliDatePicker
|
|
40
40
|
v-model="selectedDate"
|
|
41
41
|
placeholder="Select a date"
|
|
42
42
|
:todayValue="true"
|
|
@@ -63,13 +63,13 @@ const selectedDate = ref("");
|
|
|
63
63
|
You can override Tailwind classes to adjust calendar size, font, colors, etc.
|
|
64
64
|
|
|
65
65
|
```vue
|
|
66
|
-
<
|
|
66
|
+
<NepaliDatePicker class="np-text-xs np-w-40" />
|
|
67
67
|
```
|
|
68
68
|
|
|
69
69
|
You can also style the input field:
|
|
70
70
|
|
|
71
71
|
```vue
|
|
72
|
-
<
|
|
72
|
+
<NepaliDatePicker
|
|
73
73
|
class="np-text-sm np-w-32 np-border np-border-gray-300 np-rounded"
|
|
74
74
|
/>
|
|
75
75
|
```
|
|
@@ -83,15 +83,15 @@ If you have multiple date pickers on the same page, the component automatically
|
|
|
83
83
|
```vue
|
|
84
84
|
<script setup>
|
|
85
85
|
import { ref } from "vue";
|
|
86
|
-
import
|
|
86
|
+
import { NepaliDatePicker } from "@pr0vin/np-date-picker-vue-tw";
|
|
87
87
|
|
|
88
88
|
const date1 = ref("");
|
|
89
89
|
const date2 = ref("");
|
|
90
90
|
</script>
|
|
91
91
|
|
|
92
92
|
<template>
|
|
93
|
-
<
|
|
94
|
-
<
|
|
93
|
+
<NepaliDatePicker v-model="date1" placeholder="Select first date" />
|
|
94
|
+
<NepaliDatePicker v-model="date2" placeholder="Select second date" />
|
|
95
95
|
</template>
|
|
96
96
|
```
|
|
97
97
|
|