Konular
Php
Mysql
Html
Javascript
Windows Vista
Program Anlatımı
Internet
Google
Windows 2003 Server
Windows Xp
Isa Server
Network
Ofis Programları
Css
Photoshop
Donanım
Joomla
Jquery

Linklerimiz
Bareboat Holidays in Turkey
Otel Şikayet
Otel telefon

 
Javascript Javascript Takvim Uygulaması
Biliyoruz ki formlar sitelerimizin vazgeçilmez elemanlarıdır. Hemen her alanda artık doldurulması gereken formlarla kaşılaşıyoruz. Bazen bu formalrda kullanıcıdan yapacağı işlem için bir tarih girmesini isteriz. Bu durumda bazı olumsuzluklar kullanıcının karşısına çıkar. Birincisi tarihi girmesi gereken yapıyı yani formatı bilmemesidir. İkincisi ise gireceği tarihin hangi güne denk geldiğinden emin olamamasıdır. Biz de diyoruz ki neden kullanıcılarımızın işini kolaylaştırıp onlara o anda kullanabilecekleri hızlı, basit bir takvim sunmayalım ki? ;)
Javascript Takvim Uygulaması

Bu makalede anlatacağım uygulama The DHTML/Javascirpt Calender. Javascript Calender oldukça detaylı bir uygulama olup bir çok ayarı mevcuttur. Tam detaylı kullanımını HTML dosyası olarak buradan öğrenebilir, PDF dosyası olarak buradan indirebilirsiniz. Ben ise en basit şekliyle uygulamayı formlarınıza nasıl dahil edeceğinizi ve 12.10.2007 gibi basit bir tarih girişinin nasıl yapılacağını anlatacağım.

dosyalar :
Resimi Orjinal Büyüklüğünde görmek için tıklayınız.



Burada görmüş olduğunuz dosyalardan sadece index.html dosyasını ben hazırladım ve örnek formumuz bu dosyada bulunuyor. Diğer javascript dosyaları ve css dosyasında herhangi bir düzenleme yapmıyoruz. Bu dosyalar takvimin çalışabilmesi için formumuzun bulunduğu dosyamıza(burada index.html) eklememiz gereken dosyalar.
Kullanımı

Öncelikle formumuzu ekleyeceğimiz dosyamızı yaratıyoruz ki benim örneğimde bu dosya index.html Ardından bu dosyaya Javascript Calender uygulamasının elemanları olan javascript ve css dosyalarını ekliyoruz.
PLAIN TEXT
PHP:

1.
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" /><script type="text/javascript" src="calendar.js"></script>
2.
<script type="text/javascript" src="calendar-tr.js"></script>
3.
<script type="text/javascript" src="calendar-setup.js"></script>

Ardından formumuza bir yazı alanı ve bir düğme ekliyoruz.
PLAIN TEXT
PHP:

1.
<input type="text" id="giris" name="giris" />
2.
<button id="girisbut">Takvim</button>

Son olarak koymuş olduğumuz koymuş olduğumuz düğmeye ve yazı alanına takvim uygulamasını bağlıyoruz. Bu işlem için de şu kodu kullanıyoruz.
PLAIN TEXT
PHP:

1.
<script type="text/javascript">
2.
Calendar.setup(
3.
{
4.
inputField : "giris", //yazı alanının id'si
5.
ifFormat : "%d.%m.%Y", //tarih formatı
6.
button : "girisbut" //düşmenin id'si
7.
}
8.
);
9.
</script>

Bu işlemlerimizi yaptıktan sonra örneğimiz hazırdır. Hepsini biraraya getirip eksiklerini tamamlarsak en basit haliyle şunu elde ederiz.
PLAIN TEXT
PHP:

1.
<html>
2.

3.
<head>
4.
<meta http-equiv="content-type" content="text/xml; charset=windows-1254" />
5.

6.
<title>Yakuter &raquo; Js-Takvim Uyuglaması</title>
7.

8.
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" /><script type="text/javascript" src="calendar.js"></script>
9.
<script type="text/javascript" src="calendar-tr.js"></script>
10.
<script type="text/javascript" src="calendar-setup.js"></script>
11.

12.
</head>
13.

14.
<body>
15.

16.
Tarih <input type="text" id="giris" name="giris" /><button id="girisbut">Takvim</button>
17.

18.
<script type="text/javascript">
19.
Calendar.setup(
20.
{
21.
inputField : "giris",
22.
ifFormat : "%d.%m.%Y",
23.
button : "girisbut"
24.
}
25.
);
26.
</script>
27.

28.
</body>
29.
</html>

Şunu unutmamanız gerekir ki bu uygulamanın tek amacı yazı alanına tarihi girmek. Bu tarihinin veritabanına kaydedilmesini bu uygulama ile yapamazsınız. Bunun için PHP, ASP vb. bir programlama dili kullanmanız gerekir.
Son Sözler

Javascript Calender kesinlikle sadece bu basit uygulamadan ibaret değil. Ayrıca düğme yerine resim kullanarak takvimi aktif hale getirebiliyorsunuz. Takvimin bir pencere olarak açılması yerine sayfaya gömülü bir şekilde kullanılmasını sağlayabiliyorsunuz. Bu ve benzeri daha fazla detaya uygulamanın kendi sayfasından ulaşabilirsiniz.

test sayfası

Link


download
Download
Böyyük Patron Tarafından 02-11-2007 Tarihinde Gönderilmiştir.   
Kaynak : ajax-tr.com

 

En Son Eklenenler
MYSQL
split veya explode uygulaması
Html
php
Windows XP
Windows xp Desteği Kalktı
Html
html input value değerini satır satır yazdırmak
Photoshop
12313
Network
efsavetimi
jquery
fonksiyonu bekletmek
Javascript
Bölünebilme
php
eregi_replace örneği
jquery
form verilerini temizlemek
jquery
formda enter tuşuna basılmasını engellemek
php
adresten google map coordinatlarını öğrenmek
php
site kontrolü

.htaccess ile cache işlemleri

.htaccess ile sayfanın önbellekte 1 hafta kalması
MYSQL
tarih alanındaki değerleri arttırmak
php
tarih işlemlerinizi türkiye zaman dilimine ayarlamak
php
Bir sitenin kaynak kodunu yazdırmak (view page source)
php
Resimlerin cache den gösterilmesine engel olmak
php
php klasörün altındaki dosyaları ve klasörleri göstermek
php
php array verilerini dosyaya kayıt etme dosyadan okuma
php
php string içindeki fazla boşlukları (whitespaces) kaldırmak

.htaccess ile dosyalarınız cache ile sayfa hızınız artsın
Javascript
javascript linklerde referrer bilgisi gönderilmesi
jquery
input ve textarea kutularına girilince kutunun içindeki değerlerin silinmesi
jquery
jquery ui autocomplate - Sonuçları formatlamak
jquery
jquery ui autocomplate - arama sonuçlarında satır sayısı belirlemek
php
iconv ile utf karakterleri çeviriken kesme işareti (apstrof) sorunu
php
ip adresi kontrolü ip validate
php
url adresi kontrolü validate url
php
php mail adresi kontrolü filter_var
php
dosya include error hatasını engellemek
jquery
internet explorer position fixed sorununu jquery ile çözmek
jquery
input alanlara girilen sayıların toplanarak gösterilmesi
MYSQL
aynı satırdaki (row) field değerlerin içinde en büyüğünü (max) bulmak
MYSQL
aynı satırdaki (row) field değerlerin içinde en küçüğünü (min) bulmak
jquery
select kutusunda seçilen option daki attribute özelliğindeki değeri almak
jquery
jquery dizide max ve min işlemeleri array max min
MYSQL
mysql de türkçe kayıtlı alanlarda arama yapmak
php
str_shuffle()
İletişim : bpatron@codekodu.com
Sitemizdeki ilgili yazının yazarının veya kaynak sahibinin istemesi halinde ilgili yazı sitemizden kaldırılacaktır.
Sitemizin İmalatı Böyyükpatron Tarafından Yapılmıştır.