Merge pull request #155 from shariquerik/datepicker

feat: Added datePicker, dateTimePicker & dateRangePicker

src/components/DatePicker.story.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import DatePicker from './DatePicker.vue'
+import DateTimePicker from './DateTimePicker.vue'
+import DateRangePicker from './DateRangePicker.vue'
+
+const state = reactive({
+ variant: 'subtle',
+ placeholder: 'Placeholder',
+ disabled: false,
+ label: 'Label',
+})
+const dateValue = ref('')
+const dateTimeValue = ref('')
+const dateRangeValue = ref('')
+</script>
+
+<template>
+ <Story :layout="{ type: 'grid', width: 500 }">
+ <Variant title="Date">
+ <div class="p-2">
+ <DatePicker v-model="dateValue" v-bind="state" />
+ </div>
+ </Variant>
+ <Variant title="Date Time">
+ <div class="p-2">
+ <DateTimePicker v-model="dateTimeValue" v-bind="state" />
+ </div>
+ </Variant>
+ <Variant title="Date Range">
+ <div class="p-2">
+ <DateRangePicker v-model="dateRangeValue" v-bind="state" />
+ </div>
+ </Variant>
+ </Story>
+</template>

src/components/DatePicker.vue

@@ -1,91 +1,109 @@
 <template>
- <Popover @open="selectCurrentMonthYear" transition="default">
+ <Popover
+ @open="selectCurrentMonthYear"
+ class="flex w-full [&>div:first-child]:w-full"
+ >
  <template #target="{ togglePopover }">
  <Input
+ readonly
  type="text"
  icon-left="calendar"
- :class="inputClass"
- :value="
- modelValue && formatValue ? formatValue(modelValue) : modelValue || ''
- "
  :placeholder="placeholder"
+ :value="dateValue && formatter ? formatter(dateValue) : dateValue"
  @focus="!readonly ? togglePopover() : null"
- readonly
+ class="w-full"
+ :class="inputClass"
+ v-bind="$attrs"
  />
  </template>
- <template #body-main="{ togglePopover }">
- <div class="mt-1 select-none p-3 text-left">
- <div class="flex items-center justify-between">
- <span class="text-base font-medium text-blue-500">
+ <template #body="{ togglePopover }">
+ <div
+ class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+ >
+ <div class="flex items-center p-1 text-gray-500">
+ <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
+ <FeatherIcon
+ :stroke-width="2"
+ name="chevron-left"
+ class="h-4 w-4"
+ />
+ </Button>
+ <div class="flex-1 text-center text-base font-medium text-gray-700">
  {{ formatMonth }}
- </span>
- <span class="flex">
- <div
- class="grid h-5 w-5 cursor-pointer place-items-center rounded-md hover:bg-gray-100"
- >
- <FeatherIcon
- @click="prevMonth"
- name="chevron-left"
- class="h-4 w-4"
- />
- </div>
- <div
- class="ml-2 grid h-5 w-5 cursor-pointer place-items-center rounded-md hover:bg-gray-100"
- >
- <FeatherIcon
- @click="nextMonth"
- name="chevron-right"
- class="h-4 w-4"
- />
- </div>
- </span>
+ </div>
+ <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
+ <FeatherIcon
+ :stroke-width="2"
+ name="chevron-right"
+ class="h-4 w-4"
+ />
+ </Button>
  </div>
- <div class="mt-2 text-sm">
- <div class="grid w-full grid-cols-7 place-items-center text-gray-600">
+ <div class="flex items-center justify-center gap-1 p-1">
+ <TextInput
+ class="text-sm"
+ type="text"
+ :value="dateValue"
+ @change="
+ selectDate(getDate($event.target.value)) || togglePopover()
+ "
+ />
+ <Button
+ :label="'Today'"
+ class="text-sm"
+ @click="selectDate(getDate()) || togglePopover()"
+ />
+ </div>
+ <div
+ class="flex flex-col items-center justify-center p-1 text-gray-800"
+ >
+ <div class="flex items-center text-xs uppercase">
  <div
- class="grid h-6 w-6 place-items-center gap-1 text-center"
- v-for="(d, i) in ['S', 'M', 'T', 'W', 'T', 'F', 'S']"
+ class="flex h-6 w-8 items-center justify-center text-center"
+ v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
  :key="i"
  >
  {{ d }}
  </div>
  </div>
- <div v-for="(week, i) in datesAsWeeks" :key="i" class="mt-1">
- <div class="grid w-full grid-cols-7 place-items-center gap-1">
- <div
- v-for="date in week"
- :key="toValue(date)"
- class="grid h-6 w-6 cursor-pointer place-items-center rounded-md hover:bg-blue-100 hover:text-blue-700"
- :class="{
- 'text-gray-600': date.getMonth() !== currentMonth - 1,
- 'text-blue-500': toValue(date) === toValue(today),
- 'bg-blue-100 font-semibold text-blue-500':
- toValue(date) === modelValue,
- }"
- @click="
- () => {
- selectDate(date)
- togglePopover()
- }
- "
- >
- {{ date.getDate() }}
- </div>
+ <div
+ class="flex items-center"
+ v-for="(week, i) in datesAsWeeks"
+ :key="i"
+ >
+ <div
+ v-for="date in week"
+ :key="toValue(date)"
+ class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
+ :class="{
+ 'text-gray-400': date.getMonth() !== currentMonth - 1,
+ 'font-extrabold text-gray-900':
+ toValue(date) === toValue(today),
+ 'bg-gray-800 text-white hover:bg-gray-800':
+ toValue(date) === dateValue,
+ }"
+ @click="
+ () => {
+ selectDate(date)
+ togglePopover()
+ }
+ "
+ >
+ {{ date.getDate() }}
  </div>
  </div>
  </div>
- <div class="mt-2 flex w-full justify-end">
- <div
- class="cursor-pointer rounded-md px-2 py-1 text-sm hover:bg-gray-100"
+ <div class="flex justify-end p-1">
+ <Button
+ :label="'Clear'"
+ class="text-sm"
  @click="
  () => {
  selectDate('')
  togglePopover()
  }
  "
- >
- Clear
- </div>
+ />
  </div>
  </div>
  </template>
@@ -94,17 +112,27 @@
 
 <script>
 import Input from './Input.vue'
-import FeatherIcon from './FeatherIcon.vue'
+import Button from './Button.vue'
 import Popover from './Popover.vue'
-
+import FeatherIcon from './FeatherIcon.vue'
+import TextInput from './TextInput.vue'
 export default {
  name: 'DatePicker',
- props: ['modelValue', 'placeholder', 'readonly', 'formatValue', 'inputClass'],
- emits: ['update:modelValue'],
+ props: [
+ 'value',
+ 'modelValue',
+ 'placeholder',
+ 'formatter',
+ 'readonly',
+ 'inputClass',
+ ],
+ emits: ['update:modelValue', 'change'],
  components: {
+ Popover,
  Input,
+ Button,
  FeatherIcon,
- Popover,
+ TextInput,
  },
  data() {
  return {
@@ -159,17 +187,25 @@ export default {
  },
  formatMonth() {
  let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
- return date.toLocaleString('en-US', { month: 'short', year: 'numeric' })
+ let month = date.toLocaleString('en-US', {
+ month: 'long',
+ })
+ return `${month}, ${date.getFullYear()}`
+ },
+ dateValue() {
+ return this.value ? this.value : this.modelValue
  },
  },
  methods: {
  selectDate(date) {
+ this.$emit('change', this.toValue(date))
  this.$emit('update:modelValue', this.toValue(date))
  },
  selectCurrentMonthYear() {
- let date = this.modelValue
- ? this.getDate(this.modelValue)
- : this.getDate()
+ let date = this.dateValue ? this.getDate(this.dateValue) : this.getDate()
+ if (date === 'Invalid Date') {
+ date = this.getDate()
+ }
  this.currentYear = date.getFullYear()
  this.currentMonth = date.getMonth() + 1
  },