क्या मैं केवल एक वर्ष एकत्र करने के लिए एक HTML इनपुट प्रकार "दिनांक" का उपयोग कर सकता हूं?

मेरे पास एक ऐसा क्षेत्र है जिसे उपयोगकर्ता से एक वर्ष एकत्र करने की आवश्यकता होती है (यानी एक साल के रिज़ॉल्यूशन वाली तारीख - भंडारण की आसानी के लिए मैं एक वास्तविक दिनांक मूल्य संग्रहीत करना चाहता हूं, न कि संख्या)।क्या मैं केवल एक वर्ष एकत्र करने के लिए एक HTML इनपुट प्रकार "दिनांक" का उपयोग कर सकता हूं?

मैं आधुनिक ब्राउज़र या webshims द्वारा समर्थित दिनांक इनपुट UI का उपयोग करना चाहता हूं क्योंकि यह अच्छा है और आधुनिक प्लेटफॉर्म के साथ अच्छी तरह से खेलता है। मैं यह समझ नहीं पाया कि UI को केवल वर्ष प्रदर्शित करने के लिए कैसे प्राप्त करें। कोई विचार?

यदि कोई प्लेटफार्म समर्थन नहीं है, तो आदर्श रूप में मैं यूआई कुछ ऐसा करना चाहूंगा जैसे आप 0 पूर्वावलोकन कर सकते हैं see here यदि आप "पूर्वावलोकन" पर क्लिक करते हैं और फिर विजेट के शीर्ष पर दो बार क्लिक करते हैं, तो रिवर्स को छोड़कर: जब आप पहली बार दशकों की सूची के साथ विजेट प्राप्त करने वाले इनपुट पर क्लिक करें, फिर आप वर्ष चुनने के लिए नीचे ड्रिल करें, फिर यूआई बंद हो जाता है।

स्रोत

2016-01-08 Guss

नहीं, आप नहीं कर सकते हैं, यह केवल वर्ष का समर्थन नहीं करता है, इसलिए ऐसा करने के लिए कि आपको एक स्क्रिप्ट की आवश्यकता है, जैसे कि jQuery या आपके वेबसाइम लिंक, जो केवल वर्ष दिखाता है। – LGSon

कुछ अच्छे jQuery नमूने के लिए इस पोस्ट को जांचें: http://stackoverflow.com/questions/13528623/jquery-ui-datepicker-to-show-year- केवल – LGSon

जो इस प्रश्न को डुप्लिकेट बनाता है: http: // stackoverflow.com/questions/30085591/focus-month-or-year-of-html5-inputtype-date ... क्या आप सहमत हैं? ... और यदि jQuery एक विकल्प है, तो मेरी पहली टिप्पणी का लिंक डुप्ली होगा? – LGSon

नहीं, आप नहीं कर सकते हैं, यह केवल वर्ष का समर्थन नहीं करता है, इसलिए ऐसा करने के लिए कि आपको एक स्क्रिप्ट की आवश्यकता है, जैसे कि jQuery या आपके पास webshim लिंक है, जो केवल वर्ष दिखाता है।

jQuery एक विकल्प हो हैं, तो यहां एक, Sibu से उधार लिया है:

$(function() { 
    $("#datepicker").datepicker({dateFormat: 'yy'}); 
    }); 
CSS 

.ui-datepicker-calendar { 
    display: none; 
}

src: https://stackoverflow.com/a/13528855/2827823

एसआरसी बेला: http://jsfiddle.net/vW8zc/

यहाँ an updated fiddle है, बिना महीना और पिछला/अगला बटन

यदि बूटस्ट्रैप एक विकल्प है, check this link, उनके पास एक लेआउट है जो आप चाहते हैं।

स्रोत

2016-01-08 12:47:15 LGSon

परिणामी इंटरफ़ेस को देखते हुए, इसकी तरह की भयानक (एक साल के पिकर के लिए वैसे भी)। एकमात्र कार्य जो आप कर सकते हैं वह महीनों के माध्यम से पृष्ठ पर है - जो अंततः आपको एक विशिष्ट वर्ष तक ले जाएगा, लेकिन यदि मैं उपयोगकर्ता से पूछ रहा हूं कि उसका जन्म वर्ष क्या है, तो मुझे पसंद होने की तुलना में 12 गुना अधिक क्लिक मिलेगा। Webshims 'date picker's "view 0" जैसी यूआई बहुत अधिक बेहतर है (हालांकि उपयोगकर्ता एक साल का चयन करने के बाद webshims UI को समाप्त करने का तरीका नहीं समझ सका)। वर्तमान में मेरा दूसरा समाधान 1 9 00 से "1-1-YYYY" पर सेट मानों के साथ सभी वर्षों के साथ एक बूंद है, इसलिए मुझे इस यूआई को हरा करने की जरूरत है। – Guss

@ गॉस यह बेहतर होगा: http://jsfiddle.net/vW8zc/306/ – LGSon

@ गॉस और यहां एक पिछला/अगला तीर के बिना भी है: http://jsfiddle.net/vW8zc/307/ .. यदि कोई भी पर्याप्त है, तो मुझे बताएं और मैं अपना उत्तर – LGSon

मैं इसके साथ प्रयास करता हूं, सीएसएस पर कोई संशोधन नहीं करता है।

$(function() { 
 
    $('#datepicker').datepicker({ 
 
     changeYear: true, 
 
     showButtonPanel: true, 
 
     dateFormat: 'yy', 
 
     onClose: function(dateText, inst) { 
 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
 
      $(this).datepicker('setDate', new Date(year, 1)); 
 
     } 
 
    }); 
 
    
 
    $("#datepicker").focus(function() { 
 
     $(".ui-datepicker-month").hide(); 
 
     $(".ui-datepicker-calendar").hide(); 
 
    }); 
 
    
 
});

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

Example code jsfiddle

स्रोत

2016-11-17 17:47:31

एक जावास्क्रिप्ट समाधान इस प्रश्न का उत्तर नहीं है। – Blackbam

नहीं, तुम नहीं कर सकते हैं, लेकिन आप एक समाधान के रूप इनपुट प्रकार नंबर का उपयोग कर सकते हैं। निम्नलिखित उदाहरण देखें:

<input type="number" min="1900" max="2099" step="1" value="2016" />

स्रोत

2016-11-17 18:10:33 Blackbam

सरल, और आसान। मैंने इसके बारे में क्यों नहीं सोचा! चयनित उत्तर होना चाहिए –

input type month in HTML5 है जो महीने और वर्ष का चयन करने की अनुमति देता है। महीना चयनकर्ता स्वत: पूर्ण के साथ काम करता है।

JSFiddle में उदाहरण देखें।

<!DOCTYPE html> 
<html> 
<body> 
    <header> 
     <h1>Select a month below</h1> 
    </header> 
    Month example 
    <input type="month" /> 
</body> 
</html>

स्रोत

2017-12-08 14:55:26 Wallkicker

उत्तर के लिए धन्यवाद, मुझे एचटीएमएल 5 में एक विकल्प होने के प्रकार 'टाइप = माह' के बारे में पता नहीं था (मैंने spec के लिए एक लिंक जोड़ा है)। गीथब बड़ी फाइलों के लिए "दोष दृश्य" प्रदान नहीं करता है, इसलिए जब इसे जोड़ा गया तो मुझे पता नहीं लगाया जा सकता है। ऐसा कहा जा रहा है कि यह मेरी ज़रूरतों के लिए पर्याप्त समाधान नहीं है, लेकिन इसने मुझे "वर्ष" प्रकार जोड़ने के लिए मानक पर एक मुद्दा खोलने के लिए प्रेरित किया: https://github.com/whatwg/html/issues/3281 । यदि आप ऐसी सुविधा में रुचि रखते हैं (अगले 5 वर्षों में ब्राउज़रों में उपलब्ध होने के लिए ;-)), कृपया वोट दें। – Guss

हो गया। जिथूब पर ऊपर उठाया गया। – Wallkicker

क्या मैं केवल एक वर्ष एकत्र करने के लिए एक HTML इनपुट प्रकार "दिनांक" का उपयोग कर सकता हूं?

उत्तर

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