erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-05-26 12:44:03 +07:00
parent aa084150b5
commit cc3bb9cfb5
6 changed files with 172 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
app/components/datepicker/PickDay.vue
View File

@@ -1,9 +1,6 @@
<template>
<div
class="px-2"
style="width: 300px"
>
<div class="is-flex is-gap-1 is-justify-content-space-between is-align-items-stretch h-8">
<div class="is-flex is-flex-direction-column is-gap-1">
<div class="is-flex is-gap-1 is-justify-content-space-between h-8">
<div class="buttons is-gap-0.5 m-0 is-align-items-stretch">
<button
@click="previousYear"
@@ -29,17 +26,17 @@
</span>
</button>
</div>
<div class="is-flex is-align-items-center is-gap-0">
<div class="buttons is-gap-0 m-0 is-align-items-center">
<button
v-if="type === 'days'"
@click="type = 'months'"
class="button is-white p-2 has-text-primary font-bold h-full"
class="button is-white p-1.5 fs-14 has-text-primary font-semibold h-full"
>
T{{ month }}
</button>
<button
@click="type = 'years'"
class="button is-white p-2 has-text-primary font-bold h-full"
class="button is-white p-1.5 fs-14 has-text-primary font-semibold h-full"
>
{{ caption || year }}
</button>
@@ -70,59 +67,63 @@
</button>
</div>
</div>
<hr class="mt-1 mb-5" />
<div v-if="type === 'days'">
<div class="columns is-mobile mx-0 mb-3">
<div
v-for="(m, h) in dateOfWeek"
:key="h"
class="fs-14 column p-0 has-text-grey is-flex is-justify-content-center is-align-items-center"
>
{{ m.text }}
<div class="fixed-grid has-7-cols mb-1 fs-13 has-background-white-bis has-text-grey rounded-sm">
<div class="grid is-gap-0">
<p
v-for="(m, h) in dateOfWeek"
:key="h"
class="cell py-1 is-flex is-justify-content-center is-align-items-center is-unselectable"
>
{{ m.text }}
</p>
</div>
</div>
<div
v-for="(v, i) in weeks"
:key="i"
:class="`columns is-mobile mx-0 mb-1 ${i === weeks.length - 1 ? 'mb-1' : ''}`"
class="fixed-grid has-7-cols mb-0"
>
<div
v-for="(m, h) in v.dates"
:key="h"
class="column p-0 is-flex is-justify-content-center is-align-items-center"
style="width: 40px; height: 32px"
>
<span
v-if="m.disable"
class="fs-13 has-text-grey-lighter"
>
{{ m.dayPrint }}
</span>
<span
v-else
class="fs-13 is-clickable"
@click="choose(m)"
<div class="grid is-gap-0">
<div
v-for="(m, h) in v.dates"
:key="h"
class="cell is-flex is-justify-content-center is-align-items-center"
style="height: 32px"
>
<span
style="width: 25px; height: 25px"
v-if="m.disabled"
class="fs-13 has-text-grey-light is-unselectable"
>
{{ m.dayPrint.replace(/^0/, "") }}
</span>
<button
v-else
@click="choose(m)"
style="width: 26px; height: 26px"
:class="[
'p-1 rounded-full is-flex is-justify-content-center is-align-items-center',
'button fs-13 font-normal p-1 rounded-full is-flex',
{
'has-background-primary has-text-white': m.date === curdate,
'has-background-success-50 has-text-white': m.date === today,
'has-text-grey-light': m.currentMonth !== m.monthCondition,
'is-white': m.date !== $dayjs(today).format('YYYY/MM/DD'),
'is-primary': m.date === curdate,
'has-text-grey': m.currentMonth !== m.monthCondition && m.date !== curdate,
},
]"
>
{{ m.dayPrint }}
</span>
</span>
{{ m.dayPrint.replace(/^0/, "") }}
</button>
</div>
</div>
</div>
<hr class="my-1" />
<div class="mt-2 fs-14">
<span class="ml-2">Hôm nay: </span>
<a @click="chooseToday">{{ $dayjs(today).format("L") }}</a>
<hr class="my-2" />
<div class="mx-2 is-flex is-gap-0.5 is-align-items-center">
<p class="fs-14">Hôm nay:</p>
<button
@click="chooseToday"
class="button is-white has-text-primary-65 p-1 fs-14"
>
{{ $dayjs(today).format("L") }}
</button>
</div>
</div>
<PickMonth
@@ -138,8 +139,8 @@
</div>
</template>
<script setup>
import PickMonth from "@/components/datepicker/PickMonth";
import PickYear from "@/components/datepicker/PickYear";
import PickMonth from "@/components/datepicker/PickMonth.vue";
import PickYear from "@/components/datepicker/PickYear.vue";
const { $id, $dayjs, $unique } = useNuxtApp();
const emit = defineEmits(["date"]);
@@ -149,17 +150,17 @@ const props = defineProps({
});
const dates = ref([]);
const dateOfWeek = [
{ id: 0, text: "CN" },
{ id: 1, text: "T2" },
{ id: 0, text: "T2" },
{ id: 2, text: "T3" },
{ id: 3, text: "T4" },
{ id: 4, text: "T5" },
{ id: 5, text: "T6" },
{ id: 6, text: "T7" },
{ id: 2, text: "T4" },
{ id: 3, text: "T5" },
{ id: 4, text: "T6" },
{ id: 5, text: "T7" },
{ id: 6, text: "CN" },
];
const weeks = ref([]);
const year = ref();
let month;
const month = ref();
const type = ref("days");
const caption = ref();
const action = ref();
@@ -167,22 +168,22 @@ const curdate = ref();
const today = new Date();
function showDate() {
curdate.value = props.date ? props.date.replaceAll("-", "/") : undefined;
curdate.value = props.date;
year.value = $dayjs(curdate.value || today).year();
month = $dayjs(curdate.value || today).month() + 1;
month.value = $dayjs(curdate.value || today).month() + 1;
getDates();
}
function chooseToday() {
emit("date", $dayjs(today).format("YYYY-MM-DD")); //today.replaceAll('/', '-'))
emit("date", $dayjs(today).format("YYYY/MM/DD"));
year.value = $dayjs(today).year();
month = $dayjs(today).month() + 1;
month.value = $dayjs(today).month() + 1;
getDates();
}
function changeCaption(v) {
caption.value = v;
}
function selectMonth(v) {
month = v;
month.value = v;
getDates();
type.value = "days";
}
@@ -193,26 +194,26 @@ function selectYear(v) {
}
function getDates() {
caption.value = undefined;
dates.value = allDaysInMonth(year.value, month);
dates.value = allDaysInMonth(year.value, month.value);
weeks.value = $unique(dates.value, ["week"]).map((v) => {
return { week: v.week };
});
weeks.value.map((v) => {
weeks.value.forEach((v) => {
v.dates = dates.value.filter((x) => x.week === v.week);
});
}
function nextMonth() {
month = month + 1;
if (month > 12) {
month = 1;
month.value = month.value + 1;
if (month.value > 12) {
month.value = 1;
year.value += 1;
}
getDates();
}
function previousMonth() {
month = month - 1;
if (month === 0) {
month = 12;
month.value = month.value - 1;
if (month.value === 0) {
month.value = 12;
year.value -= 1;
}
getDates();
@@ -228,53 +229,52 @@ function previousYear() {
getDates();
}
function choose(m) {
emit("date", m.date.replaceAll("/", "-"));
}
function createDate(v, x, y) {
return v + "/" + (x < 10 ? "0" + x.toString() : x.toString()) + "/" + (y < 10 ? "0" + y.toString() : y.toString());
emit("date", m.date);
}
function allDaysInMonth(year, month) {
let days = Array.from({ length: $dayjs(createDate(year, month, 1)).daysInMonth() }, (_, i) => i + 1);
let arr = [];
days.map((v) => {
const days = Array.from({ length: $dayjs([year, month, 1]).daysInMonth() }, (_, i) => i + 1);
const arr = [];
days.forEach((day) => {
for (let i = 0; i < 7; i++) {
let thedate = $dayjs(createDate(year, month, v)).weekday(i);
let date = $dayjs(new Date(thedate.$d)).format("YYYY/MM/DD");
let dayPrint = $dayjs(new Date(thedate.$d)).format("DD");
let monthCondition = $dayjs(date).month() + 1;
let currentMonth = month;
let found = arr.find((x) => x.date === date);
const thedate = $dayjs([year, month, day]).weekday(i);
const date = thedate.format("YYYY/MM/DD");
const monthCondition = thedate.month() + 1;
const found = arr.find((x) => x.date === date);
if (!found) {
let dayOfWeek = $dayjs(date).day();
let week = $dayjs(date).week();
let disable = false;
if (props.maxdate ? $dayjs(props.maxdate).diff(props.date, "day") >= 0 : false) {
if ($dayjs(props.maxdate).startOf("day").diff(date, "day") < 0) disable = true;
let disabled = false;
if (props.maxdate) {
const maxDateObj = $dayjs(props.maxdate);
if (maxDateObj.diff(props.date, "day") >= 0 && maxDateObj.startOf("day").diff(date, "day") < 0) {
disabled = true;
}
}
let ele = {
date: date,
week: week,
day: v,
dayOfWeek: dayOfWeek,
dayPrint: dayPrint,
monthCondition: monthCondition,
currentMonth: currentMonth,
disable: disable,
const ele = {
date,
day,
week: thedate.week(),
dayOfWeek: thedate.day(),
dayPrint: thedate.format("DD"),
monthCondition,
currentMonth: month,
disabled,
};
arr.push(ele);
}
}
});
return arr;
}
// display
showDate();
// change date
watch(
() => props.date,
() => {
showDate();
},
{ immediate: true },
);
</script>
<style scoped>