{% load i18n %}
{% load admin_urls static admin_list simpletags %}

<div class="lucky-datepicker-{{ widget.name }}">
    {% include "luckyui/forms/widgets/none_input.html" %}

    <el-date-picker
            size="small"
            v-model="date_value"
            value-format="yyyy/MM/dd"
            format="yyyy/MM/dd"
            type="date"
            placeholder="选择日期时间"
            @change="change_date_time">
    </el-date-picker>
</div>

<script type="text/javascript">
    new Vue({
        el: '.lucky-datepicker-{{ widget.name }}',
        data: {
            date_value: '',
            field_id: ''
        },
        mounted() {
            this.field_id = 'id_' + "{{ widget.name }}"
            this.setup_field_value()
        },
        methods: {
            setup_field_value() {
                this.date_value = document.getElementById(this.field_id).value
                console.log('date_value:', this.date_value)
            },
            change_date_time(e) {
                if (this.date_value.length > 0) {
                    document.getElementById(this.field_id).value = this.date_value
                }
            }
        }
    })
</script>