效果图:
<template>
<el-form :inline="true" :rules="dataRules" label-width="140px" ref="dataForm" :model="dataForm"
label-position="right">
<el-row>
<el-form-item prop="dataDate" class="search-card" label="数据日期">
<el-date-picker
v-model="dataForm.dataDate"
type="date"
value-format="yyyy-MM-dd"
class="dateInput"
@change="dataDateChange"
clearable
></el-date-picker>
</el-form-item>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item prop="week" label="星期">
<el-select class="formFrame" v-model="dataForm.week" disabled>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data(){
return{
weeks: {
"0":'星期日',
"1":'星期一',
"2":'星期二',
"3":'星期三',
"4":'星期四',
"5":'星期五',
"6":'星期六',
},
dataForm:{
dataDate: '',
week: ''
}
}
},
methods: {
dataDateChange(dateStr) {
let date = new Date(dateStr);
let weekIndex = date.getDay();
this.dataForm.week = this.weeks[weekIndex];
}
}
}
</script>
<style scoped>
</style>
参考文献:
Vue 中根据当前的日期显示当前是星期几_candybaby1223的博客-CSDN博客
<el-form-item label="时间" prop="pjsj">
<el-date-picker clearable style="width: 100%" v-model="formyd.pjsj" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间"></el-date-picker>
</el-form-item>
Java 根据日期计算星期几_itmyhome的专栏-CSDN博客_java根据日期计算星期几
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
public class DateTools {
/**
* 日期转星期
*
* @param datetime
* @return
*/
public static String dateToWeek(String datetime) {
SimpleDateFormat f = new SimpleDateFormat("yyyy-MM-dd");
String[] weekDays = { "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
Calendar cal = Calendar.getInstance(); // 获得一个日历
Date datet = null;
try {
datet = f.parse(datetime);
cal.setTime(datet);
} catch (ParseException e) {
e.printStackTrace();
}
int w = cal.get(Calendar.DAY_OF_WEEK) - 1; // 指示一个星期中的某天。
if (w < 0)
w = 0;
return weekDays[w];
}
public static void main(String[] args) {
System.out.println(DateTools.dateToWeek("2017-01-01"));
}
}
另一种写法:
@Test void testgetweek(){//6.14(星期一) // weeks: { // "0":'星期日', // "1":'星期一', // "2":'星期二', // "3":'星期三', // "4":'星期四', // "5":'星期五', // "6":'星期六', // }, Date date = new Date(); int day = date.getDay(); System.out.println(day); }
element-ui表格列el-table-column如何根据数据不同显示不同的值_u010007013的博客-CSDN博客_el-table-column
<el-table ref="accountTable" :data="accountsListData" border> <el-table-column label="状态" prop="state" :formatter="stateFormat"></el-table-column> </el-table>
methods:{ stateFormat(row, column) { if (row.state === true) { return '正确' } else { return '错误' } }, }