Средство выбора даты не захватывается html2canvas

Question

Я использую Html2canvas, чтобы сделать снимок экрана моей страницы, на странице я использую средство выбора даты. но когда я делаю снимок экрана, дата на снимке не отображается. есть идеи, почему это так и как я его решаю?

это мой код

<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

Добавленное решение по-другому, вот скрипка:

https://jsfiddle.net/vpysd9zk/

дополнительный код:

.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;
            });