Jquery DateTimePicker not working in master page

Question

<meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>




         <script type="text/javascript">
       function pageLoad() {
           maintainSelectedTab();

       }
       function maintainSelectedTab() {

           var selectedTab = $("#<%=hfTab.ClientID%>");
           var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
           $('#dvTab a[href="#' + tabId + '"]').tab('show');
           $("#dvTab a").click(function () {
               selectedTab.val($(this).attr("href").substring(1));
                   //replace("#", ""));
               //substring(1));
           });
       }
          </script>


     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="Calender/jquery.datetimepicker.css" />
    <script type="text/javascript" src="Calender/jquery.js"></script>
    <script type="text/javascript" src="Calender/jquery.datetimepicker.js"></script>

     <script type="text/javascript">



         $(function () {

               $("input[id$='txtCheckOut']").datetimepicker({
                 format: 'd/m/Y',
                 timepicker: false,

             });


         });

    </script>

I put the bootstrap tab menu after that i place datetimepicker code but not working datetime picker properly . above i used the updatepanel 

 

datetimepicker code use before  the bootstrap function tab menu not work properly 

 

 please how to solve this  problem?