close

http://blog.wu-boy.com/2008/04/30/194/

--

原始DEMO網站

http://jqueryui.com/demos/datepicker/

--

100 (by appleboy46)
最近在學習 javascript，當然首推的就是 jQuery 了，之前因為懶得做日期表單，因為日期表單需要三種欄位，一個是年，一個是月，一個是日，相當麻煩，一直在那邊 for 迴圈也不是辦法，雖然那是個解決方法，然後我之前用了xt:Commerce 這套 opensource的程式碼，把日期函式取出來：[Html] javascript 好用的時間日曆表，不過我認為這方法也太麻煩，因為 jQuery 一行就可以解決的事情，幹麼還要用那個方法呢？
 

再來呢介紹一下怎麼使用日期函式
步驟一：加上 jQuery 套件到 head 跟 /head 之間

<script type="text/javascript" src="jquery.js"></script>
<!--
或者是
-->
<script src="http://code.jquery.com/jquery-latest.js"></script>

步驟二：加上 ui.datepicker.css 跟 ui.datepicker.js jQuery UI Date Picker CSS and the jQuery UI Date Picker Javascript

<style type="text/css">@import url(ui.datepicker.css);</style> 
<script type="text/javascript" src="ui.datepicker.js"></script>

步驟三：教大家使用四種基本方法：

1. 最基本的語法 (mm/dd/yyyy).

jQuery(function($){
  $('#example1').datepicker();
});

2. 加上旁邊圖示也可以進行操作

$('#example2').datepicker({showOn: 'both', showOtherMonths: true, 
        showWeeks: true, firstDay: 1, changeFirstDay: false,
        buttonImageOnly: true, buttonImage: 'calendar.gif'});

3. 改變時間格式

$('#example4').datepicker({dateFormat: 'yy-mm-dd', showOn: 'both', 
            buttonImageOnly: true, buttonImage: 'calendar.gif'});

4. 選擇日期範圍

$('#exampleRange').datepicker({rangeSelect: true, firstDay: 1, showOn: 'both', 
            buttonImageOnly: true, buttonImage: 'calendar.gif'});

5. 初始話時間，加7天

#
# 增加7天時間 
#
$('input selector').datepicker({defaultDate: +7});

程式執行畫面：
102 (by appleboy46)
Demo介紹

Demo檔案下載：datepickerdemo coreuidatepicker
參考網站：
http://docs.jquery.com/UI/Datepicker
http://marcgrabanski.com/code/ui-datepicker/
http://kelvinluck.com/assets/jquery/datePicker/v2/demo/
http://keith-wood.name/datepick.html

--

 

全站熱搜
創作者介紹
創作者 dizzy03 的頭像
dizzy03

碎碎念

dizzy03 發表在 痞客邦 留言(0) 人氣()

E-mail轉寄