2013-02-13 22 views
8

तो मुझे तारीख इनपुट पर आकार को मजबूर करने का प्रयास करने में कोई समस्या है। क्या किसी और को यह मुद्दा था या पता है कि इसके आसपास कैसे जाना है?एचटीएमएल 5 दिनांक इनपुट चौड़ाई

<input style="width:50px;" type="date" value=""> 

यह बहुत आसान है, चौड़ाई केवल पाठ क्षेत्र बदलता है, वास्तविक नियंत्रण नहीं बदलता है, यह 125 के बारे में पिक्सल चौड़ाई या तो पर तय हो गई है।

मैंने सीएसएस में चौड़ाई = "" और अधिकतम चौड़ाई भी कोशिश की है, न तो काम।

+0

आप mm/dd/yyyy को विस्तारित करना चाहते हैं या नियंत्रण मेरे लिए विस्तारित लगता है। हालांकि मैं गलत समझ सकता हूं। http://jsfiddle.net/supplement/xu9Xm/ – Supplement

+0

मेरा उदाहरण नोटिस 50px का उपयोग करता है, 250 नहीं? मैं डिफ़ॉल्ट से छोटा जाना चाहता हूं, बड़ा नहीं। धन्यवाद। –

+0

मैं समझता हूं कि अब आप क्या कह रहे हैं ... यह एक अच्छा सवाल है। मैं देखूंगा कि मैं तुम्हारे दोस्त के लिए कुछ भी खोद सकता हूं। – Supplement

उत्तर

3

चूंकि अधिकतर ब्राउज़र अभी तक HTML5 के साथ गति तक नहीं हैं। मैं सिर्फ jquery के साथ दिनांक पिकर का उपयोग करेंगे।

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    }); 
    </script> 
</head> 
<body> 

<p>Date: <input type="text" id="datepicker" /></p> 


</body> 
</html> 

मैंने इसे बहुत उपयोग किया है और यह एक इलाज करता है। कैलेंडर को क्लिक के साथ-साथ इमो पर प्रस्तुत करने के लिए और अधिक समझ में आता है।

यहाँ के साथ-साथ लिंक है: http://jqueryui.com/datepicker/

+1

यह एक क्रोम केवल एप्लिकेशन है, इसलिए मैं चिंतित नहीं हूं कि आईई कभी भी अनुपालन नहीं कर रहा है। यदि वास्तविक समस्या का कोई अन्य समाधान नहीं है, तो मैं इस समाधान पर फिर से विचार करूंगा। हालांकि एक विकल्प के लिए +1। –

+0

धन्यवाद ऑस्टिन, खुशी है कि मैं इस चर्चा में भाग लेने और भाग लेने में मदद कर सकता हूं। =] – Supplement

+2

यह प्रश्न का उत्तर नहीं है। – Miles

2

एक <input type=date> तत्व एक ब्राउज़र निर्भर तरीके वातावरण जहां ब्राउज़र चल रहा है के लिए उपयुक्त है कि में लागू किया जाता है। तो यह ब्राउज़र के नियंत्रण में होना चाहिए, लेखक की नहीं। यह एक कारण है कि कई लोग इस विचार के बारे में संदेह कर रहे हैं।

नियंत्रण के लिए चौड़ाई निर्धारित करना वास्तव में अंधेरे में एक शॉट है। मेरे क्रोम पर (विन 7 पर 25 बीटा), आपका सीएसएस कोड दिए गए चौड़ाई को विजेट को छंटनी के अर्थ में "काम करता है"। यह अभी भी काम करता है, लेकिन यह बहुत अजीब लगता है: विजेट में, पत्र "वी" और कुछ अन्य अक्षर का हिस्सा दिखाई देता है। वे वास्तव में "vvvv-kk-pp" ("yyyy-mm-dd" के लिए स्थानीयकृत नोटेशन) हैं, जो कि मैं किसी भी चौड़ाई सेटिंग की अनुपस्थिति में विजेट में देख सकता हूं।

निष्कर्ष यह है: <input type=date> का उपयोग करके, आप जो भी ब्राउज़र-निर्भर विजेट ब्राउज़र का उपयोग कर सकते हैं, और नियंत्रण को नियंत्रित करने का प्रयास स्वीकार करते हैं। इसके आकार में बहुत अच्छी तरह से गड़बड़ हो सकती है,

+0

सभी तत्वों को उनके लिए निर्दिष्ट सीएसएस का सम्मान करना चाहिए, क्या वे नहीं चाहिए? और ऐसा नहीं है कि मैं संपादन के दौरान यूआई तत्व के रूप में देखता हूं, लेकिन संपादित नहीं होने पर स्थिर रूप से प्रदर्शित मूल्य। – Michael

4

क्रोम 45 के साथ, मैंने बस फ़ॉन्ट आकार सेट किया है। यह आनुपातिक रूप से पाठ और नियंत्रण हैंडल बदल गया। सुनिश्चित नहीं है कि वह प्रभाव था जिसे आप ढूंढ रहे थे (?)।

<input style="font-size: 3rem" type="date" id="Date"> 
+1

@ ऑस्टिनबेस्ट फिर "समाधान" के रूप में एक उत्तर चुनने के लिए उचित कार्रवाई होगी। – kaiser

+4

ट्रोलिंग से बहुत दूर। _wontfix_ के साथ अपने स्वयं के प्रश्न का उत्तर देना एक वैध उत्तर भी होगा। – kaiser

+0

चूंकि यह मेरी Google खोज के शीर्ष पर था, और अब यह 2017 है, मैं क्रोम को चौड़ाई तक नीचे निचोड़ने में सक्षम था: 10em ;, लेकिन जितना छोटा हो उतना छोटा हो सकता है (और यह उससे बहुत छोटा नहीं है डिफ़ॉल्ट)। मुझे यह जवाब बेहतर है तो दूसरों को। –

0
<input type="date" name="tanggal" style="width:231px"> 

आशा इस काम करता है! यह चौड़ाई को छोड़कर कुछ भी नहीं बदलता है।