แก้รูปแบบเวลาเป็น 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,
|
||||
};
|
||||
|
||||
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 ข้อมูล */
|
||||
const formData = reactive<FormData>({
|
||||
startTimeMorning: "",
|
||||
|
|
@ -200,16 +219,29 @@ watch(
|
|||
<p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
|
||||
<div class="row justify-between q-my-sm items-start">
|
||||
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
||||
<q-input
|
||||
ref="amRef"
|
||||
class="inputgreen"
|
||||
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDate.startTimeMorning"
|
||||
time-picker
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.startTimeMorning"
|
||||
:rules="[
|
||||
:enableTimePicker="true"
|
||||
@update:model-value="(value:any)=>(formData.startTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||
>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
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) => {
|
||||
if (val && formData.endTimeMorning) {
|
||||
|
|
@ -229,24 +261,59 @@ watch(
|
|||
return true;
|
||||
},
|
||||
]"
|
||||
hide-bottom-space
|
||||
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>
|
||||
<q-separator inset />
|
||||
<div class="row items-start q-my-sm justify-between">
|
||||
<p class="q-ma-none mt">เวลาออกงาน</p>
|
||||
<q-input
|
||||
ref="amOutRef"
|
||||
class="inputgreen"
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDate.endTimeMorning"
|
||||
time-picker
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
v-model="formData.endTimeMorning"
|
||||
lazy-rules
|
||||
borderless
|
||||
:rules="[
|
||||
:enableTimePicker="true"
|
||||
@update:model-value="(value:any)=>(formData.endTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
|
||||
>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
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) => {
|
||||
if (val && formData.startTimeMorning) {
|
||||
|
|
@ -266,10 +333,33 @@ watch(
|
|||
return true;
|
||||
},
|
||||
]"
|
||||
hide-bottom-space
|
||||
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>
|
||||
<div
|
||||
|
|
@ -278,9 +368,18 @@ watch(
|
|||
<p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
|
||||
<div class="row justify-between q-my-sm items-start">
|
||||
<p class="q-ma-none mt">เวลาเข้างาน</p>
|
||||
<q-input
|
||||
ref="pmRef"
|
||||
:rules="[
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
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) => {
|
||||
if (val && formData.endTimeAfternoon) {
|
||||
|
|
@ -300,24 +399,60 @@ watch(
|
|||
return true;
|
||||
},
|
||||
]"
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
v-model="formData.startTimeAfternoon"
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
borderless
|
||||
:model-value="
|
||||
formData.startTimeAfternoon
|
||||
? `${formData.startTimeAfternoon} น.`
|
||||
: '--:-- --'
|
||||
"
|
||||
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>
|
||||
<q-separator inset />
|
||||
<div class="row items-start q-my-sm justify-between">
|
||||
<p class="q-ma-none mt">เวลาออกงาน</p>
|
||||
<q-input
|
||||
ref="pmOutRef"
|
||||
:rules="[
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
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) => {
|
||||
if (val && formData.startTimeAfternoon) {
|
||||
|
|
@ -337,17 +472,45 @@ watch(
|
|||
return true;
|
||||
},
|
||||
]"
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
v-model="formData.endTimeAfternoon"
|
||||
lazy-rules
|
||||
borderless
|
||||
hide-bottom-space
|
||||
type="time"
|
||||
style="width: 140px"
|
||||
/>
|
||||
class="inputgreen"
|
||||
:readonly="props.editCheck === 'edit' || isRead"
|
||||
:outlined="props.editCheck === 'add'"
|
||||
dense
|
||||
:model-value="
|
||||
formData.endTimeAfternoon
|
||||
? `${formData.endTimeAfternoon} น.`
|
||||
: '--:-- --'
|
||||
"
|
||||
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>
|
||||
<q-input
|
||||
|
|
@ -426,6 +589,14 @@ watch(
|
|||
border-radius: 6px !important;
|
||||
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-off: darkgray;
|
||||
$toggle-control-color: white;
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@ $activetab: #4a5568
|
|||
.bg-activetab
|
||||
background: $activetab !important
|
||||
|
||||
|
||||
|
||||
.inputgreen .q-field__prefix,
|
||||
.inputgreen .q-field__suffix,
|
||||
.inputgreen .q-field__input,
|
||||
|
|
@ -55,6 +57,10 @@ $activetab: #4a5568
|
|||
|
||||
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')
|
||||
|
||||
$noto-thai: 'Noto Sans Thai', sans-serif
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue