आईओएस / एंड्रॉइड पर वेब-ऐप से मूल दिनांक पिकर को आमंत्रित करें

Question 1

मैं HTML5 का उपयोग करके विभिन्न प्लेटफार्मों पर एक मूल वेब-एप्लिकेशन चलाने के साथ सकारात्मकता का पता लगाने की कोशिश कर रहा हूं। वर्तमान में, एक <input type="date">क्षेत्र केवल एंड्रॉइड और आईओएस पर मानक सॉफ्ट कीबोर्ड खोलता है। मुझे लगता है कि भविष्य में मोबाइल ओएस के सॉफ्ट कीबोर्ड में डेट बीनने वाले और ऐसे शामिल होंगे - जैसे कि <select>आज के मूल चयन को आमंत्रित करता है।

चूंकि यह एंड्रॉइड या आईओएस पर लागू नहीं किया गया है, लेकिन मूल यूआई में लागू किया गया है, क्या वेब-ऐप के लिए मूल दिनांक पिकर को लागू करना संभव है, अर्थात जब क्लिक किया जाता है?

इससे jQuery मोबाइल और YUI जैसे जावास्क्रिप्ट पुस्तकालयों का उपयोग करना हमारे लिए संभव हो जाएगा।

यदि मेरा प्रश्न किसी भी तरह से अस्पष्ट है, तो कृपया मुझे बताएं। पहले ही, आपका बहुत धन्यवाद :-)

Question 2

कुछ वर्षों के बाद से कुछ उपकरण समर्थन करते हैं <input type="date">लेकिन अन्य नहीं करते हैं, इसलिए किसी को सावधान रहने की आवश्यकता है। 2012 के कुछ अवलोकन इस प्रकार हैं, जो आज भी मान्य हो सकते हैं:

type="date"उस विशेषता को सेट करके और उसके मूल्य को वापस पढ़कर पता लगाया जा सकता है। ब्राउजर / उपकरण जो इसका समर्थन नहीं करते हैं वे उस विशेषता को पढ़ने के लिए टाइप करने के लिए dateऔर वापस आने textपर ध्यान नहीं देंगे । वैकल्पिक रूप से, Modernizr का पता लगाने के लिए इस्तेमाल किया जा सकता है। खबरदार कि यह कुछ Android संस्करण के लिए जाँच करने के लिए पर्याप्त नहीं है; जैसे एंड्रॉइड 4.0.3 पर सैमसंग गैलेक्सी एस 2 समर्थन करता है type="date", लेकिन अधिक हाल ही में एंड्रॉइड 4.0.4 पर Google / सैमसंग नेक्सस एस नहीं करता है ।
मूल दिनांक पिकर के लिए तारीख निर्धारित करते समय, उस उपकरण का उपयोग करना सुनिश्चित करें जिसे डिवाइस पहचानता है। ऐसा नहीं करने पर, डिवाइस मौजूदा मूल्य को दिखाने का प्रयास करते समय खाली इनपुट फ़ील्ड के साथ एक को छोड़कर चुपचाप इसे अस्वीकार कर सकता है। एक Galaxy S2 पर दिनांक पिकर चल Android 4.0.3 शक्ति का उपयोग कर की तरह ही सेट <input>करने के लिए 2012-6-1जून के लिए 1। हालाँकि, जावास्क्रिप्ट से मान सेट करते समय, इसे अग्रणी शून्य की आवश्यकता होती है 2012-06-01:।
समर्थन नहीं करने वाले उपकरणों पर मूल दिनांक पिकर प्रदर्शित करने के लिए कॉर्डोवा (PhoneGap) जैसी चीजों का उपयोग करते समय type="date":
- अंतर्निहित समर्थन का ठीक से पता लगाना सुनिश्चित करें। 2012 में गैलेक्सी एस 2 पर एंड्रॉइड 4.0.3 चल रहा है, गलती से भी कॉर्डोवा एंड्रॉइड प्लगइन का उपयोग करने के परिणामस्वरूप दिनांक पिकर को लगातार दो बार दिखाया जाएगा: एक बार फिर अपनी पहली घटना में "सेट" पर क्लिक करने के बाद।
- जब एक ही पृष्ठ पर कई इनपुट होते हैं, तो कुछ डिवाइस "पिछले" और "अगले" को दूसरे फॉर्म फ़ील्ड में दिखाने के लिए दिखाते हैं। IOS 4 पर, यह onclickहैंडलर को ट्रिगर नहीं करता है और इसलिए उपयोगकर्ता को एक नियमित इनपुट देता है। onfocusप्लगइन को ट्रिगर करने के लिए उपयोग करना बेहतर काम करने लगा।
- IOS 4 पर, 2012 iOS प्लगइन का उपयोग onclickया onfocusट्रिगर करने के लिए, पहले नियमित रूप से कीबोर्ड शो किया गया था, जिसके बाद डेट पिकर को सबसे ऊपर रखा गया था। अगला, डेट पिकर का उपयोग करने के बाद, किसी को नियमित कीबोर्ड को बंद करने की आवश्यकता होती है। $(this).blur()आईओएस 4 के लिए तारीख पिकर को दिखाने से पहले फोकस हटाने के लिए उपयोग करने से मैंने परीक्षण किए गए अन्य उपकरणों को प्रभावित नहीं किया। लेकिन इसने आईओएस पर कीबोर्ड की कुछ तेज चमकती शुरुआत की, और चीजें पहले उपयोग पर और भी अधिक भ्रामक हो सकती हैं क्योंकि तब तारीख लेने वाला धीमा था। readonlyयदि कोई प्लगइन का उपयोग कर रहा था, तो इनपुट बनाकर नियमित कीबोर्ड को पूरी तरह से अक्षम कर सकता है , लेकिन उसी स्क्रीन पर अन्य इनपुट में टाइप करने पर "पिछले" और "अगले" बटन को अक्षम कर देता है। यह भी लगता है कि iOS 4 प्लगइन ने देशी डेट पिकर शो "रद्द" नहीं किया
- IOS 4 iPad (सिम्युलेटर) पर, 2012 में कॉर्डोवा प्लगइन सही ढंग से प्रस्तुत नहीं किया गया था, मूल रूप से उपयोगकर्ता को किसी तिथि को दर्ज करने या बदलने का कोई विकल्प नहीं दिया गया था। (हो सकता है कि आईओएस 4 किसी वेब दृश्य के शीर्ष पर अपनी मूल तिथि पिकर को अच्छी तरह से प्रस्तुत नहीं करता है, या हो सकता है कि मेरे वेब दृश्य के सीएसएस स्टाइल का कुछ प्रभाव हो, और निश्चित रूप से यह वास्तविक डिवाइस पर भिन्न हो सकता है: कृपया टिप्पणी करें या संपादित करें!)
- हालाँकि, 2012 में फिर से, एंड्रॉइड डेट पिकर प्लगइन ने iOS प्लगइन के समान जावास्क्रिप्ट एपीआई का उपयोग करने की कोशिश की, और इसके उदाहरण का उपयोग किया allowOldDates, एंड्रॉइड संस्करण ने वास्तव में इसका समर्थन नहीं किया। इसके अलावा, इसने नई तारीख वापस कर दी, 2012/7/2जबकि iOS संस्करण वापस आ गया Mon Jul 02 2012 00:00:00 GMT+0200 (CEST)।
<input type="date">समर्थित होने पर भी चीजें गड़बड़ दिख सकती हैं:
- IOS 5 अच्छी तरह 2012-06-01से एक स्थानीय स्वरूप में प्रदर्शित करता है, जैसे ( 1 Jun. 2012या June 1, 2012यहां तक कि अद्यतन है कि तुरंत जबकि अभी भी तारीख पिकर का संचालन)। हालाँकि, एंड्रॉइड 4.0.3 पर चलने वाला गैलेक्सी एस 2 बदसूरत दिखाता है2012-6-1 या 2012-06-01, कोई फर्क नहीं पड़ता कि किस लोकेल का उपयोग किया जाता है।
- iPad (सिम्युलेटर) पर iOS 5 कीबोर्ड को नहीं छुपाता है जब वह तारीख इनपुट को छूते समय पहले से ही दिखाई देता है, या किसी अन्य इनपुट में "पिछले" या "अगला" का उपयोग करते समय। फिर यह एक साथ इनपुट और कीबोर्ड के नीचे की तारीख पिकर दिखाता है , और लगता है कि दोनों में से किसी भी इनपुट की अनुमति देता है। हालाँकि, यह दृश्यमान मान को परिवर्तित नहीं करता है, लेकिन कीबोर्ड इनपुट वास्तव में अनदेखा है। (जब मूल्य वापस पढ़ रहा हो, या दिनांक पिकर को फिर से इनवॉइस करते समय दिखाया गया हो।) जब कीबोर्ड को अभी तक नहीं दिखाया गया है, तो दिनांक इनपुट को छूने से केवल दिनांक पिकर दिखाई देता है, न कि कीबोर्ड।(यह वास्तविक डिवाइस पर भिन्न हो सकता है, कृपया टिप्पणी करें या संपादित करें!)
- उपकरण इनपुट क्षेत्र में एक कर्सर दिखा सकते हैं, और एक लंबे प्रेस क्लिपबोर्ड विकल्पों को ट्रिगर कर सकते हैं, संभवतः नियमित कीबोर्ड भी दिखा सकते हैं। क्लिक करने पर, कुछ डिवाइस तारीख बीनने के लिए बदलने से पहले एक विभाजित सेकंड के लिए नियमित कीबोर्ड भी दिखा सकते हैं।

Question 3

iOS 5 अब बेहतर HTML5 का समर्थन करता है। अपने वेब में करते हैं

<input type="date" name="date" />

4.0 के रूप में Android में इस प्रकार के देशी मेनू समर्थन का अभाव है।

Question 4

iOS5 के पास इसके लिए ( संदर्भ ) समर्थन है । यदि आप मूल तिथि पिकर को आमंत्रित करना चाहते हैं, तो आपके पास PhoneGap के साथ एक विकल्प हो सकता है (यह स्वयं का परीक्षण नहीं किया है)।

Question 5

Mobiscroll को एक कोशिश दें । स्पर्श उपकरणों पर बातचीत के लिए विशेष रूप से स्कोरर शैली की तारीख और समय लेने वाला बनाया गया था। यह बहुत लचीला है, और आसानी से अनुकूलन योग्य है। यह iOS / Android थीम के साथ आता है।

Question 6

मेरा जवाब अति-सरलीकृत है। यदि आप क्रॉस-प्लेटफ़ॉर्म पर काम करने वाले सरल कोड लिखना पसंद करते हैं, तो उपयोगकर्ता से एक तिथि पूछने के लिए window.prompt विधि का उपयोग करें। स्पष्ट रूप से आपको एक रेगेक्स के साथ मान्य करने की आवश्यकता है और फिर दिनांक ऑब्जेक्ट बनाएं।

function onInputClick(e){
var r = window.prompt("Give me a date (YYYY-MM-DD)", "2014-01-01");
if(/[\d]{4}-[\d]{1,2}-[\d]{1,2}/.test(r)){
    //date ok
    e.value=r;
    var split=e.value.split("-");
    var date=new Date(parseInt(split[0]),parseInt(split[1])-1,parseInt(split[2]));
}else{
    alert("Invalid date. Try again.");
}
}

आप में HTML:

<input type="text" onclick="onInputClick(this)" value="2014-01-01">

Question 7

आप Trigger.io के UI का उपयोग कर सकते हैं रेगुलर HTML5 इनपुट के साथ देशी Android दिनांक / समय पिकर का उपयोग करने मॉड्यूल का उपयोग कर सकते हैं। ऐसा करने के लिए समग्र रूपरेखा का उपयोग करने की आवश्यकता होती है (हालांकि यह एक नियमित मोबाइल वेब पेज के रूप में काम नहीं करेगा)।

आप इस ब्लॉग पोस्ट में स्क्रीनशॉट से पहले और बाद में देख सकते हैं: दिनांक समय पिकर

Question 8

HTML में:

  <form id="my_form"><input id="my_field" type="date" /></form>

जावास्क्रिप्ट में

   // test and transform if needed
    if($('#my_field').attr('type') === 'text'){
        $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd');  
    };

    // check
    if($('#my_form')[0].elements[0].value.search(/(19[0-9][0-9]|20[0-1][0-5])[- \-.](0[1-9]|1[012])[- \-.](0[1-9]|[12][0-9]|3[01])$/i) === 0){
        $('#my_field').removeClass('bad');
    } else {
        $('#my_field').addClass('bad');
    };

स्निपेट का विस्तार करें

Question 9

अपने फार्म में तत्वों का उपयोग करें input type="time"। यह आपको डेटा पिकर लाइब्रेरी का उपयोग करने की कोशिश करने के सभी झंझटों से बचाएगा।