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/
8 Comments
Cara Mengubah Warna Background Current Week pada Kalender ASP.NET
Semoga bermanfaat :)