0

I'm currently using bootstrap datetimepicker for handling the selection of date and time for my front-end, I was able to fetch the data from my API endpoint to the bootstrap datetimepicker but when I tried to update the date and after a successful process. The data(date) is still the same, BUT when I tried manually updating it in the input the date changes after saving it.

So far, these are the things that I've tried but didn't worked for me. here and here also and this one it's from the github of vuejs, but the issue was 2yrs ago with a couple of months in it, but still I tried it but didn't worked here

This is from my js which is in the mounted.

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

This is my update function in my 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);
                })
        },

This is from 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>

How can I save the new data without manually typing it in the input?

xed
  • 79
  • 9
  • Are you saying that existing value in currentDueDiligence.date_completed_initial_dd_time_in does not show up in UI but when you type something in UI, that value gets bound to the variable ? – Krantisinh May 17 '19 at 04:11
  • It shows up in the UI, the problem is that when I try to update it with a new date & time value. It doesn't change, the old value is retained after a successful update. But, If I manually edit it in **input type**, after saving it the new value was saved. – xed May 17 '19 at 04:30
  • 1
    This seems to be related to how you store and update your data, but you haven't shown any of that. Please update with the relevant bits so your example can be verified/mocked. Note you could create a [mcve] where, instead of calling your save endpoint you could call a http mock that returns a similar result to what your actual backend returns. The chances of getting a useful answer are drastically increased if you provide a *runnable* example. – tao May 17 '19 at 07:40
  • I've updated my question with **complete** details and which are only necessary for my use case. – xed May 17 '19 at 08:38

0 Answers0