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() {
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
return date.toLocaleString('en-US', {
month: 'short',
month: 'long',
year: 'numeric',
})
},

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

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