<div id="app_{{ widget.name }}" class="field-item">
    {% if widget.value %}
    <input type="hidden" name="{{ widget.name }}" value="{{ widget.value }}">
    {% else %}
    <input type="hidden" name="{{ widget.name }}" value="">
    {% endif %}
    <el-date-picker
      v-model="value"
      type="datetime"
      placeholder="选择日期时间"
      @change="updatedatetimeValue" :disabled="disabled">
    </el-date-picker>
</div>
<script>
    var value = '{{ widget.value }}'
    var filed_value = ''
    if (value == '' || value == 'None') {
        filed_value = ''
    }else{
        filed_value = value
    }
    if ('{{ widget.el_disabled }}' == 'True') {
        disabled = true
    }else{
        disabled = false
    }
    console.log(filed_value)
    console.log(new Date(filed_value))
    new Vue({
        el: '#app_{{ widget.name }}',
        data: {
            type: '{{ widget.type }}',
            name: '{{ widget.name }}',
            value: filed_value,
            field_name: '{{ widget.field_name }}',
            disabled: disabled
        },
        methods: {
            updatedatetimeValue() {
                // yyyy/MM/dd HH:mm:ss
                var date = new Date(this.value);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                this.$el.querySelector('input[name="{{ widget.name }}"]').value = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second ;

            }
        }
    })
</script>