bab-icon/resources/assets/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) {
                console.log('----------------'+value)
                let date = new Date(value)
                let y = 1900 + date.getYear();
                let d_m = "0" + (date.getMonth() * 1 + 1);
                let d = "0" + date.getDate();
                let h = "0" + date.getHours();
                let m = "0" + date.getMinutes();
                let s = "0" + date.getSeconds();
                const time =  y + "-" + d_m.substring(d_m.length - 2, d_m.length) + "-" + d.substring(d.length - 2, d.length)+' '+h.substring(h.length - 2, h.length)+':'+m.substring(m.length - 2, m.length)+':'+s.substring(s.length - 2, s.length);
                console.log('----------------'+time)
                this.valueD = time;
                this.$emit('set-keys',time);
            }

        }
    }
</script>

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