bab-icon/resources/js/components/UiDateTime.vue

<template>
    <el-row class="form-group">
        <el-col style="min-height:50px;padding-top:10px;" :span="3">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'Date-Time'}}</label>
        </el-col>
        <el-col :span="14" style="min-height:50px;padding-top:5px;">
            <el-date-picker class="date-time-J"
                  v-model="valueD"
                  type="datetime"
                  :readonly="readonly ? true : false"
                  :disable="disable ? true : false"
                  :editable="editable ? true : false"
                  :size="size ? size : 'large'"
                  :placeholder="placeholder ? placeholder : '选择日期时间'"
                  align="left"
                  :format="format ? format : 'yyyy-MM-dd HH:mm'"
                  :picker-options="pickerOptions1"
                  @change="dateTimeChange">
            </el-date-picker>
            <input type="hidden" class="ui-date-time" :name="name ? name : 'date_time'" :value="valueD" style="width:0;height:0.5px;border: 0 solid rgba(255,255,255,0)" />
        </el-col>
        <el-col :span="7">
            <div class="classJs">
                <div v-if="tips">
                    <span class="red">*</span>&ensp;{{tips}}
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['label','name','value','readonly','disable','editable','size','format','placeholder','tips'],
        data() {
            return {
                valueD: this._props.value ? this._props.value : '',
                pickerOptions1: {
                    shortcuts: [
                    {
                        text: '一周后',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '明天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                }
            };
        },
        mounted() {

        },
        methods: {
            dateTimeChange (value) {
                this.valueD = value;
            }
        }
    }
</script>

<style scoped>
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>