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

fix: daterangepicker espresso style

Browse Source
This commit is contained in:
Shariq Ansari 2024-02-07 20:54:03 +05:30
parent 4849860501
commit 2aaf51f681
2 changed files with 53 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -167,7 +167,7 @@ export default {
formatMonth() { formatMonth() {
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1) let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
return date.toLocaleString('en-US', { return date.toLocaleString('en-US', {
month: 'short', month: 'long',
year: 'numeric', year: 'numeric',
}) })
}, },

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

@ -18,81 +18,77 @@
</template> </template>
<template #body="{ togglePopover }"> <template #body="{ togglePopover }">
<div <div
class="my-2 w-[16rem] select-none space-y-3 rounded border border-gray-50 bg-white p-3 text-base shadow" 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 text-gray-700"> <div class="flex items-center p-1 text-gray-500">
<div <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
class="flex h-6 w-6 cursor-pointer items-center justify-center rounded hover:bg-gray-100" <FeatherIcon stroke-width="2" name="chevron-left" class="h-4 w-4" />
> </Button>
<FeatherIcon <div class="flex-1 text-center text-base font-medium text-gray-700">
@click="prevMonth"
name="chevron-left"
class="h-5 w-5"
/>
</div>
<div class="flex-1 text-center text-lg font-medium text-blue-500">
{{ formatMonth }} {{ formatMonth }}
</div> </div>
<div <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
class="flex h-6 w-6 cursor-pointer items-center justify-center rounded hover:bg-gray-100"
>
<FeatherIcon <FeatherIcon
@click="nextMonth" stroke-width="2"
name="chevron-right" name="chevron-right"
class="h-5 w-5" class="h-4 w-4"
/> />
</div> </Button>
</div> </div>
<div class="flex space-x-2"> <div class="flex items-center justify-center gap-1 p-1">
<Input type="text" v-model="fromDate"></Input> <TextInput class="w-28 text-sm" type="text" v-model="fromDate" />
<Input type="text" v-model="toDate"></Input> <TextInput class="w-28 text-sm" type="text" v-model="toDate" />
</div> </div>
<div class="mt-2 flex flex-col items-center justify-center text-base"> <div
<div class="flex flex-col items-center justify-center p-1 text-gray-800"
class="flex w-full items-center justify-center space-x-1 text-gray-600" >
> <div class="flex items-center text-xs uppercase">
<div <div
class="flex h-[30px] w-[30px] items-center justify-center text-center" class="flex h-6 w-8 items-center justify-center text-center"
v-for="(d, i) in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
:key="i" :key="i"
> >
{{ d }} {{ d }}
</div> </div>
</div> </div>
<div v-for="(week, i) in datesAsWeeks" :key="i"> <div
<div class="flex w-full items-center"> class="flex items-center"
<div v-for="(week, i) in datesAsWeeks"
v-for="date in week" :key="i"
:key="toValue(date)" >
class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center hover:bg-blue-50 hover:text-blue-500" <div
:class="{ v-for="date in week"
'text-gray-600': date.getMonth() !== currentMonth - 1, :key="toValue(date)"
'text-blue-500': toValue(date) === toValue(today), class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
'bg-blue-50 text-blue-500': isInRange(date), :class="{
'rounded-l-md bg-blue-100': 'text-gray-400': date.getMonth() !== currentMonth - 1,
fromDate && toValue(date) === toValue(fromDate), 'text-gray-900': date.getMonth() === currentMonth - 1,
'rounded-r-md bg-blue-100': 'font-extrabold text-gray-900':
toDate && toValue(date) === toValue(toDate), toValue(date) === toValue(today),
}" 'rounded-none bg-gray-100': isInRange(date),
@click="() => handleDateClick(date)" 'rounded-l-md rounded-r-none bg-gray-800 text-white hover:bg-gray-800':
> fromDate && toValue(date) === toValue(fromDate),
{{ date.getDate() }} 'rounded-r-md bg-gray-800 text-white hover:bg-gray-800':
</div> toDate && toValue(date) === toValue(toDate),
}"
@click="() => handleDateClick(date)"
>
{{ date.getDate() }}
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-end space-x-1 p-1">
<div class="mt-1 flex w-full justify-end space-x-2">
<Button @click="() => clearDates()" :disabled="!value">
Clear
</Button>
<Button <Button
@click="() => selectDates() | togglePopover()" label="Clear"
@click="() => clearDates() | togglePopover()"
:disabled="!fromDate || !toDate" :disabled="!fromDate || !toDate"
/>
<Button
variant="solid" variant="solid"
> label="Apply"
Apply :disabled="!fromDate || !toDate"
</Button> @click="() => selectDates() | togglePopover()"
/>
</div> </div>
</div> </div>
</template> </template>
@ -166,7 +162,7 @@ export default {
formatMonth() { formatMonth() {
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1) let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
return date.toLocaleString('en-US', { return date.toLocaleString('en-US', {
month: 'short', month: 'long',
year: 'numeric', year: 'numeric',
}) })
}, },