2013-01-04 16 views
11

मेरे पास वर्तमान में दो इनपुट के साथ एक संवाद बॉक्स है (.datepicker() का उपयोग कर दो इनपुट के साथ)। जब मैं संवाद बॉक्स खोलता हूं, पहला इनपुट फोकस बन जाता है और पहला डेटपिकर स्वचालित रूप से प्रकट होता है। मैंने div को छिपाने और इनपुट को धुंधला करने का प्रयास किया है, लेकिन इससे डेटपिकर फोकस पर नहीं दिखता है।jQueryUI संवाद/डेटपिकर ऑटो-ओपन

आदर्श रूप में, मैं निम्नलिखित करने के लिए सक्षम होना चाहते हैं:

  • ओपन (कोई datepickers दिखा के साथ) संवाद बॉक्स।
  • पहले इनपुट में क्लिक करें और डेटपिकर शो रखें।

यहाँ मेरे वर्तमान कोड है:

JAVASCRIPT

:

$("#to").datepicker({ 
     onClose: function (selectedDate) { 
     $("#from").datepicker("option", "minDate", selectedDate); 
     } 
    }); 

    $("#from").datepicker({ 
    onClose: function (selectedDate) {        
     $("#to").datepicker("option", "maxDate", selectedDate); 
    } 
}); 


$("#settingsDialog").dialog({ 
    autoOpen: false, 
    open: function (event, ui) { 
        if ($(".ui-datepicker").is(":visible")) 
         $(".ui-datepicker").hide(); 

        $("#to").blur(); 
        $this.focus().click(); 
       }, 
    close: function() { 
     $(this).dialog("close"); 
    } 
}); 

मैं भी एक jsfiddle डेमो बना दिया है: http://jsfiddle.net/ARnee/19/

मैं एक समाधान के लिए ऑनलाइन खोज की है, और इसी तरह पाया questions , लेकिन कोई भी मदद करने के लिए प्रतीत होता है। क्या कोई मेरी सहायता कर सकता है ?!

संपादित करें:

मैं जिस ब्राउज़र का उपयोग कर रहा हूं वह क्रोम है।

उत्तर

7

संवाद कोई ऊंचाई इतनी नहीं देखा जाएगा है कि में एक डमी इनपुट छड़ी कर सकते हैं। यह datepicker क्षेत्रों से पहले जगह

<input style="height:0px; border:none"/> 

डेमो: http://jsfiddle.net/ARnee/20/

+0

आपकी मदद के लिए धन्यवाद! यह इस दृष्टिकोण का एक सरल तरीका था! – Dom

+0

धन्यवाद। मैं 'पृष्ठभूमि: पारदर्शी' भी सेट करता हूं, क्योंकि फ़ॉर्म में अलग रंग होता है। –

1

तुम इतनी तरह संवाद के खुले पर datepickers बना सकते हैं,:

$("#settingsDialog").dialog({ 
    autoOpen: false, 
    open: function (event, ui) { 
        //if ($(".ui-datepicker").is(":visible")) 
        // $(".ui-datepicker").hide(); 

        $("#to").blur(); 
       }, 
    close: function() { 
     $("#to").datepicker("destroy"); 
     $("#from").datepicker("destroy"); 
     $(this).dialog("close"); 
    } 
}); 



$("#b1").click(function(){ 
     $("#settingsDialog").dialog("open"); 
     $("#to").datepicker({ 
     onClose: function (selectedDate) { 
      $("#from").datepicker("option", "minDate", selectedDate); 
     } 
     }); 

     $("#from").datepicker({ 
     onClose: function (selectedDate) { 
      $("#to").datepicker("option", "maxDate", selectedDate); 
     } 
     }); 
}); 

+0

भी 'मामले संवाद में करीब पर destroy' का उपयोग करना चाहिए फिर से – charlietfl

+0

@charlietfl प्रयोग किया जाता है - उफ़, तो आप कर रहे हैं सही। संपादित। – mccannf

+0

उसने ऐसा किया! धन्यवाद! – Dom

0
$(document).ready(function(){ 



$("#settingsDialog").dialog({ 
    autoOpen: false, 
    open: function (event, ui) { 
     $("#to").datepicker({ 
     onClose: function (selectedDate) { 
      $("#from").datepicker("option", "minDate", selectedDate); 
     } 
    }); 

    $("#from").datepicker({ 
     onClose: function (selectedDate) {       $("#to").datepicker("option", "maxDate", selectedDate); 
    } 
}); 
        if ($(".ui-datepicker").is(":visible")) 
         $(".ui-datepicker").hide(); 

        $("#to").blur(); 
        $this.focus().click(); 
       }, 
    close: function() { 
     $("#to").datepicker("destroy"); 
     $("#from").datepicker("destroy"); 
     $(this).dialog("close"); 
    } 
}); 



    $("#b1").click(function(){ 
     $("#settingsDialog").dialog("open"); 
    }); 

}); 
​ 
+0

दुर्भाग्य से, यह केवल प्रारंभिक संवाद पर ही काम करता है। यदि आप इसे बंद करते हैं और इसे फिर से खोलते हैं, तो समस्या अभी भी बनी रहती है। – Dom

+0

आप ठीक हैं mccannf ने कहा कि डेटपिकर के लिए उपयोग को नष्ट करने के लिए इसे – Madi

13

tabindex -1 datepicker युक्त आदानों पर विशेषता सेट करके देखें।

<input type="text" id="to" tabindex="-1" /> 

संपादित करें:

<input id="to" type="text" tabindex="-1" /> 
<input id="from" type="text" tabindex="-1" /> 

डेमो: http://jsfiddle.net/ARnee/32/

+1

+1 हल करें - इसके लिए काम करने के लिए, आपको इसे 'इनपुट' दोनों पर लागू करने की आवश्यकता होगी। परवाह किए बिना, बहुत अच्छा लगता है! – Dom

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