इनपुट फ़ील्ड पर JQuery UI डेटपिकर दिखाएँ क्लिक करें?

ठीक हो सकता है यह एक छोटी सी समस्या नहीं है, लेकिन मैं बहुत अगर किसी को भी इस पर किसी भी विचार को देखने के लिए इच्छुक हूँ:इनपुट फ़ील्ड पर JQuery UI डेटपिकर दिखाएँ क्लिक करें?

मैं JQuery UI का उपयोग कर रहा हूँ। मेरे पास <input id="#myfield" type="text"> फ़ील्ड है और मैं $('#myfield').datepicker() पर कॉल करता हूं। जब भी क्षेत्र फोकस हो जाता है तो डेटपिकर दिखाता है। लेकिन यह फ़ील्ड मेरे रूप में पहला है और लोड होने पर पहले से ही फोकस में है, इसलिए फ़ील्ड पर क्लिक करने से यह नहीं दिखता है। साथ ही, अगर मैं एएससी कुंजी के साथ डेटपिकर बंद करता हूं, तो मैं उसी कारण से क्षेत्र पर क्लिक करके इसे फिर से नहीं खोल सकता: यह पहले से ही फोकस में है।

मुझे पता है कि मैं पैरामीटर .datepicker({showOn: 'button'}) सेट कर सकता हूं लेकिन मुझे बटन नहीं चाहिए। फ़ील्ड फोकस होने पर डेटपिकर दिखाई देने का कोई तरीका है या फोकस में पहले से क्लिक किया गया है? मैंने पहले ही $('#myfield').click(function() { $(this).focus() }) की कोशिश की है और जब मैं इनपुट फ़ील्ड पर क्लिक करता हूं तो डेटपिकर सही तरीके से खुलता है, लेकिन फिर जब मैं कोई दिनांक चुनता हूं तो यह फ़ील्ड में दिखाई नहीं देता है।

स्रोत

2012-05-23 alexg

मैं काफी बटन की तरह, अपनी सुंदर आ गया है इसका उपयोग करने के लिए सामान्य, वास्तव में मैं इसका उपयोग करने का बुरा फैसला कहूंगा। – NimChimpsky

आम तौर पर मैं आपसे सहमत हूं। रोहन बुंचर के जवाब के नीचे मेरी टिप्पणी देखें कि मैं बटन क्यों नहीं चाहता हूं। – alexg

इस

<html> 
<head> 
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#date1').datepicker(); 

$('#date1').focus(function(){ 
    $('#date1').datepicker('show'); 
}); 

$('#date1').click(function(){ 
    $('#date1').datepicker('show'); 
}); 
//$('#ui-datepicker-div').show(); 
$('#date1').datepicker('show'); 
}); 
</script> 
</head> 
<body> 
<input type="text" name="date1" id='date1'> 
</body> 
</html>

स्रोत

2012-05-23 10:49:21

धन्यवाद, मुझे लगता है कि स्टार्टअप पर डेटपिकर खोलना समझ में आता है और यह आधा समस्या हल करता है। यह कैसे Esc कुंजी दबाने के बाद क्षेत्र पर क्लिक करके datepicker पुनः खोलने के लिए की समस्या का समाधान नहीं है, लेकिन मैं बेहतर वास्तविक कीड़े को सुलझाने के बजाय तुच्छ मुद्दों के साथ खेल के लिए मिलता था :) – alexg

@alexg मैं अद्यतन किया है कोड। इसे देखें साथी –

@RajanRawal: जवाब के लिए धन्यवाद बडी, मैं पिछले 3days –

इस समस्या अभ्यस्त आपके प्रश्न का उत्तर है, लेकिन एक काम के आसपास हो सकता है, दिनांक पिकर बटन नहीं होने की आपकी समस्या, दिनांक पिकर बटन वाले ... कि यदि कोई समझ में आता है से संबंधित है तो क्या होगा?

मुझे कोई समस्या थी जहां मैं बटन नहीं चाहता था क्योंकि उपयोगकर्ता मेरे फॉर्म/पेज के माध्यम से टैबबिंग करते थे, और मैं नहीं चाहता था कि बटन फोकस करे। (अजीब यूआई अनुभव)

है कि आपके मामला है और साथ ही ... आप हमेशा से ही अपना ध्यान केंद्रित निम्नलिखित .. (यह भी परोक्ष रूप से समस्या आप अब आ रही हैं, का समाधान होगा।)

करके हटा सकते हैं पृष्ठ पर प्रथम क्षेत्र एक यह भार बंद कर दिया, बटन के बिना होना चाहिए, और उपयोगकर्ता क्लिक पर ही खोला जा:

$('#field').datepicker({ 
     showOn: 'button', 
     buttonImage: "/image_path/image.png", 
}).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");

स्रोत

2012-05-23 10:48:12

धन्यवाद कि चालाक है। दरअसल कारण मैं नहीं चाहता कि बटन स्थिरता के लिए है। मेरे एप्लिकेशन में मैं भी तारीख कॉलम, जहां एक बटन बदसूरत लगेगा और कीमती स्क्रीन चौड़ाई को ले जाएगा के साथ एक jqGrid है, तो मैं ग्रिड के बाहर मेरा तिथि खाने ग्रिड के अंदर क्षेत्रों के लिए समान होना चाहता हूँ। हालांकि मैं आपका जवाब उतार रहा हूं। – alexg

मैं एक ऐसी ही परिदृश्य था की कोशिश करो। लेकिन यह एक बंद 'सर्चबार' घटक में था, इसलिए डिफ़ॉल्ट व्यवहार को बदलना एक विकल्प नहीं था। यहाँ मेरी workaround है:

$(document).ready(function() { 
     //getting the controls on the form context 
     var calendarios = $('.calendarBox', "#frmOccurrencesHistory"); 
     //set an invalid option - avoid open on focus and show the buttons 
     calendarios.datepicker("option", "showOn", "click"); 
     //handle click button 
     calendarios.each(function() { 
      $(this).click(function() { 
       $(this).datepicker('show'); 
      }); 
     }); 
    });

सुंदर नहीं है, सही नहीं, कैलेंडर पृष्ठ लोड होने की वहाँ एक फ्लैश, लेकिन यह है कि कितनी दूर मैं

स्रोत

2015-08-19 13:14:55 Alexandre

$("#datepicker").datepicker({ 
    dateFormat:'dd/M/yy', 
    minDate: 'now', 
    changeMonth:true, 
    changeYear:true, 
    showOn: "focus", 
    //buttonImage: "YourImage", 
    buttonImageOnly: true, 
    yearRange: "-100:+0", 
}); 

    $("datepicker").datepicker("option", "disabled", true);

स्रोत

2017-10-23 09:25:42 Girish

इनपुट फ़ील्ड पर JQuery UI डेटपिकर दिखाएँ क्लिक करें?

उत्तर

संबंधित मुद्दे