返回列表 發帖

[jQuery] date picker plugin - jQuery 月曆

jQuery date picker plugin v2
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
實用的月曆 plugin,網頁表單必備工具!

這個月曆除了需要使用 jQuery 之外,還需要一個 date.js,此外,如果在 IE6 使用時,需要避免被下拉選單覆蓋住,直接引用 bgiframe plugin 即可自動處理。先看看一個簡單的範例:



HTML 和 CSS 的原始碼如下:
<input type="text" name="date1" id="date1" class="date-pick" />
<link rel="stylesheet" type="text/css" href="datePicker.css" />  
<style type="text/css">
a.dp-choose-date {
  float: left;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 5px 3px 0;
  display: block;
  text-indent: -2000px;
  overflow: hidden;
  background: url(date_16x16.gif) no-repeat;
}
a.dp-choose-date.dp-disabled {
  background-position: 0 -20px;
  cursor: default;
}
input.dp-applied {
  width: 100px;
  float: left;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker.js"></script>
JavaScript 的部份則是先透過 jQuery 取得要輸入日期的 <input> Tag,然後套用 datePicker() 即可。這個範例中還把日期的格式修改為 yyyy-mm-dd,比較符合台灣地區的使用習慣:
$(function() {
  Date.format = 'yyyy-mm-dd';
  $('#date1').datePicker();
});
date picker 預設可輸入的日期為今天以後,如果要讓使用者輸入以前的日期,則需要額外指定 startDate 這個參數:
$(function() {
  $('#date2').datePicker({startDate:'1996-01-01'});
});
範例:




以上簡單地示範了 date picker 的用法,其實 date picker 還提供了更多的參數以及自訂事件可供設定或使用,詳情請參考官方網站有更多的說明。
To infinity and beyond!

月曆似乎一定要用jquery-1.2.6.js版本

......冏了

TOP

版大您好:

我想請問一點問題
以下是我部分的程式:
1. <script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
2. <script src="../js/nav.js" type="text/javascript"></script>
3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
4. <script src="../js/date.js" type="text/javascript"></script>
5. <script src="../js/jquery.datePicker.js" type="text/javascript"></script>
---------------------------------------------
1. 及 3. 應該是一樣的吧?
但是去除3.之後月曆卻不能用了

但如果1~5放入,反而是nav.js的功能無效了

為什麼呢?請指點><

TOP

那這段要加在date.js的哪裡呢?
加上去之後都沒反應.

TOP

回復 39# chs965033

那就是加三天,上面的範例addDays(2) 改成 addDays(3) 即可
To infinity and beyond!

TOP

抱歉阿
可能是我講得不好
我是需要 限制當日起的兩天不能點選
例如 7/28號  那29 30 就不能點選之後的日期就可以點選

TOP

回復 37# chs965033

用本文所提到的 date.js 很容易可以把日期指定為兩天後。
$('#date').datePicker({startDate: new Date().addDays(2).toISOString().substr(0, 10) });
To infinity and beyond!

TOP

板大 你好 雖然發布時間 離現在有點久遠
剛好需要您這個功能 想請問一下 如果 我想要限制選取該如何設定呢?
例如: 當日起的兩天內 不能點選日期
2013.7.27 在加上48hr 以內的日期都不能選取

麻煩教導一下 因為專長不是這方面 但這功能對我來說蠻重要的 感謝

TOP

回復 35# 9614038

selectedDate 是 JavaScript 的 Date 物件,所以如果直接轉成字串就會是你看到的那樣一串。
有兩種方式可以處理,一種是在存到 hidden 前,用 JavaScript Date 相關的 function 轉為你要的格式,
//這邊還需要自己再處理格式
var Y = selectedDate.getFullYear();
var m = selectedDate.getMonth() + 1;
var d = selectedDate.getDay();
$("#setday").val(Y + "/" + m + "/" + d);
另一種方式是先存成 timestamp,到 php 後再用 date() 轉為你要的格式。
$("#setday").val(selectedDate.getTime() / 1000);
$date = date("Y/m/d", $setday);
To infinity and beyond!

TOP

板大有辦法將Sun Aug 8 00:00:00 UTC+0800 2010
轉換成2010/08/08 這種格式嗎?

Funtion內也有輸入Date.format = 'yyyy/mm/dd';
不過送出至test4.php,還是顯示範例的這種格式 ( Sun Aug 8 00:00:00 UTC+0800 2010 )

$(function()
{
        Date.format = 'yyyy/mm/dd';
        $('.turn-me-into-datepicker')
                .datePicker({inline:false, startDate:'1996-01-01'})
                .bind(
                        'dateSelected',
                        function(e, selectedDate, $td)
                        {
                                //console.log('You selected ' + selectedDate);
                                $("#setday").val(selectedDate);
                        }
                );
});

TOP

返回列表 回復 發帖