pc-component-v5/packages/datetime-v2/src/DateTimeV2.vue

<template>
    <div class="datetime-container input-group" :class="{'has-error' : isValid === false}">
        <input type="datetime-local"
               id="datetime"
               v-bind:readonly="readonly"
               :value="dateTime"
               class="datetime-item-1 form-control"
               @change="datetimeLocalValueChanged($event)" />

        <input type="text"
               v-bind:readonly="readonly"
               :value="dateValue"
               class="datetime-item-2 form-control"
               @change="textValueChanged($event)" />

        <span v-if="isValid === false" class="glyphicon glyphicon-remove datetime-item-3 form-control-feedback" aria-hidden="true"/>

    </div>
</template>

<script>

module.exports = {

    name: "date-time-v2",

    props: [
        "dateValue", "readonly"
    ],

    data: function () {
        return {
            "isValid": true,
        }
    },

    components: {

    },

    methods: {
        /**
         * 是否是有效的日期时间格式，YYYY-MM-DD HH:mm:ss
         */
        isValidDateTime: function (text) {
            if (text == null || text.length == 0) {
                return false;
            }
            return moment(text, 'YYYY-MM-DD HH:mm:ss', true).isValid();
        },

        textValueChanged: function (event) {
            let newValue = event.target.value;

            // 日期时间校验
            if (this.isValidDateTime(newValue)) {
                this.isValid = true;
                console.log('DateTimeV2 input value changed: orginal value: %s, current value: %s', this.dateValue, newValue);
                this.$emit("on-value-change", newValue);
            } else {
                this.isValid = false;
            }
        },


        /**
         * 值改变事件
         */
        datetimeLocalValueChanged: function (event) {
            let newValue = event.target.value;
            let parsedDateTime = '';
            if (newValue != null && newValue.length > 0) {
                parsedDateTime = moment(newValue).format('YYYY-MM-DD HH:mm:ss');
            }

            // 日期时间校验
            if (this.isValidDateTime(parsedDateTime)) {
                this.isValid = true;
                console.log('DateTimeV2 value changed: orginal value: %s, current value: %s', newValue, parsedDateTime);
                this.$emit("on-value-change", parsedDateTime);
            } else {
                this.isValid = false;
            }
        },
    },

    mounted: function () {
        
    },


    computed: {

        /**
         * 把(YYYY-MM-DD HH:mm:ss)格式的日期字符串转换成datetime-local(YYYY-MM-DDTHH:mm:ss)
         */
        dateTime: function () {
            if (this.dateValue == null || this.dateValue.length == 0) {
                return null;
            } else {
                return moment(this.dateValue, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DDTHH:mm:ss');
            }
        },

    }
}
</script>

<style>
.form-inline .datetime-container {
    display : inline-flex !important;
    vertical-align: middle;
}
</style>


<style scoped>
.datetime-container {
    position: relative;
    height: 34px;
    width: auto;
    vertical-align: middle;
    min-width: 200px;
    /* display : inline-flex; */
    display : block;
    
}

.datetime-item-1 {
    position: absolute;
    display: inline;
    width: 100%;
    cursor: pointer;
    border-radius: 4px !important;
}

.datetime-item-2 {
    position: absolute;
    border-radius: 4px 0px 0px 4px !important;
    display: inline;
    width: calc(100% - 45px) !important;
}

.datetime-item-3 {
    right: 45px;
}
</style>