Datepicker untuk ASP.NET dengan Calendar Control

Free datepicker for ASP.NET!!! Tentu aja free klo bikin sendiri hehehehe...
Sering dipusingkan dengan kebutuhan yang satu ini saat membuat website dengan ASP.NET. Sekali menemukan cara yang paling bisa dipake (minimal buat rani :D). Ga ada salahnya sharing di blog.

Asumsi sudah ada file Default.aspx tanpa masterpage dengan behind code yang terpisah.
(FYI rani pakai VS2005, ASP.NET 2.0)
Pertama kita butuh sebuah textbox

<asp:TextBox id="txtDate" Runat="server" ReadOnly="True" />

Sebuah calendar icon sebagai tombol popup
<img src="cal.png" onclick="popupCalendar()" id="IMG1" />
Ini dia gambarnya:

Kemudian tambahkan control calendar didalam sebuah div yang di set runat=server:

<div id="dateField" style="position:absolute;z-index:2;

   text-align: center;" runat="server">

   <asp:Calendar id="calDate"

     OnSelectionChanged="calDate_SelectionChanged"

     Runat="server" BackColor="White" BorderColor="#999999"

     CellPadding="4" DayNameFormat="Shortest"

     Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"

     Height="180px" Width="200px" >

    <SelectedDayStyle BackColor="#666666" Font-Bold="True"

    ForeColor="White" /> <SelectorStyle BackColor="#CCCCCC" />

    <WeekendDayStyle BackColor="#FFFFCC" />

    <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />

    <OtherMonthDayStyle ForeColor="#808080" />

    <NextPrevStyle VerticalAlign="Bottom" />

    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True"

    Font-Size="7pt" />

    <TitleStyle BackColor="#999999" BorderColor="Black"

    Font-Bold="True" />

   </asp:Calendar>          

</div>

Inputkan javascript berikut diantara tag head:

<script type="text/javascript">

    function popupCalendar()

    {

    var dateField = document.getElementById('dateField');

    // toggle the div

    if (dateField.style.display == 'none')

    dateField.style.display = 'block';

    else

    dateField.style.display = 'none';

    }

</script>

Code behind yang digunakan adalah sebagai berikut:

Protected Sub Page_Load(ByVal sender As Object, _

  ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then

       dateField.Style("display") = "none"

    End If

End Sub

Protected Sub calDate_SelectionChanged(ByVal sender As Object, _

  ByVal e As System.EventArgs) _

  Handles calDate.SelectionChanged

    txtDate.Text = calDate.SelectedDate.ToString("d")

    dateField.Style("display") = "none"

End Sub

Protected Sub calDate_VisibleMonthChanged(ByVal sender As Object, _

  ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) _

  Handles calDate.VisibleMonthChanged

    dateField.Style("display") = "block"

End Sub

Hasilnya:
Pertama....

Kedua....

Dan....
 

Click here if you like this article.


Sumber:
http://blog.divergencehosting.com/2009/03/11/create-popup-date-picker-using-aspnet-calendar-control/