2010-09-30 276 views
49

我有jQuery-UI datepicker的問題,我已經搜索和搜索,但我沒有找到答案。我有以下代碼:jQuery-UI datepicker默認日期

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: '01-01-1985' 
    }); 
}); 
</script> 

我想,當在#birthdate輸入用戶點擊所選擇的當前日期爲01-01-1985,現在它設置爲當前日期。

+0

你的代碼是正確的,你可以添加一些更多的細節? – Keeper 2010-09-30 08:45:24

+1

你有什麼問題?你的代碼工作正常。 [在這裏看到](http://jsfiddle.net/MNBjS/) – Reigel 2010-09-30 08:46:31

回答

46

嘗試傳入Date對象。我不明白爲什麼它不格式工作,你已經進入:

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: new Date(1985, 00, 01) 
    }); 
}); 
</script> 

http://api.jqueryui.com/datepicker/#option-defaultDate

通過 Date對象或作爲一個字符串指定爲實際的日期 當前日期格式或距離今天(例如+7)日期的 天或數值和週期的字符串 的數目('y'多年, 'm'數月,'w'數週,'d'爲 天,例如'+ 1m + 7d'),或者爲null 今天。

+1

我在jQuery UI 1.7.3中遇到了與OP類似的問題 - 雖然在1.8.4中沒有問題(必須運行1.7.3傳統系統運行jQuery 1.3。2) - 使用日期對象修復了這一切。 – HorusKol 2010-10-06 04:32:31

+0

非常感謝@Codesleuth的answer.it幫助了我很多! – 2015-07-13 08:00:29

+1

上帝,我真的恨「00」= 1月爲Javascript。幸運的是,我每次使用這種方式聲明時都註釋我的日期對象,以避免任何混淆... – Nelson 2016-05-11 01:55:52

13

您可以嘗試下面的代碼。

它會使默認日期成爲您正在查找的日期。

$('#birthdate').datepicker("setDate", new Date(1985,01,01)); 
+2

整數世界中不允許使用前導零。 – Christian 2014-02-01 15:54:32

11

眼看:

設置爲在第一開口突出,如果該字段爲空的日期。通過Date對象指定實際日期,或者在當前的dateFormat中指定一個實際的日期,或者指定從今天開始的天數(例如+7)或者一串值和期間('y'多年,'m'多個月, 'w'表示數週,'d'表示數天,例如'+ 1m + 7d'),或者對於今天爲空。

如果當前的日期格式爲無法識別,你仍然可以使用使用new Date(year, month, day)

在您的例子Date對象,這應該工作(我沒有測試):

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: new Date(1985,01,01) 
    }); 
}); 
</script> 
1

jQuery UI Datepicker被編碼爲始終使用類ui-state-highlight突出顯示用戶的本地日期。沒有內置的選項來改變這一點。

一種方法,在其他的答案相關問題的描述類似,是覆蓋CSS該類以符合您的主題ui-state-default,例如:

.ui-state-highlight { 
    border: 1px solid #d3d3d3; 
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; 
    color: #555555; 
} 

然而,這不是,如果你非常有幫助使用動態主題,或者如果你的意圖是突出不同的一天(例如,「今天」是基於你的服務器時鐘而不是客戶端)。

另一種方法是覆蓋負責突出顯示當天的日期選擇器原型。

假設您正在使用UI javascript的最小化版本,以下片段可以解決這些問題。


如果你的目標是防止完全凸顯當前日期:

// copy existing _generateHTML method 
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML; 
// remove the string "ui-state-highlight" 
_generateHtml.toString().replace(' ui-state-highlight', ''); 
// and replace the prototype method 
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML); 

這改變從相關的代碼(處於最小化狀態的可讀性):

[...](printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + [...] 

[...](printDate.getTime() == today.getTime() ? '' : '') + [...] 

如果你的目標是要改變的 「今天」 日期選擇器的定義:

var useMyDateNotYours = '07/28/2014'; 
// copy existing _generateHTML method 
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML; 
// set "today" to your own Date()-compatible date 
_generateHTML.toString().replace('new Date,', 'new Date(useMyDateNotYours),'); 
// and replace the prototype method 
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML); 

這改變從相關的代碼(處於最小化狀態的可讀性):

[...]var today = new Date();[...] 

[...]var today = new Date(useMyDateNotYours);[...] 
// Note that in the minimized version, the line above take the form `L=new Date,` 
// (part of a list of variable declarations, and Date is instantiated without parenthesis) 

而不是useMyDateNotYours你當然也可以注入一個字符串,函數或任何適合你需要的東西。

+1

謝謝!這可能不是OP所需要的,但這正是我所追求的。 – Eterm 2014-12-15 10:31:53

0

如果要根據某些服務器時間將突出顯示的日期更新爲不同日期,可以覆蓋日期選擇器代碼以允許使用名爲localToday的新自定義選項或任何您想要命名的日期。

一個小調整到所選擇的答案中jQuery UI DatePicker change highlighted "today" date

// Get users 'today' date 
var localToday = new Date(); 
localToday.setDate(tomorrow.getDate()+1); // tomorrow 

// Pass the today date to datepicker 
$("#datepicker").datepicker({ 
    showButtonPanel: true, 
    localToday: localToday // This option determines the highlighted today date 
}); 

我已經覆蓋2層日期選擇器的方法來有條件地使用新設置爲「今天」時代,而不是一個new Date()。新設置稱爲localToday

覆蓋$.datepicker._gotoToday$.datepicker._generateHTML這樣的:

$.datepicker._gotoToday = function(id) { 
    /* ... */ 
    var date = inst.settings.localToday || new Date() 
    /* ... */ 
} 

$.datepicker._generateHTML = function(inst) { 
    /* ... */ 
    tempDate = inst.settings.localToday || new Date() 
    /* ... */ 
} 

這裏有一個demo其中顯示了完整的代碼和用法:http://jsfiddle.net/NAzz7/5/

1

Jquery的日期選擇器defaultDate只設置您選擇日曆上的默認日期當你點擊你的領域時彈出。 如果您希望在用戶點擊字段之前將輸入的默認日期輸入到您的輸入中,那麼您應該在字段中輸入val()。 事情是這樣的:

$("#searchDateFrom").datepicker({ defaultDate: "-1y -1m -6d" }); 
$("#searchDateFrom").val((date.getMonth()) + '/' + (date.getDate() - 6) + '/' + (date.getFullYear() - 1)); 
0
$("#birthdate").datepicker("setDate", new Date(1985,01,01))