10 August 2011

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/

7 comments:

sely aisy said...

kok aku nyoba yang ini tapi error ya? huhu

sely aisy said...

kok aku nyoba yang ini error yah? huhu

rani irsan said...

error nya gimana? apa ada yg kelewat?

Rafli Kusuma said...

saya buatnnya di visual 2012, jadi backhind nya ga bisa.

Kha Zana said...

Mampir ke blog saya yuk, ada artikel tentang Calender ASP.NET juga ..

Cara Mengubah Warna Background Current Week pada Kalender ASP.NET

Semoga bermanfaat :)

wahyu munandar said...

Terima Kasih, sangat membantu sekali

Rama Aditya said...

mba Rani, tau gak caranya biar gak usah select item calendernya, jadi langsung otomatis muncul ditextbox ?