[jQuery] date picker plugin - jQuery 月曆(頁 2) - JavaScript 範例 - jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

artie0924 發表於 2010-7-26 09:32

各位大大你們好，
我想請教一下，我希望能解除它只能選擇今天以後的日期

$(function() {
$('#date2').datePicker({startDate:'1996-01-01'});
});

這一段程式碼要放在哪裡?

wmh 發表於 2010-7-26 23:31

其實只是多個參數，加在你原本的程式內即可。

9614038 發表於 2010-8-3 23:51

請問大大，我要如何降點選的月曆的值，傳送到下一個網頁去接收呢?

以下是我自己寫的，不過無法成功傳送值到下一個網頁!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>月曆測試</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker.js"></script>
<script type="text/javascript">
$(function() {
Date.format = 'yyyy-mm-dd';
$('#date1').datePicker({
startDate:'1996-01-01'
});
});  </script>


<link rel="stylesheet" type="text/css" href="jquery.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>

</head>
<body>

<form name="form1" method="post" action="test4.php">
<input type="hidden" name="date1" id="date1" value="<? echo $date1 ?>" >

<input type="image" src="go.gif" border="0"  >

</form>
</body>
</html>

wmh 發表於 2010-8-4 00:47

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1468&ptid=81]23#[/url] [i]9614038[/i] [/b]

hidden 的欄位就看不到了吧！？

9614038 發表於 2010-8-4 02:23

嗯!!!網頁上看不到有hidden的欄位!!
為什麼? text會在網頁上出現欄位，hidden也會在網頁上出現欄位??

要怎麼改才能將我選的日期的值，傳送到test4.php這網頁去呢?

wmh 發表於 2010-8-4 07:41

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1470&ptid=81]25#[/url] [i]9614038[/i] [/b]

只要看得到欄位，選得到日期，應該就可以把值往 php 送了吧。
所以你目前問題是在哪呢？

9614038 發表於 2010-8-4 09:30

原本版大給的原始碼是!!將選到的日期顯示在input type="text"上，而我想要的是能值將姜選到的日期
傳送到另一個網頁去接收，我用form把它框起來，再將text改成hidden，網頁上呈現出來的，只有可以點選到月曆的日期，但是按送出，
並不會將植代過去另一個網頁上!，而且原本的網頁上也不會出現像text還有出現欄位。是改成hidden就不會出現欄位嗎?我程式碼如上面所po~

請版大解答~謝謝

wmh 發表於 2010-8-5 00:02

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1472&ptid=81]27#[/url] [i]9614038[/i] [/b]

改成 hidden 應該是會有問題吧，月曆元件應該無法正常運作。
但是為什麼要改成 hidden 呢？

9614038 發表於 2010-8-5 09:16

因為我想直接將選擇的日期直接傳送到下一個網頁，不想讓它顯示在text box裡面，
可是我以為改成hidden就行，後來月曆就不能使用了!!有什麼辦法可以直接將選擇
的日期直接傳送另一個網頁，去接收值(選擇的日期)嗎?

wmh 發表於 2010-8-6 00:11

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1480&ptid=81]29#[/url] [i]9614038[/i] [/b]

你可以參考一下官方的範例，有 inline 的用法可以參考：
[url]http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/inlineDatePicker.html[/url]

在 dateSelected 後，把值填到你的 hidden 欄位即可

9614038 發表於 2010-8-9 15:56

需要將原本的function(如下)拿掉嗎?
$(function() {
Date.format = 'yyyy-mm-dd';
$('#date1').datePicker({
startDate:'1996-01-01'
});
});

貼上官方這個function(如下)嗎?
$(function()
{
$('.turn-me-into-datepicker')
.datePicker({inline:true})
.bind(
'dateSelected',
function(e, selectedDate, $td)
{
console.log('You selected ' + selectedDate); [color=Red]ps.hidden是要寫在哪一段[/color] }
);
});

請大大解答

wmh 發表於 2010-8-11 07:28

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1500&ptid=81]31#[/url] [i]9614038[/i] [/b]

沒錯，就在你標注紅色的那一段。
就把值給填入你的 hidden 欄位即可。
[code js]
$("#date1").val(selectedDate);
[/code]

9614038 發表於 2010-8-11 19:41

console.log('You selected ' + selectedDate); [color=Red]直接將這段語法換成[/color]$("#date1").val(selectedDate); [color=Red]是嗎??[/color]

[color=Red]原本的這段語法呢?[/color] $(function() {
Date.format = 'yyyy-mm-dd';
$('#date1').datePicker({
startDate:'1996-01-01'
});
});

[color=Red]要保留嗎?[/color]

若刪除原本這段語法，月曆的圖示就不會出現了!!

可以請版大貼完整的程式語法給我嗎??

wmh 發表於 2010-8-12 08:16

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1507&ptid=81]33#[/url] [i]9614038[/i] [/b]

有些比較基礎的東西你可能要自己先 study 一下喔。
datePicker() 的初始化當然只需要做一次，但是參數要給正確的。

9614038 發表於 2010-8-14 17:39

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

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

$(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);
}
);
});

wmh 發表於 2010-8-15 00:20

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1512&ptid=81]35#[/url] [i]9614038[/i] [/b]

selectedDate 是 JavaScript 的 Date 物件，所以如果直接轉成字串就會是你看到的那樣一串。
有兩種方式可以處理，一種是在存到 hidden 前，用 JavaScript Date 相關的 function 轉為你要的格式，
[code js]
//這邊還需要自己再處理格式
var Y = selectedDate.getFullYear();
var m = selectedDate.getMonth() + 1;
var d = selectedDate.getDay();
$("#setday").val(Y + "/" + m + "/" + d);
[/code]

另一種方式是先存成 timestamp，到 php 後再用 date() 轉為你要的格式。
[code js]
$("#setday").val(selectedDate.getTime() / 1000);
[/code]
[code php]
$date = date("Y/m/d", $setday);
[/code]

chs965033 發表於 2013-7-27 01:01

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

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

wmh 發表於 2013-7-27 02:15

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=3660&ptid=81]37#[/url] [i]chs965033[/i] [/b]

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

chs965033 發表於 2013-7-28 00:32

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

wmh 發表於 2013-7-28 22:47

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=3663&ptid=81]39#[/url] [i]chs965033[/i] [/b]

那就是加三天，上面的範例addDays(2) 改成 addDays(3) 即可

頁: 1 [2] 3

jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver