gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge pull request 'fix icon datepicker' (#60) from dev-manhph1-figbug into dev

Browse Source 
Reviewed-on: #60
This commit is contained in:
dev
2025-08-12 18:47:08 +09:00
parent 8d444eafcd 7d2bcb9496
commit 0825663c64
7 changed files with 86 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/common/Datepicker.vue
View File

@ -23,14 +23,14 @@
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
</template> -->
<template v-slot:append>
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
<img :src="arrowIcon">
</div>
<v-text-field
v-show="isRange"
@ -43,7 +43,9 @@
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -212,9 +214,9 @@ export default {
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {

97
components/common/DatepickerTopView.vue
View File

@ -5,10 +5,7 @@
<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
> -->
<v-icon
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>
<v-icon small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
$icoBulletPoint
</v-icon>
{{ label }}
@ -16,17 +13,11 @@
</v-col>
<v-col :cols="label ? textCols : ''">
<div class="datepicker-container">
<v-text-field
id="startpicker"
ref="startpicker"
v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template v-slot:append>
<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
@ -36,18 +27,13 @@
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
</div>
<v-text-field
v-show="isRange"
id="endpicker"
ref="endpicker"
v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -91,9 +77,9 @@ export default {
require: false,
default: false,
},
isRangeOption:{
type:Boolean,
require:false,
isRangeOption: {
type: Boolean,
require: false,
default: true
}
},
@ -177,21 +163,23 @@ export default {
this.myOptions.viewFormat,
);
},
toDtChange(){
toDtChange() {
return {
isCheck:this.searchParam.isCheck ,
toDt : Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
)};
isCheck: this.searchParam.isCheck,
toDt: Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
)
};
},
fromDtChange(){
fromDtChange() {
return {
isCheck:this.searchParam.isCheck ,
fromDt : Utility.setFormatDate(
isCheck: this.searchParam.isCheck,
fromDt: Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
)};
)
};
},
defaultRange() {
return this.searchParam.defaultRange
@ -205,10 +193,10 @@ export default {
);
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
if (this.isDarkMode) {
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {
@ -242,24 +230,24 @@ export default {
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
fromDtChange:{
deep:true,
handler(){
if(this.fromDtChange.isCheck){
fromDtChange: {
deep: true,
handler() {
if (this.fromDtChange.isCheck) {
this.fromDtChanged(this.fromDtChange.fromDt);
this.setPageData({
isCheck : false
isCheck: false
})
}
}
},
toDtChange:{
deep:true,
handler(){
if(this.toDtChange.isCheck){
toDtChange: {
deep: true,
handler() {
if (this.toDtChange.isCheck) {
this.toDtChanged(this.toDtChange.toDt);
this.setPageData({
isCheck : false
isCheck: false
})
}
}
@ -370,7 +358,7 @@ export default {
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
@ -400,7 +388,7 @@ export default {
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
@ -424,6 +412,7 @@ export default {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}

53
components/common/PastRsltDatePicker.vue
View File

@ -2,25 +2,19 @@
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon small color="primary"
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon>
<v-icon small color="primary"
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<div :class="['datepicker-container', customClass]" >
<v-text-field
id="startpicker"
ref="startpicker"
v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
<div :class="['datepicker-container', customClass]">
<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
<!-- <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> -->
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
@ -29,18 +23,13 @@
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
</div>
<v-text-field
v-show="isRange"
id="endpicker"
ref="endpicker"
v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -98,6 +87,7 @@ export default {
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: "isDarkMode",
}),
myCmCycle() {
return this.searchParam.cmCycle;
@ -138,10 +128,10 @@ export default {
);
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
if (this.isDarkMode) {
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {
@ -280,7 +270,7 @@ export default {
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
@ -310,7 +300,7 @@ export default {
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
@ -334,6 +324,7 @@ export default {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}