效果:前後有控制,時分聯動控制
僞代碼(利用了element組件):
<template>
<el-container>
<el-header style="height:62px;">{{overtimetitle}}</el-header>
<el-container>
<el-main class="addup_main box_margin nopamain">
<el-scrollbar style="height:100%"
class="detail_scroll">
<span class="basic_info">基本信息</span>
<table class="ask_for_leave font_table">
<tr class="once_space">
<td class="table_bgtitle">加班時間</td>
<td colspan="3"
class="ask_bgcolor datetd">
<div class="dt_picker_container">
<!-- 日期1控件自定義 start-->
<div class="dt_picker">
<el-date-picker v-model="filters.column.create_start_date"
type="date"
prefix-icon="none"
clear-icon="none"
placeholder="選擇日期"
@change="getBeginDate"
:picker-options="pickerBeginDateBefore"></el-date-picker>
<div class="time_picker">
<el-select v-model="hour1_val"
class="min_style"
@change="getTimeHour(1)">
<el-option v-for="item in hours"
:key="item"
:label="item"
:value="item"></el-option>
</el-select>
<span class="time_space">:</span>
<el-select v-model="min1_val"
class="min_style"
@change="getTimemin(1)">
<el-option v-for="item in mins"
:key="item"
:label="item"
:value="item"></el-option>
</el-select>
</div>
</div>
<!-- 日期1控件自定義 end-->
<span>至</span>
<div class="dt_picker">
<el-date-picker v-model="filters.column.create_end_date"
type="date"
prefix-icon="none"
clear-icon="none"
placeholder="選擇日期"
@change="getEndDate"
:picker-options="pickerBeginDateAfter"></el-date-picker>
<div class="time_picker">
<el-select v-model="hour2_val"
class="min_style"
@change="getTimeHour(2)">
<el-option v-for="item in hours"
:key="item"
:label="item"
:value="item"
:disabled="item < hour1_val"></el-option>
</el-select>
<span class="time_space">:</span>
<el-select v-model="min2_val"
class="min_style"
@change="getTimemin(2)">
<el-option v-for="item in mins"
:key="item"
:label="item"
:value="item"
:disabled="hour1_val === hour2_val && item < min1_val"></el-option>
</el-select>
</div>
</div>
</div>
</td>
<td class="table_bgtitle">加班時長</td>
<td class="ask_duration">{{overtime}} 小時</td>
</tr>
</table>
</el-container>
</el-container>
</template>
<script>
import { apiGet, api } from '@/api/index'
export default {
name: 'OverTimeAddUp',
data () {
return {
filters: {
column: {
create_start_date: new Date(),
create_end_date: new Date()
}
},
pickerBeginDateBefore: {
disabledDate: time => {
return time.getTime() < Date.now() - 8.64e7
}
},
pickerBeginDateAfter: {
disabledDate: time => {
if (this.filters.column.create_start_date === '') {
this.flag = true
return time.getTime() < Date.now() - 8.64e7
} else {
// 已經選定開始日期限定結束日期
let dd = new Date(this.filters.column.create_start_date)
dd.setDate(dd.getDate() - 1)
let y = dd.getFullYear()
let m =
dd.getMonth() + 1 < 10
? '0' + (dd.getMonth() + 1)
: dd.getMonth() + 1
let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
let beginDateVal = new Date(y + '-' + m + '-' + d)
if (beginDateVal) {
return (
time.getTime() < beginDateVal - 1 ||
time.getTime() < Date.now() - 8.64e7
)
}
}
}
},
// 小時選擇
hours: [
'00',
'01',
'02',
'03',
'04',
'05',
'06',
'07',
'08',
'09',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23'
],
hour1_val: '00',
hour2_val: '00',
// 分鐘選擇
mins: [],
min1_val: '00',
min2_val: '00'
}
},
mounted () {
for (let i = 0; i < 60; i = parseInt(i) + 5) {
if (i < 10) {
i = '0' + i
}
this.mins.push(i)
}
this.filters.column.create_start_date = this.init()
this.filters.column.create_end_date = this.init()
},
// 上傳組件相關
methods: {
// 初始化時間
init () {
let date = new Date()
date.setHours(0)
date.setMinutes(0)
date.setSeconds(0)
return date
},
// 日期相關
getBeginDate (date) {
let tmpdhour = this.hour1_val
let tmpdmin = this.min1_val
this.filters.column.create_start_date.setHours(this.hour1_val)
this.filters.column.create_start_date.setMinutes(this.min1_val)
this.filters.column.create_start_date.setSeconds(0)
let initedate = new Date(this.filters.column.create_start_date)
if (
this.daysBetween(
this.filters.column.create_start_date,
this.filters.column.create_end_date
) < 0
) {
this.filters.column.create_end_date = new Date(initedate)
this.hour2_val = tmpdhour
this.min2_val = tmpdmin
}
this.overtime = this.daysBetween(
this.filters.column.create_start_date,
this.filters.column.create_end_date
)
},
getEndDate (date) {
this.filters.column.create_end_date.setHours(this.hour2_val)
this.filters.column.create_end_date.setMinutes(this.min2_val)
this.filters.column.create_end_date.setSeconds(0)
this.overtime = this.daysBetween(
this.filters.column.create_start_date,
this.filters.column.create_end_date
)
},
getTimeHour (flag) {
if (flag === 1) {
let bdate = new Date(this.filters.column.create_start_date)
bdate.setHours(this.hour1_val)
if (this.hour1_val >= this.hour2_val) {
let tmphour = this.hour1_val
this.hour2_val = tmphour
let tmpmin = this.min1_val
this.min2_val = tmpmin
this.filters.column.create_end_date.setHours(tmphour)
this.filters.column.create_end_date.setMinutes(this.min1_val)
}
this.filters.column.create_start_date = bdate
} else if (flag === 2) {
let edate = new Date(this.filters.column.create_end_date)
edate.setHours(this.hour2_val)
this.filters.column.create_end_date = edate
}
this.overtime = this.daysBetween(
this.filters.column.create_start_date,
this.filters.column.create_end_date
)
},
getTimemin (flag) {
if (flag === 1) {
let bdate = new Date(this.filters.column.create_start_date)
bdate.setMinutes(this.min1_val)
if (
this.hour1_val === this.hour2_val &&
this.min1_val > this.min2_val
) {
this.min2_val = this.min1_val
this.filters.column.create_end_date.setMinutes(this.min2_val)
}
this.filters.column.create_start_date = bdate
this.postData.startDate = bdate
} else if (flag === 2) {
let edate = new Date(this.filters.column.create_end_date)
edate.setMinutes(this.min2_val)
this.filters.column.create_end_date = edate
this.postData.endDate = edate
}
this.overtime = this.daysBetween(
this.filters.column.create_start_date,
this.filters.column.create_end_date
)
},
// 計算日期差值
daysBetween (sDate1, sDate2) {
// Date.parse() 解析一個日期時間字符串,並返回1970/1/1 午夜距離該日期時間的毫秒數
var time1 = Date.parse(new Date(sDate1))
var time2 = Date.parse(new Date(sDate2))
var nDays = (time2 - time1) / 1000 / 60 / 60
return nDays.toFixed(1)
}
}
</script>
<style>
.basic_info {
float: left;
color: #323232;
font-size: 14px;
font-weight: bold;
height: 50px;
line-height: 50px;
}
.tr_DifferDay {
float: left;
font-size: 14px;
white-space: normal;
letter-spacing: 1px;
color: #ca4341;
padding-left: 14px;
height: 50px;
line-height: 50px;
}
.el-container {
background-color: #f0f6fa;
/*height: 900px;*/
}
html,
body,
#app,
.el-container {
height: 100%;
}
.el-header,
.el-footer {
line-height: 62px;
width: 100%;
background-color: #2a8cd7;
color: #fff;
text-align: center;
vertical-align: middle;
font-size: 24px;
word-spacing: 5px;
letter-spacing: 5px;
font-weight: 500;
box-sizing: border-box;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.apply_desc .el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 20px;
margin: 10px 10px;
}
.addup_main .el-main {
background-color: #ffffff;
margin: 10px 10px;
border-radius: 5px;
color: #333;
/* text-align: center; */
padding-top: 5px;
}
.addup_main {
padding-top: 0;
}
.ask_for_leave .el-col {
border: solid 1px #e7e7e7;
height: 40px;
line-height: 40px;
}
.ask_for_leave tr td {
border: 1px solid #dfdfdf;
height: 40px;
line-height: 40px;
}
.ask_for_leave {
border-collapse: collapse;
width: 100%;
}
.font_table tr td {
font-size: 14px;
}
.ask_details {
box-sizing: border-box;
font-size: 14px;
border: none;
width: 100%;
resize: none;
font-size: 14px;
height: 100%;
color: #323232;
padding: 5px;
padding-left: 10px;
line-height: 22px;
}
.input_block {
margin-left: 0px;
padding-left: 14px;
text-align: left;
height: 30px;
line-height: 30px;
}
.car_container {
text-align: left;
padding-left: 12px;
}
.text_block {
margin: 0;
padding: 0;
width: 100%;
text-align: left;
height: 120px;
line-height: 40px;
}
.table_bgtitle {
width: 10%;
/*min-width: 60px;*/
text-align: center;
vertical-align: middle;
background-color: #e6e6e6;
font-weight: 600;
font-size: 14px;
}
.ask_once {
width: 10%;
}
.ask_once1{
width: 20%;
}
.sptd{
width: 40%;
}
.ask_bgcolor {
background-color: #f5f5f5;
text-align: left;
padding-left: 10px;
color: #999;
}
.ask_duration {
text-align: left;
padding-left: 10px;
}
/*覆蓋日期控件樣式*/
.dt_picker_container .el-input--prefix .el-input__inner {
border: none;
width: 70%;
height: 30px;
}
.dt_picker_container .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 90px;
}
.dt_picker_container .el-input--prefix .el-input__inner {
width: 100%;
}
/*el-select樣式覆蓋*/
.dt_picker_container .el-select .el-input .el-select__caret {
display: none;
}
.dt_picker_container .el-select {
width: 40px;
}
.dt_picker_container .el-input--suffix .el-input__inner {
padding: 0;
text-align: center;
border: none;
vertical-align: middle;
line-height: 30px;
}
/*日期控件樣式自定義*/
.dt_picker_container,
.dt_picker,
.time_picker {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.dt_picker_container {
justify-content: space-around;
background: #f5f5f5;
}
.min_style .el-input--suffix .el-input__inner {
height: 26px;
background: #e6e6e6;
line-height: 26px;
vertical-align: middle;
}
.el-select-dropdown__item {
padding: 0 11px;
}
.time_space {
display: inline-block;
margin: auto 5px;
}
.dt_picker {
background: #fff;
width: 47%;
justify-content: flex-start;
height: 30px;
}
.datetd {
padding-left: 0;
}
/*滾動條*/
.detail_scroll .el-scrollbar__wrap {
overflow-x: hidden;
}
*::-webkit-scrollbar {
width: 6px;
}
*::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(144, 147, 153, 0.5);
background: rgba(144, 147, 153, 0.5);
}
*::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px #ffffff;
border-radius: 0;
background: #ffffff;
}
.nopamain {
padding: 0;
}
.nopamain .el-scrollbar__view {
margin: 20px;
margin-top: 0;
}
.box_margin {
background: #fff;
margin: 10px;
border-radius: 5px;
}
.sp_padding {
padding-left: 10px;
}
/*日曆等字體*/
.el-date-table {
font-size: 14px;
}
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #909090;
font-size: 14px;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #909090;
font-size: 14px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #909090;
font-size: 14px;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #909090;
font-size: 14px;
}
</style>