Merge pull request #4 from heumlabs/feat/add-dateinput

Feat/add dateinput
heumlabs · Dec 21, 2023 · 024dd2e · 024dd2e
2 parents c1e2c64 + 72fa54f
commit 024dd2e
Show file tree

Hide file tree

Showing 22 changed files with 2,212 additions and 134 deletions.
diff --git a/README.md b/README.md
@@ -56,25 +56,41 @@ npm install @heumlabs/vue-datepicker
 ## API
 ### DatePicker
 #### Props
-| Name               | Description                                               | Type     | Required | Default                                       |
-|--------------------|-----------------------------------------------------------|----------|----------|-----------------------------------------------|
+| Name               | Description                                               | Type      | Required | Default                                       |
+|--------------------|-----------------------------------------------------------|-----------|----------|-----------------------------------------------|
 | year               | year to show                                              | `number`  | yes      |                                               |
 | monthIndex         | month to show (0 ~ 11)                                    | `number`  | yes      |                                               |
 | headerFormat       | header text format                                        | `string`  | no       | `'YYYY.M'               `                     |
-| dayLabels          | day labels start from sunday                              | `string[]` | no       | `['Sun','Mon','Tue','Wed','Thu','Fri','Sat']` |
-| todayLabel         | text shown below today                                    | `string`  | no       | `'Today'`                                         |
+| dayLabels          | day labels start from sunday                              | `string[]`| no       | `['Sun','Mon','Tue','Wed','Thu','Fri','Sat']` |
+| todayLabel         | text shown below today                                    | `string`  | no       | `'Today'`                                     |
 | startDate          | start date for select range                               | `Date`    | no       |                                               |
 | endDate            | end date for select range                                 | `Date`    | no       |                                               |
-| selectedDates      | dates to show selected                                    | `Date[]`  | no       | `[]`                                            |
-| currentDate        | to customize current date to show today on different date | `Date`    | no       | `new Date()`                                    |
-| disableDatesAfter  | show dates disabled after disableDatesAfter               | `Date`     | no       |                                               |
-| disableDatesBefore | show dates disabled before disableDatesBefore             | `Date`     | no       |                                               |
+| selectedDates      | dates to show selected                                    | `Date[]`  | no       | `[]`                                          |
+| currentDate        | to customize current date to show today on different date | `Date`    | no       | `new Date()`                                  |
+| disableDatesAfter  | show dates disabled after disableDatesAfter               | `Date`    | no       |                                               |
+| disableDatesBefore | show dates disabled before disableDatesBefore             | `Date`    | no       |                                               |
 
 #### Events
 | Name   | Description                                       | Parameters                        |
 |--------|---------------------------------------------------|-----------------------------------|
 | select | date click event. dateString format: 'YYYY-MM-DD' | dateString:  string, event: Event |
 
+### DateInput
+#### Props
+| Name               | Description                                                                           | Type      | Required | Default     |
+|--------------------|---------------------------------------------------------------------------------------|-----------|----------|-------------|
+| label              | input label text                                                                      | `string`  | yes      |             |
+| value              | formatted date string ('YYYY-MM-DD') or empty string if input string value is invalid | `string`  | yes      |             |
+| disableDatesAfter  | property for validation                                                               | `Date`    | no       |             |
+| disableDatesBefore | property for validation                                                               | `Date`    | no       |             |
+
+#### Events
+| Name   | Description                                       | Parameters                        |
+|--------|---------------------------------------------------|-----------------------------------|
+| input  | date input event. dateString format: 'YYYY-MM-DD' | dateString: string                |
+| focus  | input focus event.                                | event: Event                      |
+| blur   | input blur event.                                 | event: Event                      |
+
 ## Changelog
 
 All notable changes to this project will be documented in the [Releases Page](https://github.com/heumlabs/heum-vue-datepicker/releases).

diff --git a/dev/App.vue b/dev/App.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
+import {ref} from "vue";
 import DatePicker from '@/DatePicker';
+import DateInput from "@/DateInput/DateInput.vue";
+
+const yearMonthIndex = ref({
+  year: 2023,
+  monthIndex: 11,
+});
 
 const startDate = new Date('1995-12-17T03:24:00');
 const endDate = new Date('1995-12-23T03:24:00');
@@ -10,19 +17,50 @@ const customCurrentDate = new Date('1995-12-25T13:07:00');
 const handleSelectDate = (dateString: string, event: Event) => {
   console.log(dateString, event);
 };
+
+const startDateInput = ref('');
+const handleInputStartDate = (dateString?: string) => {
+  startDateInput.value = dateString?.replace(/-/g, '.') || '';
+};
+
+const handleClickNext = () => {
+  yearMonthIndex.value = {
+    year: yearMonthIndex.value.year + (yearMonthIndex.value.monthIndex === 11 ? 1 : 0),
+    monthIndex: (yearMonthIndex.value.monthIndex + 1) % 12,
+  };
+};
+
+const handleClickPrev = () => {
+  yearMonthIndex.value = {
+    year: yearMonthIndex.value.year - (yearMonthIndex.value.monthIndex === 0 ? 1 : 0),
+    monthIndex: yearMonthIndex.value.monthIndex === 0 ? 11 : yearMonthIndex.value.monthIndex - 1,
+  };
+}
 </script>
 
 <template>
   <div style="padding: 128px;">
     <div style="display: inline-block;background-color: white;border-radius: 8px;box-shadow: 0 4px 10px rgba(165,165,165,0.2);">
       <DatePicker
-        :year="1995"
-        :month-index="11"
+        :year="yearMonthIndex.year"
+        :month-index="yearMonthIndex.monthIndex"
         :start-date="startDate"
         :end-date="endDate"
         :disable-dates-after="disableDatesAfter"
         :current-date="customCurrentDate"
         @select="handleSelectDate"
+        @click-next="handleClickNext"
+        @click-prev="handleClickPrev"
+      />
+    </div>
+
+    <br><br>
+
+    <div style="display: inline-block;background-color: white;border-radius: 8px;box-shadow: 0 4px 10px rgba(165,165,165,0.2);">
+      <DateInput
+        label="Start Date"
+        :value="startDateInput"
+        @input="handleInputStartDate"
       />
     </div>
   </div>

diff --git a/dev/main.ts b/dev/main.ts
@@ -1,4 +1,15 @@
 import { createApp } from 'vue';
+import dayjs from "dayjs";
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+
 import App from './App.vue';
+import '@/style.scss';
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+dayjs.extend(customParseFormat);
+
 
 createApp(App).mount('#app');