After ajax call, date picker work but the formatting not

Below is the Ajax call in index.php

$(document).ready(function() {
    $(document).on("click", ".result p", function(e) {
        $(this).parent(".result").empty();
        var $txt = $(this).text();
        document.getElementById("pd").style.display = "block";
        document.getElementById("listpd").style.display = "none";
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "piutang.php",
            data: {"nama": $txt},
            success: function(msg) {
                $("#pd").html(msg)
                $("#formNama").val('');
            },
            error: function() {
                alert("failure");
            }
        });
    });
});

The piutang.php (inside the Ajax call) has the text box for the date-picker and also the script for the date picker.

<input type="text" id="datepicker" name="tgl" style="width: 85px;" readonly />
<script>
        $(function() {
        $("#datepicker").datepicker();
        });

        $('#datepicker').datepicker({
        dateFormat: "dd M yy"
        }).datepicker("setDate", new Date());
</script>

After the call, inside the div with id:#pd,
I can see the text box of the date picker with the current date.
But it show the default format mm/dd/yyyy not dd M yy.

What I’ve tried so far is cut the script code in piutang.php,
then paste/insert the code inside Ajax success, right after $("#pd").html(msg),
but the result is the same thing, inside the div with id:#pd,
the text box show the current date with its default format mm/dd/yyyy.

How do I solve this ?
Thank you.

Answer

You need to initialize date picker one time with all settings:

 $('#datepicker').datepicker({
    dateFormat: "dd M yy"
 }).datepicker("setDate", new Date());

This one is enough. Remove other one.