'Sweetalert2 Mandatory date field

Hello I have a sweetalert2 popup which when clicked calls an api method. What I am trying to accomplish is to have a datepicker input field which is mandatory if they click Yes button. I need to pass the date they pick to my api method also. Here is my code

const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Do you want to activate user <font color="red">' + user[1] + ' ' + user[2] + '</font>',
                text: "Email: " + user[3],
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        url: "../api/myController/controllerMethod",
                        type: "get", //send it through get method
                        data: {
                            Id: user[0],
                            ModifiedBy: user[1]'
                        },
                        success: function (response) {
                            swalWithBootstrapButtons.fire(
                                'Activated!',
                                'The user is activated.',
                                'success'
                            )

                            var table = $('#dtMembers').DataTable();
                            table.ajax.reload();
                        },
                        error: function (xhr) {
                            //Do Something to handle error
                        }
                    });
                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    //swalWithBootstrapButtons.fire(
                    //    'Cancelled',
                    //    'Your imaginary file is safe :)',
                    //    'error'
                    //)
                }
            })

Here is how it currently looks like enter image description here

I am trying to get it to look something like this enter image description here

Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source