एचटीएमएल 5 दिनांक इनपुट jQuery Datepicker

Question

मैं अपनी साइट पर तारीख चयन के लिए jQuery यूआई के datepicker उपयोग कर रहा हूँ के साथ हस्तक्षेप करना टाइप करें। मेरे उपयोगकर्ताओं में से एक बस क्रोम के नवीनतम संस्करण में अपग्रेड किया गया है, जिसने HTML5 के लिए देशी डेट पिकर बनाया है। एक बड़ी समस्या दो यूआई एक दूसरे को ओवरलैप करते हैं। दूसरी समस्या तब होती है जब उपयोगकर्ता दिनांक सबमिट करता है, डेटाबेस में दिनांक "0000-00-00" पर वापस आ जाता है और खराब डेटा का उत्पादन कर रहा है।

अगर मैं jQuery datepicker निकालने के लिए, उपयोगकर्ताओं के अधिकांश नवीनतम-सबसे बड़ी ब्राउज़र का उपयोग नहीं एक पॉपअप दिनांक पिकर नहीं होगा। और, जिनके पास नवीनतम ब्राउज़र है, उनमें दो ओवरलैपिंग कैलेंडर्स होंगे जो एप्लिकेशन को तोड़ देते हैं। मेरा सवाल यह है कि मैं नवीनतम ब्राउज़र को अंतर्निहित दिनांक फ़ंक्शन प्रदर्शित करने से कैसे अक्षम कर सकता हूं और बस jQuery डेटपिकर का उपयोग करना जारी रख सकता हूं?

Answer 1

Modernizr या इसी तरह की लाइब्रेरी का उपयोग यह पता लगाने के लिए करें कि ब्राउज़र input type=date का समर्थन करता है, और फिर यदि jQuery नहीं है तो jQuery UI डेटपिकर लोड करें। input[type=text] को input[type=date] का उपयोग कर या देशी datepicker के लिए समर्थन का पता लगाने के Modernizr का उपयोग से

if (!Modernizr.inputtypes.date) { 
    $('input[type=date]').datepicker(); 
} 

Answer 2

या तो स्विच। मैंने यहां दोनों विकल्पों के प्रभावों के बारे में एक पोस्ट लिखा है - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/।

Answer 3

कभी-कभी आप प्रपत्र प्रकार संशोधित नहीं कर सकते। उदाहरण के लिए, मैं सिम्फनी 2 बंडल के फॉर्म टाइप का उपयोग कर रहा हूं।

मैं इस समस्या Genemu jQuery Datepicker का उपयोग कर किया था, और मैं इस समस्या को एक कैलेंडर छवि बटन और सीएसएस कोड का एक से थोड़ा जोड़ने हल किया।

You can see final result in this link

यहाँ आप छवि आइकन जोड़ने के लिए दस्तावेज़ पढ़ सकते हैं:

form input[type=date] + img { 
    position: relative; 
    left: -25px; 
} 

Answer 4

: फिर jQuery UI Datepicker

, मैं साधारण इस तरह एक सीएसएस (शायद शैली नियमों आप के लिए अलग अलग हो जाएगा) जोड़ा

अपने फ़ॉर्म के novalidate विशेषता जोड़ें सत्यापन में निर्माण ब्राउज़र की दूर करने के लिए।

<form action="login.htm" novalidate> 

अधिक जानकारी के लिए यह link देखें।