Jquery DateTimePicker inline is showing blank data on first

Question

Well I have a problem with displaying Datetimepicker from jquery-ui library. This is the code i am using for testing

<input id="datetimepicker3" type="text" />
<script type="text/javascript">
$(document).ready(function () {
    $(function () {
        $('#datetimepicker3').datetimepicker({
            format:'d.m.Y H:i',
            inline:true
        });
    });
});
</script>

Its working nice when i remove the inline:true, but when i add inline: true i face this problem the image.

It's empty or blank or not initialised, but when i click on any of the button such as the "home" button or as it called today button it works again and it shows the fields as in the next image.

How can i make it visible without clicking on anything ?! Thanks in advance.

Edit:

1- This is the fiddle : https://jsfiddle.net/9t4kgzuf/

2- Removing or adding $(document).ready(function () is the same result

Answer 1

solved:

$(document).ready(function() {
  $(function() {
    $('#datetimepicker3').focus(function(){
        $('#datetimepicker3').datetimepicker({
        format: 'd.m.Y H:i',
        inline: true
      });
     });
  });
});