jquery मोबाइल में डेटपिकर डुप्लिकेट है जब दूसरे पृष्ठ में जोड़ा जाता है

मुझे मोबाइल ऐप में डेटपिकर उपयोग के साथ कुछ मदद की आवश्यकता है।jquery मोबाइल में डेटपिकर डुप्लिकेट है जब दूसरे पृष्ठ में जोड़ा जाता है

मैं अपने ऐप में jQuery UI डेटपिकर का उपयोग कर रहा हूं। लेकिन जब मैं इसे दूसरे पृष्ठ में डालता हूं तो डेटपिकर दो बार (डुप्लिकेट) दिखाता है। हालांकि जब मैं पहले पेज में डेटपिकर डालता हूं, तो ठीक दिखाया जाता है।

यह एक उदाहरण है, यदि आप इसे चलाते हैं तो आप देख सकते हैं कि डेटपिकर दूसरे पृष्ठ में डुप्लिकेट है।

<!DOCTYPE html> 
<html> 
<head> 
    <title>Datepicker Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/> 
    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css" /> 
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script> 
    <script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script> 
    <script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
</head> 
<body> 

<!-- Start of first page --> 
<div data-role="page" id="firstPage"> 
    <div data-role="header"> 
     <h1>First page</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p><a href="#secondPage">Next page with a Datepicker</a></p>  

    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 

</div><!-- /page --> 

<!-- Start of second page --> 
<div data-role="page" id="secondPage"> 
    <div data-role="header"> 
     <h1>Second page</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <label for="date">Date Input:</label> 
     <input type="date" name="date" id="date" value="" /> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /header --> 
</div><!-- /page --> 

</body> 
</html>

अग्रिम में मेरी सहायता के लिए धन्यवाद।

स्रोत

2011-02-09 Yaz

ईमानदारी से jQuery मोबाइल बहुत प्रायोगिक परियोजना है और अभी भी कई बग हो –

यह एक जवाब नहीं है, लेकिन मदद करनी चाहिए - आप जो कुछ भी करता है, तो आप हर html फ़ाइल में एक 'page' div रखने यह बेहतर काम करेगा है। विजेट्स के साथ समस्याएं हैं और बहुसंख्यक एचटीएमएल फाइलों को जेक्यूएम अल्फा 2 और अल्फा 3 के बीच अलग-अलग संभाला जाता है - यह मेरे कस्टम विजेट भी तोड़ देता है। – naugtur

इसके अलावा मुझे एक छिपी हुई jQuery lib मिली: http://jquerymobile.com/test/js/ जो jQuery UI विजेट है। पता नहीं है कि यह –

अंत में हमें अपने प्रोजेक्ट मैनेजर में से एक का समाधान मिला। हमें jquery.ui.datepicker.mobile.js में एक काम करना है।

नीचे दिए गए कोड का उपयोग कर निम्न विधि को बदलें।

$(".ui-page").live("pagecreate", function(){  
    $("input[type='date'], input[data-type='date']").each(function(){ 
     if ($(this).hasClass("hasDatepicker") == false) { 
      $(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true })); 
      $(this).addClass("hasDatepicker"); 
     } 
    }); 
});

उपर्युक्त फ़ंक्शन पेजक्रेट प्रत्येक बार पृष्ठ लोड को कॉल करेगा। अगले पृष्ठ पर नेविगेट करते समय उसी दिनांक पिकर सृजन में निष्पादन निष्पादित होगा। इसलिए हमने पेज लोड के दौरान केवल एक बार इस लाइन को निष्पादित करने के लिए एक शर्त जोड़ा है। अब यह ठीक काम कर रहा है।

स्रोत

2011-02-10 13:56:36 ramkumar

धन्यवाद रामकुमार! – Yaz

धन्यवाद यह मल्टी-डेटपिकर लेआउट समस्या तय करता है, लेकिन फिर भी फोकस पर छिपाना/दिखाना चाहता है: http://stackoverflow.com/questions/5005565/multiple-calendars-displayed-or-value-selected-not-displaying- ठीक से –

हम इस काम कर मिल गया लेकिन यह कुछ faffing ले लिया:

नए मोबाइल datepicker js में

, updateDatepicker() फ़ंक्शन के लिए कदम ओवरराइड fn.datepicker समारोह के दायरे से बाहर तो यह कहीं भी कहा जा सकता है jquery.ui.datepicker.js विज्ञापन में

समारोह updateDatepicker() {

$(".ui-datepicker-header"/* , dp */).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); 
    $(".ui-datepicker-prev, .ui-datepicker-next"/* , dp */).attr("href", "#"); 
    $(".ui-datepicker-prev"/* , dp */).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true}); 
    $(".ui-datepicker-next"/* , dp */).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true}); 
    $(".ui-datepicker-calendar th"/* , dp */).addClass("ui-bar-c"); 
    $(".ui-datepicker-calendar td"/* , dp */).addClass("ui-body-c"); 
    $(".ui-datepicker-calendar a"/* , dp */).buttonMarkup({corners: false, shadow: false}); 
    $(".ui-datepicker-calendar a.ui-state-active"/* , dp */).addClass("ui-btn-active"); // selected date 
    $(".ui-datepicker-calendar a.ui-state-highlight"/* , dp */).addClass("ui-btn-up-e"); // today"s date 
     $(".ui-datepicker-calendar .ui-btn"/* , dp */).each(function(){ 
     var el = $(this); 
     // remove extra button markup - necessary for date value to be interpreted correctly 
     el.html(el.find(".ui-btn-text").text()); 
     }); 
};

: और इसे संशोधित तो जैसे सभी 'डी पी' scoping दूर करने के लिए अद्यतन करने के लिए एक कॉल Datepicker(); .ui-datepicker {अतिप्रवाह:: _updateDatepicker समारोह
मोबाइल datepicker सीएसएस में
के अंत में, परिवर्तन ui-datepicker वर्ग की तरह लग रहे करने के लिए दिखाई दे; मार्जिन: 0; अधिकतम चौड़ाई: 500 पीएक्स; न्यूनतम चौड़ाई: 300 पीएक्स; चौड़ाई: 50%; }
परिवर्तन datepicker बाँध समारोह इस तरह देखने के लिए:

// बाँध स्वचालित रूप से तिथि आदानों को बढ़ाने के लिए
$ (".ui-पृष्ठ") .live ("pagecreate", समारोह pagecreate को () {
$ ("इनपुट [प्रकार = 'दिनांक'], इनपुट [डेटा-प्रकार = 'दिनांक']")। (कार्य) ( $ (यह) .डेटपिकर ({altField: "#" + $ (यह) .attr ("id"), showOtherMonths: true}); }); });

स्रोत

2011-02-23 11:36:47

पुरानी पोस्ट, लेकिन अभी भी स्पष्ट रूप से प्रासंगिक है।

मुझे एक ही समस्या का सामना करना पड़ा। मैंने जो किया है वह यहाँ है। समाधान हैडपिकर क्लास को छिपाना था, और मुझे इच्छित विशिष्ट डेटपिकर आईडी दिखाएं।

एचटीएमएल में, मैं दिनांक पिकर एक div में एक आईडी के साथ रैप:

<div id="pick"><input data-role="date"></div>

js में, मैं पहले hadDatepicker वर्ग, छिपाने फिर एक मैं के बारे में परवाह दिखाते हैं।

$(document).on("pageinit", "#mypage", function() { 
    $(".hasDatepicker").hide(); 
    $("#pick").datepicker({}); 
    $("#pick").show(); 
});

एक और संभावित समाधान केवल .hasDatepicker के दूसरे भाग को छिपाना है। मैंने इस विधि का उपयोग नहीं किया, क्योंकि समय एक मुद्दा है।

$(".hasDatepicker:eq(1)").hide();

स्रोत

2015-07-18 21:32:50

jquery मोबाइल में डेटपिकर डुप्लिकेट है जब दूसरे पृष्ठ में जोड़ा जाता है

उत्तर

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