2010-09-30 10 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

+1

आपकी समस्या क्या है? आपका कोड ठीक काम करता है। [इसे यहाँ देख] (http://jsfiddle.net/MNBjS/) – Reigel

उत्तर

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

एक दिनांक वस्तु के माध्यम से या में एक स्ट्रिंग के रूप में एक वास्तविक तिथि निर्दिष्ट करें या तो वर्तमान दिनांक Format, या दिनों से आज (जैसे +7) या एक स्ट्रिंग मूल्यों और अवधि (वर्षों के लिए 'वाई', 'एम' महीनों के लिए, 'डब्ल्यू' सप्ताहों के लिए, 'डी' के लिए दिन, उदाहरण के लिए '+ 1 एम + 7 डी'), या शून्य के लिए आज ।

+1

मैं jQuery यूआई 1.7.3 में ओपी लिए एक समान समस्या हो रही थी - हालांकि 1.8.4 में यह ठीक था (कारण 1.7.3 चलाने के लिए किया था jQuery 1.3 चल रहे विरासत प्रणाली के लिए।2) - डेट ऑब्जेक्ट का उपयोग करके यह सब ठीक हो गया। – HorusKol

+0

उत्तर के लिए बहुत धन्यवाद @ कोडसथुथ। इसने मुझे बहुत मदद की! –

+1

ईश्वर, मैं वास्तव में जावास्क्रिप्ट के लिए "00" = जनवरी से नफरत करता हूं। सौभाग्य से मैं अपनी तारीख वस्तुओं पर टिप्पणी करता हूं हर बार जब मैं इसे किसी भी भ्रम से बचने के लिए इस तरह घोषित करता हूं ... – Nelson

13

आप नीचे दिए गए कोड के साथ प्रयास कर सकते हैं।

यह डिफ़ॉल्ट तिथि उस तारीख बन जाएगा जो आप खोज रहे हैं।

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

पूर्ण शून्य में पूर्ण शून्य की अनुमति नहीं है – Christian

11

कि देखकर:

पहले खोलने पर उजागर करने के लिए करता है, तो क्षेत्र को खाली है तिथि निर्धारित करें। किसी दिनांक ऑब्जेक्ट के माध्यम से या वर्तमान दिनांक फर्मेट में स्ट्रिंग के रूप में या आज से कई दिनों (जैसे +7) या मानों और अवधिओं की एक स्ट्रिंग के रूप में वास्तविक तिथि निर्दिष्ट करें (वर्षों के लिए 'y', महीनों के लिए 'm', सप्ताह के लिए 'डब्ल्यू', दिनों के लिए 'डी', उदाहरण के लिए '+ 1 एम + 7 डी'), या आज के लिए शून्य।

वर्तमान DateFormat मान्यता प्राप्त नहीं है, तो आप अभी भी दिनांक वस्तु new Date(year, month, day)

का उपयोग कर अपने उदाहरण में उपयोग कर सकते हैं, इस काम करना चाहिए (मैं इसे परीक्षण नहीं किया है):

<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 कक्षा का उपयोग करके उपयोगकर्ता की स्थानीय तिथि को हमेशा हाइलाइट करने के लिए कोड किया गया है। इसे बदलने के लिए कोई अंतर्निहित विकल्प नहीं है।

.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-state-default मैच के लिए उदाहरण के लिए है गतिशील विषयों का उपयोग कर रहे हैं, या यदि आपका इरादा एक अलग दिन को हाइलाइट करना है (उदाहरण के लिए, "आज" क्लाइंट के बजाए आपके सर्वर की घड़ी पर आधारित होना चाहिए)।

एक वैकल्पिक तरीका डेटपिकर प्रोटोटाइप को ओवरराइड करना है जो वर्तमान दिन को हाइलाइट करने के लिए ज़िम्मेदार है।

यह मानते हुए कि आप यूआई जावास्क्रिप्ट, निम्नलिखित स्निपेट इन चिंताओं को दूर कर सकते हैं की एक कम से कम संस्करण का उपयोग कर रहे हैं।


अपने लक्ष्य वर्तमान दिन पूरी तरह उजागर करने को रोकने के लिए है:

// 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() ? '' : '') + [...] 

अपने लक्ष्य को "आज" के datepicker की परिभाषा को बदलने के लिए है, तो:

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

रहे हैं:

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(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

धन्यवाद! हो सकता है कि ओपी की आवश्यकता न हो, लेकिन यह वही है जो मैं कर रहा हूं। – Eterm

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 datepicker तरीकों अधिरोहित गए सशर्त एक new Date() के बजाय "आज" तिथि के लिए एक नई सेटिंग का उपयोग करने के लिए चयनित जवाब देने के लिए एक छोटा सा ट्वीक। नई सेटिंग को localToday कहा जाता है।

अवहेलना $.datepicker._gotoToday और $.datepicker._generateHTML इस तरह: http://jsfiddle.net/NAzz7/5/

1

Jquery Datepicker defaultDate केवल डिफ़ॉल्ट दिनांक कि आप कैलेंडर पर चुना सेट:

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

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

यहाँ एक demo जो दिखाता है पूर्ण कोड और उपयोग है जब आप अपने क्षेत्र पर क्लिक करते हैं तो पॉप अप होता है। आप डिफ़ॉल्ट दिनांक अपने इनपुट पर प्रकट करने से पहले उपयोगकर्ता क्षेत्र आप अपने क्षेत्र के लिए एक वैल() देना चाहिए पर क्लिक करता है चाहते हैं। कुछ इस तरह:

$("#searchDateFrom").datepicker({ defaultDate: "-1y -1m -6d" }); 
$("#searchDateFrom").val((date.getMonth()) + '/' + (date.getDate() - 6) + '/' + (date.getFullYear() - 1));