แก้รูปแบบเวลาเป็น 24 ชม.
This commit is contained in:
setthawutttty
parent
2f9d289c4c
commit
d0687adfc3
2 changed files with 231 additions and 54 deletions
|
|
@ -54,6 +54,25 @@ const objectRound: MyObjectRoundRef = {
|
||||||
endTimeAfternoon: pmOutRef,
|
endTimeAfternoon: pmOutRef,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const formDate = reactive<any>({
|
||||||
|
startTimeMorning: {
|
||||||
|
hours: new Date().getHours(),
|
||||||
|
minutes: new Date().getMinutes(),
|
||||||
|
},
|
||||||
|
endTimeMorning: {
|
||||||
|
hours: new Date().getHours(),
|
||||||
|
minutes: new Date().getMinutes(),
|
||||||
|
},
|
||||||
|
startTimeAfternoon: {
|
||||||
|
hours: new Date().getHours(),
|
||||||
|
minutes: new Date().getMinutes(),
|
||||||
|
},
|
||||||
|
endTimeAfternoon: {
|
||||||
|
hours: new Date().getHours(),
|
||||||
|
minutes: new Date().getMinutes(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
/** Form ข้อมูล */
|
/** Form ข้อมูล */
|
||||||
const formData = reactive<FormData>({
|
const formData = reactive<FormData>({
|
||||||
startTimeMorning: "",
|
startTimeMorning: "",
|
||||||
|
|
@ -200,16 +219,29 @@ watch(
|
||||||
<p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
|
<p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
|
||||||
<div class="row justify-between q-my-sm items-start">
|
<div class="row justify-between q-my-sm items-start">
|
||||||
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
||||||
<q-input
|
|
||||||
ref="amRef"
|
<datepicker
|
||||||
class="inputgreen"
|
menu-class-name="modalfix"
|
||||||
|
v-model="formDate.startTimeMorning"
|
||||||
|
time-picker
|
||||||
:readonly="props.editCheck === 'edit' || isRead"
|
:readonly="props.editCheck === 'edit' || isRead"
|
||||||
:outlined="props.editCheck === 'add'"
|
:enableTimePicker="true"
|
||||||
dense
|
@update:model-value="(value:any)=>(formData.startTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||||
lazy-rules
|
>
|
||||||
borderless
|
<template #trigger>
|
||||||
v-model="formData.startTimeMorning"
|
<q-input
|
||||||
:rules="[
|
ref="amRef"
|
||||||
|
class="inputgreen"
|
||||||
|
:readonly="props.editCheck === 'edit' || isRead"
|
||||||
|
:outlined="props.editCheck === 'add'"
|
||||||
|
dense
|
||||||
|
borderless
|
||||||
|
:model-value="
|
||||||
|
formData.startTimeMorning
|
||||||
|
? `${formData.startTimeMorning} น.`
|
||||||
|
: '--:-- --'
|
||||||
|
"
|
||||||
|
:rules="[
|
||||||
(val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
(val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||||
(val:string) => {
|
(val:string) => {
|
||||||
if (val && formData.endTimeMorning) {
|
if (val && formData.endTimeMorning) {
|
||||||
|
|
@ -229,24 +261,59 @@ watch(
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
type="time"
|
style="width: 140px"
|
||||||
style="width: 140px"
|
><template v-slot:append>
|
||||||
/>
|
<q-icon
|
||||||
|
v-if="props.editCheck !== 'edit' && !isRead"
|
||||||
|
name="mdi-clock-outline"
|
||||||
|
size="15px"
|
||||||
|
color="dark"
|
||||||
|
></q-icon> </template
|
||||||
|
></q-input>
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
#action-row="{ internalModelValue, selectDate, closePicker }"
|
||||||
|
>
|
||||||
|
<div class="time_picker action-row q-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
label="ยกเลิก"
|
||||||
|
@click="closePicker"
|
||||||
|
color="grey"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn label="ตกลง" @click="selectDate" color="primary">
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
</div>
|
</div>
|
||||||
<q-separator inset />
|
<q-separator inset />
|
||||||
<div class="row items-start q-my-sm justify-between">
|
<div class="row items-start q-my-sm justify-between">
|
||||||
<p class="q-ma-none mt">เวลาออกงาน</p>
|
<p class="q-ma-none mt">เวลาออกงาน</p>
|
||||||
<q-input
|
<datepicker
|
||||||
ref="amOutRef"
|
menu-class-name="modalfix"
|
||||||
class="inputgreen"
|
v-model="formDate.endTimeMorning"
|
||||||
|
time-picker
|
||||||
:readonly="props.editCheck === 'edit' || isRead"
|
:readonly="props.editCheck === 'edit' || isRead"
|
||||||
:outlined="props.editCheck === 'add'"
|
:enableTimePicker="true"
|
||||||
dense
|
@update:model-value="(value:any)=>(formData.endTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||||
v-model="formData.endTimeMorning"
|
>
|
||||||
lazy-rules
|
<template #trigger>
|
||||||
borderless
|
<q-input
|
||||||
:rules="[
|
ref="amOutRef"
|
||||||
|
class="inputgreen"
|
||||||
|
:readonly="props.editCheck === 'edit' || isRead"
|
||||||
|
:outlined="props.editCheck === 'add'"
|
||||||
|
dense
|
||||||
|
:model-value="
|
||||||
|
formData.endTimeMorning
|
||||||
|
? `${formData.endTimeMorning} น.`
|
||||||
|
: '--:-- --'
|
||||||
|
"
|
||||||
|
borderless
|
||||||
|
:rules="[
|
||||||
(val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
|
(val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||||
(val:string) => {
|
(val:string) => {
|
||||||
if (val && formData.startTimeMorning) {
|
if (val && formData.startTimeMorning) {
|
||||||
|
|
@ -266,10 +333,33 @@ watch(
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
type="time"
|
style="width: 140px"
|
||||||
style="width: 140px"
|
><template v-slot:append>
|
||||||
/>
|
<q-icon
|
||||||
|
v-if="props.editCheck !== 'edit' && !isRead"
|
||||||
|
name="mdi-clock-outline"
|
||||||
|
size="15px"
|
||||||
|
color="dark"
|
||||||
|
></q-icon> </template
|
||||||
|
></q-input>
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
#action-row="{ internalModelValue, selectDate, closePicker }"
|
||||||
|
>
|
||||||
|
<div class="time_picker action-row q-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
label="ยกเลิก"
|
||||||
|
@click="closePicker"
|
||||||
|
color="grey"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn label="ตกลง" @click="selectDate" color="primary">
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -278,9 +368,18 @@ watch(
|
||||||
<p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
|
<p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
|
||||||
<div class="row justify-between q-my-sm items-start">
|
<div class="row justify-between q-my-sm items-start">
|
||||||
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
||||||
<q-input
|
<datepicker
|
||||||
ref="pmRef"
|
menu-class-name="modalfix"
|
||||||
:rules="[
|
v-model="formDate.startTimeAfternoon"
|
||||||
|
time-picker
|
||||||
|
:readonly="props.editCheck === 'edit' || isRead"
|
||||||
|
:enableTimePicker="true"
|
||||||
|
@update:model-value="(value:any)=>(formData.startTimeAfternoon = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||||
|
>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="pmRef"
|
||||||
|
:rules="[
|
||||||
(val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
(val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
|
||||||
(val:string) => {
|
(val:string) => {
|
||||||
if (val && formData.endTimeAfternoon) {
|
if (val && formData.endTimeAfternoon) {
|
||||||
|
|
@ -300,24 +399,60 @@ watch(
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
class="inputgreen"
|
class="inputgreen"
|
||||||
:readonly="props.editCheck === 'edit' || isRead"
|
:readonly="props.editCheck === 'edit' || isRead"
|
||||||
:outlined="props.editCheck === 'add'"
|
:outlined="props.editCheck === 'add'"
|
||||||
dense
|
dense
|
||||||
lazy-rules
|
borderless
|
||||||
borderless
|
:model-value="
|
||||||
v-model="formData.startTimeAfternoon"
|
formData.startTimeAfternoon
|
||||||
hide-bottom-space
|
? `${formData.startTimeAfternoon} น.`
|
||||||
type="time"
|
: '--:-- --'
|
||||||
style="width: 140px"
|
"
|
||||||
/>
|
hide-bottom-space
|
||||||
|
style="width: 140px"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="props.editCheck !== 'edit' && !isRead"
|
||||||
|
name="mdi-clock-outline"
|
||||||
|
size="15px"
|
||||||
|
color="dark"
|
||||||
|
></q-icon> </template
|
||||||
|
></q-input>
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
#action-row="{ internalModelValue, selectDate, closePicker }"
|
||||||
|
>
|
||||||
|
<div class="time_picker action-row q-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
label="ยกเลิก"
|
||||||
|
@click="closePicker"
|
||||||
|
color="grey"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn label="ตกลง" @click="selectDate" color="primary">
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
</div>
|
</div>
|
||||||
<q-separator inset />
|
<q-separator inset />
|
||||||
<div class="row items-start q-my-sm justify-between">
|
<div class="row items-start q-my-sm justify-between">
|
||||||
<p class="q-ma-none mt">เวลาออกงาน</p>
|
<p class="q-ma-none mt">เวลาออกงาน</p>
|
||||||
<q-input
|
<datepicker
|
||||||
ref="pmOutRef"
|
menu-class-name="modalfix"
|
||||||
:rules="[
|
v-model="formDate.endTimeAfternoon"
|
||||||
|
time-picker
|
||||||
|
:readonly="props.editCheck === 'edit' || isRead"
|
||||||
|
:enableTimePicker="true"
|
||||||
|
@update:model-value="(value:any)=>(formData.endTimeAfternoon = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||||
|
>
|
||||||
|
<template #trigger>
|
||||||
|
<q-input
|
||||||
|
ref="pmOutRef"
|
||||||
|
:rules="[
|
||||||
(val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
|
(val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
|
||||||
(val:string) => {
|
(val:string) => {
|
||||||
if (val && formData.startTimeAfternoon) {
|
if (val && formData.startTimeAfternoon) {
|
||||||
|
|
@ -337,17 +472,45 @@ watch(
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
class="inputgreen"
|
class="inputgreen"
|
||||||
:readonly="props.editCheck === 'edit' || isRead"
|
:readonly="props.editCheck === 'edit' || isRead"
|
||||||
:outlined="props.editCheck === 'add'"
|
:outlined="props.editCheck === 'add'"
|
||||||
dense
|
dense
|
||||||
v-model="formData.endTimeAfternoon"
|
:model-value="
|
||||||
lazy-rules
|
formData.endTimeAfternoon
|
||||||
borderless
|
? `${formData.endTimeAfternoon} น.`
|
||||||
hide-bottom-space
|
: '--:-- --'
|
||||||
type="time"
|
"
|
||||||
style="width: 140px"
|
borderless
|
||||||
/>
|
hide-bottom-space
|
||||||
|
style="width: 140px"
|
||||||
|
>
|
||||||
|
<template v-slot:append>
|
||||||
|
<q-icon
|
||||||
|
v-if="props.editCheck !== 'edit' && !isRead"
|
||||||
|
name="mdi-clock-outline"
|
||||||
|
size="15px"
|
||||||
|
color="dark"
|
||||||
|
></q-icon>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
#action-row="{ internalModelValue, selectDate, closePicker }"
|
||||||
|
>
|
||||||
|
<div class="time_picker action-row q-gutter-sm">
|
||||||
|
<q-btn
|
||||||
|
label="ยกเลิก"
|
||||||
|
@click="closePicker"
|
||||||
|
color="grey"
|
||||||
|
outline
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn label="ตกลง" @click="selectDate" color="primary">
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</datepicker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<q-input
|
<q-input
|
||||||
|
|
@ -426,6 +589,14 @@ watch(
|
||||||
border-radius: 6px !important;
|
border-radius: 6px !important;
|
||||||
border: 1px solid #e1e1e1;
|
border: 1px solid #e1e1e1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
$toggle-background-color-on: #06884d;
|
$toggle-background-color-on: #06884d;
|
||||||
$toggle-background-color-off: darkgray;
|
$toggle-background-color-off: darkgray;
|
||||||
$toggle-control-color: white;
|
$toggle-control-color: white;
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,8 @@ $activetab: #4a5568
|
||||||
.bg-activetab
|
.bg-activetab
|
||||||
background: $activetab !important
|
background: $activetab !important
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.inputgreen .q-field__prefix,
|
.inputgreen .q-field__prefix,
|
||||||
.inputgreen .q-field__suffix,
|
.inputgreen .q-field__suffix,
|
||||||
.inputgreen .q-field__input,
|
.inputgreen .q-field__input,
|
||||||
|
|
@ -55,6 +57,10 @@ $activetab: #4a5568
|
||||||
|
|
||||||
color: rgb(6, 136, 77)
|
color: rgb(6, 136, 77)
|
||||||
|
|
||||||
|
.dp__action_row
|
||||||
|
padding: 10px 0,
|
||||||
|
border-top: 1px solid #e1e1e1
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap')
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap')
|
||||||
|
|
||||||
$noto-thai: 'Noto Sans Thai', sans-serif
|
$noto-thai: 'Noto Sans Thai', sans-serif
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue