html2canvas 未捕获日期选择器

Question

I'm using Html2canvas to take a screenshot of my page, on the page, I'm using date-picker. but when I capture the screenshot the date is not be shown in the screenshot. any idea why is that and how I solve it?

this is my code

<div id='ownerDetails'>
  <input type="date" class="the-inp date-input">
</div>

<button id="sig-submitBtn">save</button >
<button id='nextbt'>capture</button>

<img id='itemImg' src=''>

//////////////


    $(".date-input").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date());

/////////

var element = $("#ownerDetails"); // global variable
            var getCanvas; //global variable


    $('#sig-submitBtn').on('click', function () {


            html2canvas(element, {
                onrendered: function (canvas) {
                    getCanvas = canvas;
                }
            });

    });


            $("#nextbt").on('click', function () {
                var imgageData = getCanvas.toDataURL("image/png");
                //Now browser starts downloading it instead of just showing it
                document.getElementById("itemImg").src = imgageData;
            });

Answer 1

Added solution different way here is fiddle:

https://jsfiddle.net/vpysd9zk/

additional code:

.selectedDate{
 background: #fff;
    border: 1px solid #000;
    padding: 3px;
    padding-left: 18px;
    padding-right: 17px;
    font-size: 14px;
  }

<div id='ownerDetails'>
  <input type="date" class="the-inp date-input">
  <lable class="selectedDate" style="display:none;"></lable>

</div>

/////////

var element = $("#ownerDetails"); // global variable
            var getCanvas; //global variable


    $('#sig-submitBtn').on('click', function () {

            var selectedDate = $('.date-input').val();
            $('.date-input').hide();
            $(".selectedDate").show();
            $(".selectedDate").html(selectedDate);
            html2canvas(element, {
                onrendered: function (canvas) {
                    getCanvas = canvas;
                }
            });

    });


            $("#nextbt").on('click', function () {
                var imgageData = getCanvas.toDataURL("image/png");
                //Now browser starts downloading it instead of just showing it
                document.getElementById("itemImg").src = imgageData;
            });