Doğru tarih formatı veritabanı ile web sayfası tasarımı arasında hep sorun olmuştur. Özellikle Türkçe olarak ekranda gösterip Mysqle kaydetmek istiyorsak hep PHP ile ek düzenleme yapmak zorunda kalmışızdır. Bu yazıda bu sorunlara cevap olacak çözümler bulacaksınız.
Mysql veritabanı yyyy-mm-dd (yıl-ay-gün) formatını kabul etmesine rağmen, sayfa tasarımlarında genellikle dd-mm-yyyy(gün-ay-yıl) formatında kaydederiz. Bu bilgiyi örneğimizi hazırlarken kullanacağız.
Temel Datepicker Kullanımı
Öncelikle Date Picker kullanımını inceleyelim. En basit hali ile bir datepicker nesnesi şu şekilde seçilir. Jquery, Jquery UI, Jquery UI CSS kütüphanelerini dahil edip, ekrana tarih seçmek için bir tane input nesnesi ekliyoruz. Tarih seçme nesnesi yapmak içinde istediğimiz nesneyi $( “#tarih” ).datepicker(); şeklinde tanımlıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery Türkçe Tarih</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script> $( function() { //tarih nesnesinin oluşturulması $( "#tarih" ).datepicker(); } ); </script> </head> <body> <input id="tarih" type="text"> </body> </html> |
Datepicker Türkçeleştirme
Ekranda Türkçe isimler yerine İngilizce karşılıklarının geldiğini görmüşsünüzdür. Jquery Türkçe Takvim için Datepicker nesnesine parametre olarak gönderilecek bir dizge, Türkçe ay isimler ve Türkçe gün isimleri olmasını sağlayacaktır. monthNames ve dayNamesMin özelliklerine vermek istediğimiz Türkçe isimleri sırasıyla yazıyoruz.( Bu isimlendirmelerin kısa ve normal olarak da yapıldığını unutmayın.)
Ülkemizde haftanın ilk günü pazartesi olarak kabul edilir. Jquery UI ile haftanın ilk gününün pazartesi yapmak içinde de firstDay özelliği kullanılır. Bu özellik 0-6 arasında değer almaktadir. İlk gün pazartesi yapmak için 1 değerini girimek gerkiyor.
|
1 2 3 4 5 6 7 |
$( "#tarih" ).datepicker({ monthNames: [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ], dayNamesMin: [ "Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct" ], firstDay:1 }); |
Datepicker Türkçe Tarih Formatı Oluşturma
Türkçe’de tarihleri gün/ay/yıl olarak yazarız. Datepicker varsayılanında bu şekilde değil. Tarih formatını Türkçe’ye çevirdikten sonra MySQL formatı için ek bir düzenleme yapmak gerekecek. Bu kavramı da bir sonraki başlıkta değineceğim. Türkçe formatta yazdırmak için dateFormat özelliği kullanılır. dateFormat: “dd-mm-yy” şeklinde bir önceki örneğe ekliyoruz.
|
1 2 3 4 5 6 7 8 |
$( "#tarih" ).datepicker({ dateFormat: "dd-mm-yy", monthNames: [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ], dayNamesMin: [ "Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct" ], firstDay:1 }); |
Datepicker ile Türkçe Yapılan Tarihi mySQL Formatına Uygun Olacak Şekilde Düzenleme
Ekranda görünenin Türkçe formatında olmasını sağlayıp veritabanına gönderirken mySQL formatında düzenleme yapmak için altFormatı özelliği kullanılmaktadır. Ekran ile gönderilen arasında farklı olmasını sağlayarak PHP gibi yazılımlar ile tarih dönüştürme işlemi yapmadan doğrudan veritabanına kaydedilecek formatı elde edebiliriz.
Bu işlem için iki tane datepicker özelliğine değer girmemiz ve bir tane de çevrilen alanı kaydetmek için gizli yada görünen bir alana ihtiyacımız var. Birincisi işlemi yapan datepicker özelliği altFormat: “yy-mm-dd” şeklinde düzenlenir. İkincisi çevrilen formatı kaydettirme için de altField:”kaydedilecek yer” özelliği kullanılmaktadır. Yine yukarıdaki örneklere bağlayarak örneği yazdım.
|
1 2 3 4 5 6 7 8 9 10 11 |
$( "#tarih" ).datepicker({ dateFormat: "dd-mm-yy", altFormat: "yy-mm-dd", altField:"#tarih-db", monthNames: [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ], dayNamesMin: [ "Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct" ], firstDay:1 }); |
Datepicker ile Türkçeleştirme Örneği
Jquery UI Datepicker nesnesi için “datepicker language tr” eklentisi bulunup kurulabileceği gibi eklenti olmadan da aşağıdaki gibi Türkçe diline çevirme imkanımız var.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery Türkçe Tarih</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script> $( function() { $( "#tarih" ).datepicker({ dateFormat: "dd-mm-yy", altFormat: "yy-mm-dd", altField:"#tarih-db", monthNames: [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ], dayNamesMin: [ "Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct" ], firstDay:1 }); } ); </script> </head> <body> <input id="tarih" type="text"> <input type="text" id="tarih-db"><!-- type="hidden" olması daha iyi olurdu. --> </body> </html> |
Son Olarak
Datepicker nesnesinin bir çok özelliği var. Ama temel olarak gerekli olan Türkçe tarih yazdırma ve Türkçe tarihi mySQL formatına çevirme için gerekli olan herşeyi yazdım. Umarım yaptığınız projelerde faylı olacaktır.
[Güncelleme: 26.01.2018]
Jquery UI Datetimepicker Kullanımı
Jquery UI Datepicker ile tarih seçmenin dışında Tarih ve Saat seçmek için aşağıdaki iki kütüphaneden birini kullanabilirsiniz.
Örnek 1: Jquery date nesnesine ek olarak hazırlanmış datetime nesnesini kullanabilirsiniz. Not: Mevcut kütüphaneyi CDN olarak kullanma şansı var. Eklenti adresi: http://trentrichardson.com/examples/timepicker/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery Türkçe Tarih</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/i18n/jquery-ui-timepicker-tr.js"></script> <script> $( function() { $( "#tarih" ).datetimepicker({ dateFormat: "dd-mm-yy", altFieldTimeOnly: false, altFormat: "yy-mm-dd", altTimeFormat: "h:m", altField:"#tarih-db", monthNames: [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ], dayNamesMin: [ "Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct" ], firstDay:1 }); } ); </script> </head> <body> <input id="tarih" type="text"> <input type="text" id="tarih-db"><!-- type="hidden" olması daha iyi olurdu. --> </body> </html> |
Örnek 2: Datepicker ile tarih seçmenin dışında tarih ve saat seçmek için jquery ile hazırlanmış olan datetimepicker eklentisini kullanabilirsiniz.
Aşağıdaki kodlar datetimepicker kütüphanesi için küçük bir örnektir.
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html> <head> <title>Yazılım Bilişim</title> <meta charset="utf-8"> <link href="jquery.datetimepicker.min.css" rel="stylesheet"> </head> <form method="post" action="https://www.yazilimbilisim.net"> <div> <label for="tarih">Tarih ve Saat</label> <input type="text" name="tarih" id="tarih"/> </div> <div> <input type="submit" value="Tarihi Gönder"/> </div> </form> <script src="jquery-1.12.2.min.js"></script> <script src="jquery.datetimepicker.full.min.js"></script> <script> $(document).ready(function () { 'use strict'; $.datetimepicker.setLocale('tr'); $('#tarih').datetimepicker({ format:'d.m.Y H:i', dayOfWeekStart: 1 }); }); </script> </body> </html> |
Türkçe Tarih Seçme Örneği İndir
Hocam tebrik ederim. Harika anlatım olmuş. Merak ettiğim ise time’ı nasıl aktif yaparız ya da entegre ederiz. Çok ihtiyacım var.
Yazıyı güncelledim. Tarih saat seçme için kullandığın jquery kütüphanesi ile bir örnek yapıp yazının sonuna ekledim.
[…] Jquery UI Datepicker Kullanımı […]
helalsın be kanka çok sağool
hocam bunu php de nasıl mysql e post edebiliriz
Şu adresteki örnek ile birleştirebilirsin.
http://www.ahmetcansever.com/php/php-ile-mysql-veritabanina-kayit-ekleme-insert/
runat server neden olmuyor anlamadım ?
runat server asp.net ile ilgili.
Bu buradaki örnek jquery(javascript kütüphanesi) ile yapılan bir örnektir.