如何更新使用带有引导日期时间选择器的v模型绑定的现有数据?

时间:2019-05-17 03:40:32

标签: twitter-bootstrap vue.js datetimepicker

我当前正在使用 bootstrap datetimepicker 来处理前端的日期和时间选择,因此能够从我的 API 端点获取数据到引导日期时间选择器,但是当我尝试更新日期并成功完成过程后。数据(日期)仍然相同,但是,当我尝试在输入中手动更新数据时,保存后日期会更改。

到目前为止,这些是我尝试过但没有为我工作的事情。 herehere also,这是来自vuejs的github,但是问题是2年前的,几个月了,但是我仍然尝试了一下,但是没用here

这是来自我的js,它位于已安装

$('#datetimepickerinitialtimein').datetimepicker({
            format: "YYYY-MM-DD HH:mm"   
        });
        $('#datetimepickerinitialtimeout').datetimepicker({
            format: "YYYY-MM-DD HH:mm"
        });

这是我的js中的更新功能

updateDueDiligence: function () {
            this.loading = true;
            this.$http.put(`/api/v1/due-diligence/${this.currentDueDiligence.id}/`, this.currentDueDiligence)
                .then((response) => {
                    this.loading = false;
                    this.currentDueDiligence = response.data;
                    console.log(this.currentDueDiligence.date_completed_initial_dd_time_in);
                    swal({
                        title: "GPG system",
                        text: "Successfully updated the data!",
                        icon: "success",
                        button: false,
                        timer: 1500
                    });
                    $("#editModal").modal('hide')
                    this.getDueDiligences();
                })
                .catch((err) => {
                    this.loading = false;
                    swal({
                        title: "GPG System",
                        text: JSON.stringify(err.body),
                        icon: "error",
                        buttons: false,
                        timer: 3000,
                    });
                    console.log(err);
                })
        },

这是来自html

<form v-on:submit.prevent="updateDueDiligence">
<div class="form-group col-md-6 col-sm-12">
        <label>Date Completed for initial data - Time In </label>
        <div class='input-group date' id='datetimepickerinitialtimein'>
            <input type='text' class="form-control"
                v-model="currentDueDiligence.date_completed_initial_dd_time_in" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="form-group col-md-6 col-sm-12">
        <label>Date Completed for initial data - Time Out </label>
        <div class='input-group date' id='datetimepickerinitialtimeout'>
            <input type='text' class="form-control"
                v-model="currentDueDiligence.date_completed_initial_dd_time_out" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>3
<button type="submit" class="btn btn-primary">Save changes</button>
</form>

如何保存新数据,而无需在输入中手动键入新数据?

0 个答案:

没有答案