jQuery ile AY aralığı seçim mekanızması

geri

Nasıl başlık ama :) Geçenlerde bir rapor ekranında ay aralıklarına göre işlem yaptırmam gerekiyordu. İki tane takvim koyup, kullanıcıya istediğin aralığı seç demek istemedim, çünkü erişebilirlilik adına hoş olmayan bir durum ortaya çıkıyor. Aradım taradım ayların aralığını seçmek için bir mekanızma bulamadım. Madem öyle dedim kendim yapayım. Bize lazım olanlar jQuery, jQuery Ui ve Ui ile birlikte gelen slider. Yapmak istediğimiz şey hemen aşağıda ki fotoğrafta gördüğünüz mekanızma. Kullanıcı tarih aralıklarını basit bir şekilde belirtiyor ve alacağımız raporu ona göre filtreliyoruz.

Css kodlarımıza bir bakalım

[css] body{font-size:12px;font-family:Arial} .aylar{width:865px;min-height:100px} .aylar ul{list-style:none;padding:0;margin:0} .aylar li{width:50px;text-align:center;float:left;padding:5px;border:1px solid #c0c0c0;background-color:#ededed;margin:5px;font-weight:bold} #tarihAraligi{ width:800px; margin:0 auto; display:none; } [/css]

[javascript] [/javascript]

Asp.Net kodlarımız

[html]

    <%for (int i = 1; i <= 12; i++) { DateTime dt = new DateTime(DateTime.Now.Year, i, 1); string strTemp = ""; string strBitis = ""; if (i == DateTime.Now.Month) { strTemp = "border:1px solid #a60000"; strBitis = DateTime.Now.Day.ToString(); } else { strBitis = DateTime.DaysInMonth(DateTime.Now.Year, i).ToString(); } %>
  • <%=string.Format("{0:MMMM}", dt)%>
  • <%} %>
[/html]

Daha farklı aksiyonlarda yapabilirsiniz mesela aynı uygulamayı günler içinde yapabilirsiniz. Ben projemde aşağıdaki gibi kullanıyorum.

Şimdilik bu kadar, çalışan halini buradan indirebilirsiniz.

2010-10-23 | jquery