How to display response value in flatpickr jQuery-CodePudding

I got return from response, but to display in Input tag using flatpickr jQuery?

console.log response value: 2022-04-12T04:00:00Z

Field is blank, should be display value from response.

<div >
    <label >Datetime</label>
    <div >
        <div >
            <input  type="text" id="editActDate">
        </div>
    </div>
</div>

$("#editActDate").flatpickr({ // https://flatpickr.js.org/options/
    enableTime: true,
    altInput: true,
    allowInput: true,
});

$.ajax({
    url: 'api_url',
    type : 'POST',
    data: { param: params },
    cache: false,
    async: false,
    success: function(response){
        console.log(response); // received return value and success
        if (response.status == "success"){
            $('#editActDate').prop(response.data[0].act_date); // Have tried but not appear
            $('#editActDate').text(response.data[0].act_date); // Have tried but not appear
            $('#editActDate').val(response.data[0].act_date); // Have tried but not appear
        }
    },
    error: function(e){
        errorToast(e);
    }
});

CodePudding user response：

You should use flatpicker's api, specifically the setDate() method:

Define a flatpickr instance and assign to a variable:

const myFlatpickrInstance = $("#editActDate").flatpickr({
    enableTime: true,
    altInput: true,
    allowInput: true,
});

Apply setDate() to it:

 myFlatpickrInstance.setDate(response.data[0], true);

CodePudding user response：

I just add this and solve my problem.

$("#editActDate").flatpickr({ // https://flatpickr.js.org/options/
    enableTime: true,
    altInput: true,
    allowInput: true,
    defaultDate: response.data[0].act_date, // I add this
});