दिलचस्प पोस्ट
आईओएस में वर्तमान डिवाइस भाषा प्राप्त करना? सीएसएस के साथ आनुपातिक छवि का आकार बदलें? आकार-सीमित कतार जो जावा में अंतिम एन तत्व रखता है क्लास पदानुक्रम के लिए ओवरलोड ऑपरेटर == का सही तरीका क्या है? UIWebView की सभी कुकीज़ कैसे हटाएं? क्या सी / सी ++ में एक प्रकार का डाली है? कैसे सी # खिड़कियों के आवेदन में रूपों के बीच मूल्यों को पारित करने के लिए? एक निर्भरता संपत्ति क्या है? विज़ुअल स्टूडियो 2012 में मैक्रोज़ के लिए वैकल्पिक जावा में, मैं कैसे जांचूं अगर कोई स्ट्रिंग में कोई सबस्ट्रिंग है (मामले की अनदेखी)? आकार का एक्स (x + +) एक्स क्यों नहीं बढ़ाता? C ++ फ़ंक्शन से एकाधिक मान लौटाना जावास्क्रिप्ट में कंप्यूट किए गए फ़ॉन्ट-परिवार प्राप्त करें एएसपी.नेट एमवीसी में ड्रॉपडाउन लिस्ट का उपयोग करने के सर्वश्रेष्ठ प्रोग्रामिंग अभ्यास एंड्रॉइड: पूरे एप्लिकेशन को रनटाइम नहीं के लिए कस्टम फ़ॉन्ट सेट करना चाहते हैं

html5 समय इनपुट 12 घंटे दिखाता है

मैं html type=time 5 इनपुट तत्व का उपयोग type=time साथ कर रहा हूँ समस्या यह है कि 12 hours साथ समय दिखाता है लेकिन मैं इसे 24 hours में दिखाना चाहता हूं। मैं इसे 24 घंटे कैसे कर सकता हूं? यहां मेरा इनपुट फ़ील्ड है

 <input type="time" name="time" placeholder="hrs:mins" pattern="^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" class="inputs time" required> 

डेमो

यहाँ jsfiddle है

वेब के समाधान से एकत्रित समाधान "html5 समय इनपुट 12 घंटे दिखाता है"

HTML5 समय इनपुट

यह एक तारीख / समय से संबंधित प्रकार का सरलतम है, जिससे उपयोगकर्ता 24 घंटों की घड़ी , कोई एएम या प्रधानमंत्री नहीं चुन सकता है । दिया गया मूल्य घंटों है: मिनट जो 14:30 जैसी कुछ दिखाई देगा।

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

यह सुविधा अभी भी मसौदे में है प्रत्येक ब्राउज़र इसे अलग तरह से दिखाता है

– ओपेरा (प्रेस्टो इंजन) इसे सही तरीके से दिखाता है
– क्रोम (वेबकिट इंजन) इसे एएम / पीएम में दिखाता है।
– फ़ायरफ़ॉक्स (गीको इंजन) कुछ भी नहीं दिखाता है, लेकिन पुष्टि करता है।
– एज एक popover प्रकार विंडो में सभी आवश्यक मान दिखाती है

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

एचटीएमएल 5 ड्राफ्ट्स द्वारा, input type=time दिन इनपुट के समय के लिए एक नियंत्रण बनाता है, जो "उपयोगकर्ता की पसंदीदा प्रस्तुति" का उपयोग करके कार्यान्वित होने की उम्मीद है। लेकिन यह वास्तव में विजेट का उपयोग करने का अर्थ है, जहां समय प्रस्तुति ब्राउज़र के लोकल के नियमों का पालन करती है । आस-पास की सामग्री की भाषा के स्वतंत्र रूप से, प्रस्तुति ब्राउज़र की भाषा, अंतर्निहित ऑपरेटिंग सिस्टम की भाषा, या सिस्टम-वाइड लोकेल सेटिंग्स (ब्राउज़र के आधार पर) से भिन्न होती है। उदाहरण के लिए, क्रोम के फ़िनिश-भाषा संस्करण का उपयोग करते हुए, मैं मानक 24 घंटे की घड़ी का उपयोग करते हुए विजेट को देखता हूं। आपका लाभ अलग-अलग होगा

इस प्रकार, input type=time स्थानीयकरण के विचार पर आधारित होते हैं जो इसे पृष्ठ लेखक के हाथों से बाहर ले जाता है। यह जानबूझकर है; समस्या एचटीएमएल 5 चर्चाओं में कई बार बढ़ी है, उसी परिणाम के साथ: कोई परिवर्तन नहीं (संभवत: टेक्स्ट में स्पष्टीकरण जोड़े जाने के अलावा, इस व्यवहार को इरादा के रूप में वर्णित किया गया है।)

ध्यान दें कि input type=time में pattern और placeholder विशेषताओं की अनुमति नहीं है और placeholder="hrs:mins" , यदि इसे लागू किया गया है, तो संभवतः भ्रामक हो जाएगा। यह काफी संभव है कि उपयोगकर्ता को 12.30 (एक अवधि के साथ) टाइप करना होगा और 12:30 नहीं, जब ब्राउज़र लोकेल समय के एक विभाजक के रूप में "।" का उपयोग करता है

मेरा निष्कर्ष यह है कि आपको input type=text प्रयोग करना चाहिए, pattern विशेषता के साथ और कुछ जावास्क्रिप्ट के साथ जो ब्राउज़रों पर शुद्धता के लिए इनपुट की जांच करता है जो कि pattern विशेषता का समर्थन मूल रूप से नहीं करते हैं

यह आपके स्थानीय सिस्टम समय सेटिंग्स पर निर्भर करता है, 24 घंटों के बाद यह आपको 24 घंटे का समय दिखाएगा

इस प्रकार का समर्थन अभी भी बहुत खराब है। ओपेरा इसे आप जिस तरीके से चाहते हैं उसे दिखाता है क्रोम 23 सेकंड और एएम / पीएम को 24 संस्करणों में दिखाता है (इस समय में देव शाखा) यह सेकंड से छुटकारा पाता है (यदि संभव हो), लेकिन एएम / पीएम के बारे में कोई जानकारी नहीं है
यह नहीं चाहता है कि आप संभवत: चाहते हों, लेकिन इस समय एकमात्र विकल्प जो मैं अपना समय पिकर प्रारूप हासिल करना चाहता हूं, वह जावास्क्रिप्ट का उपयोग है

यह वेब ब्राउज़र शुरू होने पर उपयोगकर्ता के ऑपरेटिंग सिस्टम के समय प्रारूप पर निर्भर करता है।

इसलिए:

  • यदि आपके कंप्यूटर की प्रीफ़ेस 24-घंटे की घड़ी का उपयोग करने के लिए तैयार हैं, तो ब्राउज़र <input type="time"> तत्व को- --:-- (समय सीमा: 00: 00-23: 59) प्रस्तुत करेगा।
  • यदि आप 12-घंटे का उपयोग करने के लिए अपने कंप्यूटर के सर्स्ट प्रीफ़ेज़ को बदलते हैं, तो आउटपुट तब तक नहीं बदलेगा जब तक आप बाहर नहीं निकलते और ब्राउजर को लॉन्च कर देते हैं। तब यह बदल जाएगा --:-- -- (समय सीमा: 12:00 पूर्वाह्न – 11: 30 अपराह्न)

और (इस लेखन के रूप में), ब्राउज़र समर्थन केवल 75% ( caniuse ) है। याय: एज, क्रोम, ओपेरा, एंड्रॉइड बू: आईई, फ़ायरफ़ॉक्स, सफारी)

HTML केवल input type="time" प्रदान करते हैं यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो आप टाइमपेक्कर का उपयोग कर सकते हैं आप इस यूआरएल http://jdewit.github.io/bootstrap-timepicker से कोड प्राप्त कर सकते हैं यह आपकी मदद करेगा

यदि आप एक छोटे से घटक का उपयोग करने में सक्षम / तैयार हैं तो मैंने यह टाइम्पिकर- https://github.com/jonataswalker/timepicker.js- ने अपनी स्वयं की आवश्यकताओं के लिए लिखा था।

उपयोग इस तरह है:

 var timepicker = new TimePicker('time', { lang: 'en', theme: 'dark' }); var input = document.getElementById('time'); timepicker.on('change', function(evt) { var value = (evt.hour || '00') + ':' + (evt.minute || '00'); evt.element.value = value; }); 
 body { font: 1.2em/1.3 sans-serif; color: #222; font-weight: 400; padding: 5px; margin: 0; background: linear-gradient(#efefef, #999) fixed; } input { padding: 5px 0; font-size: 1.5em; font-family: inherit; width: 100px; } 
 <script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script> <link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/> <div> <input type="text" id="time" placeholder="Time"> </div> 

भले ही आपको एचएच: एमएम एएम / पीएम प्रारूप में समय लगता है, बैकएंड पर यह 24 घंटे के प्रारूप में भी काम करता है, आप इसे देखने के लिए कुछ मूल जावास्क्रिप्ट का उपयोग करने की कोशिश कर सकते हैं।

आप इसे html पक्ष के लिए आज़मा सकते हैं

 <label for="appointment-time">Choose Time</label> <input class="form-control" type="time" ng-model="time" ng-change="ChangeTime()" /> <label class="form-control" >{{displayTime}}</label> 

जावास्क्रिप्ट साइड

 function addMinutes(time/*"hh:mm"*/, minsToAdd/*"N"*/) { function z(n) { return (n<10? '0':'') + n; } var bits = time.split(':'); var mins = bits[0]*60 + (+bits[1]) + (+minsToAdd); return z(mins%(24*60)/60 | 0) + ':' + z(mins%60); } $scope.ChangeTime=function() { var d = new Date($scope.time); var hours=d.getHours(); var minutes=Math.round(d.getMinutes()); var ampm = hours >= 12 ? 'PM' : 'AM'; var Time=hours+':'+minutes; var DisplayTime=addMinutes(Time, duration); $scope.displayTime=Time+' - '+DisplayTime +' '+ampm; }