2012-09-17 4 views
12

उपयोगकर्ता को दिनांक चुनने के लिए jQuery UI datepicker का उपयोग करें। इसमें कुछ शॉर्टकट हैं ताकि इसे कीबोर्ड का उपयोग करके नियंत्रित किया जा सके:jQuery यूआई डेटपिकर: कीबोर्ड शॉर्टकट्स को कॉन्फ़िगर करें

page up/down  - previous/next month 
ctrl+page up/down - previous/next year 
ctrl+home   - current month or open when closed 
ctrl+left/right - previous/next day 
ctrl+up/down  - previous/next week 
enter    - accept the selected date 
ctrl+end   - close and erase the date 
escape   - close the datepicker without selection 

लेकिन ऐसा लगता है कि यह मेरे लिए अनुकूल नहीं है। मुझे यह नहीं पता था कि जब तक मैं इसे दस्तावेज़ में पढ़ता हूं तब तक कीबोर्ड के साथ दिनांक का चयन कैसे करें। मुझे लगता है कि केवल कुछ उपयोगकर्ताओं को पता चल जाएगा कि उन्हें दिनांक चुनने के लिए "CTRL + तीर कुंजी" दबाएं।

इसलिए, मैं कीबोर्ड शॉर्टकट को किसी अन्य के साथ बदलना चाहता हूं। विशेष रूप से मैं चाहता हूं कि उपयोगकर्ता को दिन और सप्ताह के बीच तीर कुंजियों के साथ नेविगेट करते समय "नियंत्रण" कुंजी दबाएं।

क्योंकि मुझे दस्तावेज़, I tried to achieve this aim using some custom javascript में इस बारे में कोई कॉन्फ़िगरेशन नहीं मिला, जहां मैं कीबोर्ड ईवेंट सुनता हूं और मैन्युअल रूप से दिनांक सेट करता हूं। लेकिन यह एक समस्या से दूसरे की ओर जाता है:

  • यह केवल अच्छा काम करता है के बाद पहली तारीख का चयन किया गया
  • यह दखल देती है जब उपयोगकर्ता का उपयोग करता है "Ctrl + तीर कुंजी" तीर कुंजी के साथ नेविगेट करने के बाद ही
  • इनपुट क्षेत्र में तारीख तुरंत अद्यतन किया जाता है जब datepicker के मूल कुंजीपटल नियंत्रण से "Ctrl + तीर कुंजी"
  • ब्राउज़र की अन्य शॉर्टकट की वजह से काम नहीं करते के साथ नेविगेट करने के विपरीत event.preventDefault()

मुझे पता है कि इन सभी समस्याओं को फिर से अतिरिक्त जावास्क्रिप्ट द्वारा हल किया जा सकता है, लेकिन अगर मैं इसे किसी भी तरह से कॉन्फ़िगर कर सकता हूं तो मैं इसे पसंद करूंगा।

क्या jQuery UI datepicker के शॉर्टकट को कॉन्फ़िगर करना संभव है?

+1

FWIW मुझे लगता है कि आपके कीबोर्ड शॉर्टकट वास्तव में निर्मित लोगों की तुलना में अधिक सहज हैं। –

उत्तर

6

यह डेटपिकर के माध्यम से कॉन्फ़िगर करने योग्य नहीं है। आपको _doKeyDown विधि source here बदलना होगा।

ऐसा करने का सबसे आसान तरीका विजेट का विस्तार करना होगा। यह कुछ इस तरह दिखेगा:

$.extend($.datepicker, { 
    _doKeyDown: function(event){ 
      //copy original source here with different 
      //values and conditions in the switch statement 
    } 
}); 
+0

आशाजनक लग रहा है, लेकिन [मैंने यह कोशिश की] (http://jsfiddle.net/vH5SX/2/) और यह मुझे "अनकॉट टाइप एरर: ऑब्जेक्ट फ़ंक्शन नहीं है" (Google क्रोम का उपयोग करके) देता है। मैं $ .widget फ़ंक्शन से परिचित नहीं हूं, मैं इस मामले में इसे सही तरीके से कैसे कॉल करूं? – Uooo

+1

अरे, क्षमा करें, मैं भूल गया कि डेटपिकर विजेट फैक्ट्री के माध्यम से विस्तारित नहीं किया जा सकता ... इसके बजाय बस विस्तार का उपयोग करें ... अपडेट किया गया http://jsfiddle.net/vH5SX/3/ – Nal

+0

यह काम करता है, धन्यवाद! – Uooo

0

आप जाँच कर सकते हैं इस ऐड-ऑन: http://hanshillen.github.io/jqtest/#goto_datepicker

अधिक उपयोग के विकल्पों के लिए

+2

केवल लिंक ही अच्छे नहीं हैं क्योंकि वे दूर जा सकते हैं और जवाब दूसरों के लिए बेकार है। कृपया उद्धरण के रूप में प्रासंगिक खंड शामिल करें। धन्यवाद। – Shawn

0

यदि यह Jquery date picker है तो डिफ़ॉल्ट रूप से यह इन सभी शॉर्टकट का समर्थन करेगा। एक मुद्दा हो सकता है, यानी Theme। आप Jquery साइट पर दिए गए CSS CDN का उपयोग कर सकते हैं। फिर, फोकस भी दिखाई देगा। जो पहुंच के लिए एक महान क्लिक है।

0

आप शॉर्टकट में से एक को बदलने के लिए चाहते हैं और jQuery ui पुस्तकालय, उपयोग को अद्यतन करने के मामले में भंडार से कोड मुकाबला पसंद नहीं है: इससे पहले कि आप _doKeyDown

var doKeyDown = $.datepicker._doKeyDown; 
$.extend($.datepicker, { 
    _doKeyDown: function(event){ 
     console.log(event.which); 
     if(event.which !== $.ui.keyCode.ENTER) { 
      doKeyDown(event); 
     } 
     else { 
      //do something else 
     } 
    } 
}); 

के संदर्भ रखें इसे ओवरराइट करें और इसे अन्य सभी शॉर्टकट्स के लिए कॉल करें।