calendar not display when i comment gridview code

Question

I have this input from date calendar

<input  ID="fromdate" value="dd/mm/yyyy" runat="server" clientidmode="static" />

 and i use these links for poplulating calednar 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>

now i use gridview desing with the refrence of this

http://gridviewscroll.aspcity.idv.tw/Demo.aspx

and from this i use this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        gridviewScroll();
    });

    function gridviewScroll() {
        $('#<%=GridView1.ClientID%>').gridviewScroll({
            width: 660,
            height: 200
        });
    }
</script>

 so when i use both then calendar not populate but when i comment this section  then calendar is populate

<script type="text/javascript">
    $(document).ready(function () {
        gridviewScroll();
    });

    function gridviewScroll() {
        $('#<%=GridView1.ClientID%>').gridviewScroll({
            width: 660,
            height: 200
        });
    }
</script>

  how i solve this