ASP.NET MVC – Tarih formatını ayarlamak (Bootstrap)

Merhaba arkadaşlar,
Bugün sizlere MVC ile Bootstrap temasını kullandığımız bir yapıda, tarih formatını istediğimiz şekilde ayarlamasını nasıl yapacağımızı anlatacağım.

Yapacağımız işlem, tarih kolunu üzerine tıkladığımızda, tarihin bir açılır pencereden seçilebilir olmasını sağlamak olacak. Aşağıda ki resimde ki gibi.

Şimdi adım adım uygulayalım.

1- Öncelikle bu işlemi sağlayacak css ve javascript dosyalarımızı indirelim. Bunun için, Package Manager Console açıp şunu yazıp ilgili dosyaları projemize yüklüyoruz. > Install-Package Bootstrap.Datepicker

2- Proje(solition) altında > AppStart klasörü altında > BundleConfig.cs dosyası içinde yüklediğimiz datepicker javascript dosyasını ve css dosyasını tanımlıyoruz.

Eğer bundleConfig.cs dosyası kullanmıyorsanız, shared klasörü altında ki _Layout.cshtml ya da kullanmak istedeğiniz view’da aşağıda ki css ve JS dosyalarını include etmelisiniz.

Ben bundleConfig.cs dosyasını kullanıyorum, o yüzden şu şekilde ekledim;

// datepicker js
bundles.Add(new ScriptBundle("~/bundles/datepickerJS").Include(
"~/Scripts/bootstrap-datepicker.js"));
 
// datepicker css
bundles.Add(new StyleBundle("~/Content/datepickerCSS").Include(
"~/Content/bootstrap-datepicker.css"));

3- Daha sonra view altında>_layout.cshtml dosyamın en üstünde, bundle dosyamda ki csslerimi çağırdım.

4- View altında > shared > _layout.cshtml içinde bu kez en alt satırda ilgili Javascript dosyamızı çağrıyoruz.

Burada tırnak içinde ki #Transdate bizim tarih alanımızın Id’sini ifade ediyor.
Burası önemli çünkü hangi alan için tarihi popupının çıkmasını istiyorsak, o alanın id sini yazmalıyız.
Format kısmı ise, tarih formatımızı ifade ediyor, bu örnekte, gün/ay/yıl şeklinde gösteriliyor.

Bunları yaptıktan sonra, artık tarih alanımızı sayfamızda göstermeye sıra geldi. Onun için ise;

5- İlgili .cshtml sayfasına gidip, aşağıda ki düzenlemeyi yapıyoruz. Belirttiğim gibi Id’niz ney ise javascript kodunuzuda buna göre düzenlemelisiniz.

<div class="form-group">
            @Html.Label("Tarih", "Tarih", htmlAttributes: new { @class = "control-label col-md-2" })
            
<div class="col-md-10">
                <input type="text" class="form-control" id="transdate" name="transdate">
            
        
</input type="text" class="form-control" id="transdate" name="transdate"></div class="col-md-10"></div class="form-group">

Evet arkadaşlar işlemler bu kadar ve mutlu son artık tıkladığımızda tarih bizim belirttiğimiz formatta gözükecek.