Failure to run js on master pages - asp.net

Question

Here, when I give runat="server" to the <input type=text , javascript doesn't work anymore, while without runat="server" the program runs correctly.
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="js-persian-cal.css" rel="stylesheet" />
<script src="js-persian-cal.min.js"></script>
<link href="jspc-gray.css" rel="stylesheet" />
<link href="jspc-peach.css" rel="stylesheet" />
<link href="jspc-royal_blue.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
<%--This line is executed on this page. But when I use runat="server" it doesn't run anymore--%>
<asp:TextBox class="pdate" runat="server" id="pcal1"></asp:TextBox> <%--This line does not work--%>
<%-- <input type="text" class="pdate" id="pcal1">--%> <%--// This line is executed--%>
<script type="text/javascript">
var objCal1 = new AMIB.persianCalendar('pcal1');
</script>
</div>
</asp:Content>
masterpage img
enter image description here
<asp:TextBox class="pdate" runat="server" id="pcal1"></asp:TextBox> <%--This line does not work--%>
<%-- <input type="text" class="pdate" id="pcal1">--%> <%--// This line is executed--%>
<script type="text/javascript">
var objCal1 = new AMIB.persianCalendar('pcal1');
</script>