test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: updated Date/Datetime/DateRange Picker component

Browse Source
This commit is contained in:
Shariq Ansari 2024-06-08 19:59:32 +05:30
parent 3c0232f9da
commit 74e54c1cd2
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/Controls/DatePicker.vue
View File

@ -4,16 +4,14 @@
class="flex w-full [&>div:first-child]:w-full" class="flex w-full [&>div:first-child]:w-full"
> >
<template #target="{ togglePopover }"> <template #target="{ togglePopover }">
<input <Input
readonly readonly
type="text" type="text"
:placeholder="placeholder" :placeholder="placeholder"
:value="value && formatter ? formatter(value) : value" :value="value && formatter ? formatter(value) : value"
@focus="!readonly ? togglePopover() : null" @focus="!readonly ? togglePopover() : null"
:class="[ class="w-full"
'form-input block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm placeholder-gray-500', :class="inputClass"
inputClass,
]"
v-bind="$attrs" v-bind="$attrs"
/> />
</template> </template>
@ -23,7 +21,11 @@
> >
<div class="flex items-center p-1 text-gray-500"> <div class="flex items-center p-1 text-gray-500">
<Button variant="ghost" class="h-7 w-7" @click="prevMonth"> <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" /> <FeatherIcon
:stroke-width="2"
name="chevron-left"
class="h-4 w-4"
/>
</Button> </Button>
<div class="flex-1 text-center text-base font-medium text-gray-700"> <div class="flex-1 text-center text-base font-medium text-gray-700">
{{ formatMonth }} {{ formatMonth }}

15
frontend/src/components/Controls/DateRangePicker.vue
View File

@ -4,16 +4,15 @@
class="flex w-full [&>div:first-child]:w-full" class="flex w-full [&>div:first-child]:w-full"
> >
<template #target="{ togglePopover }"> <template #target="{ togglePopover }">
<input <Input
readonly readonly
type="text" type="text"
:placeholder="placeholder" :placeholder="placeholder"
:value="formatter ? formatDates(value) : value" :value="formatter ? formatDates(value) : value"
@focus="!readonly ? togglePopover() : null" @focus="!readonly ? togglePopover() : null"
:class="[ class="w-full"
'form-input block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm placeholder-gray-500 ', :class="inputClass"
inputClass, v-bind="$attrs"
]"
/> />
</template> </template>
<template #body="{ togglePopover }"> <template #body="{ togglePopover }">
@ -22,7 +21,11 @@
> >
<div class="flex items-center p-1 text-gray-500"> <div class="flex items-center p-1 text-gray-500">
<Button variant="ghost" class="h-7 w-7" @click="prevMonth"> <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" /> <FeatherIcon
:stroke-width="2"
name="chevron-left"
class="h-4 w-4"
/>
</Button> </Button>
<div class="flex-1 text-center text-base font-medium text-gray-700"> <div class="flex-1 text-center text-base font-medium text-gray-700">
{{ formatMonth }} {{ formatMonth }}

7
frontend/src/components/Controls/DatetimePicker.vue
View File

@ -10,6 +10,7 @@
:placeholder="placeholder" :placeholder="placeholder"
:value="value && formatter ? formatter(value) : value" :value="value && formatter ? formatter(value) : value"
@focus="!readonly ? togglePopover() : null" @focus="!readonly ? togglePopover() : null"
class="w-full"
:class="inputClass" :class="inputClass"
v-bind="$attrs" v-bind="$attrs"
/> />
@ -20,7 +21,11 @@
> >
<div class="flex items-center p-1 text-gray-500"> <div class="flex items-center p-1 text-gray-500">
<Button variant="ghost" class="h-7 w-7" @click="prevMonth"> <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" /> <FeatherIcon
:stroke-width="2"
name="chevron-left"
class="h-4 w-4"
/>
</Button> </Button>
<div class="flex-1 text-center text-base font-medium text-gray-700"> <div class="flex-1 text-center text-base font-medium text-gray-700">
{{ formatMonth }} {{ formatMonth }}