2011-08-08 17 views
85

मुझे आश्चर्य है कि एचटीएमएल <input type="date"></input> टैग में दिनांक प्रारूप सेट करना संभव है ... वर्तमान में यह yyyy-mm-dd है, जबकि मुझे इसे डीडी-एमएम-वाई प्रारूप में चाहिए।एचटीएमएल तिथि इनपुट टैग में दिनांक प्रारूप कैसे सेट करें?

+2

एचटीएमएल अकेले –

+3

साथ कोई रास्ता नहीं इसके बारे में एक संभव डुप्लिकेट नहीं है [एक HTML5 इनपुट प्रकार के के मूल्य उत्पादन तिथि निर्दिष्ट =?] (Http://stackoverflow.com/questions/ 3496241/निर्दिष्ट-मूल्य-आउटपुट-ऑफ-ए-एचटीएमएल 5-इनपुट-टाइप-डेट)? मैं कहूंगा, * यह * प्रश्न * यहां * उस पुराने व्यक्ति से बेहतर पूछा जाता है, लेकिन वह * पुराना * एक बहुत अच्छा जवाब है। – Arsen7

+0

@ सकारात्मक LIESSS – Griffin

उत्तर

1

मुझे ऐसा लगता है, एचटीएमएल में डीडी-एमएम-वाई वाई वाई प्रारूप के लिए कोई वाक्यविन्यास नहीं है। इस पृष्ठ को देखें http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm। कुछ हद तक यह आपकी मदद करेगा। अन्यथा जावास्क्रिप्ट दिनांक पिकर का उपयोग करें।

1

मुझे यह सुनिश्चित करने के लिए नहीं पता है, लेकिन मुझे लगता है कि यह उपयोगकर्ता की दिनांक/समय सेटिंग के आधार पर ब्राउज़र द्वारा संभाला जाना चाहिए। उस प्रारूप में तिथियों को प्रदर्शित करने के लिए अपने कंप्यूटर को सेट करने का प्रयास करें।

21

मुझे लगता है कि वहाँ कोई समाधान नहीं करता है, तो HTML का उपयोग कर केवल
मुझे लगता है कि आप jQuery
का उपयोग करना चाहिए है उपयुक्त jQuery प्लगइन jQuery Masked Input

-2

वास्तव में ऐसा है लेकिन ऐसा लगता है कि कोई भी इसे समर्थन करने के लिए परेशान किया है। आप सही थे <input type="date">। यदि कोई मुझे संदेह करता है। http://www.w3schools.com/html/html5_form_input_types.asp

+4

इस प्रतिक्रिया के साथ पार्टी के लिए देर हो चुकी है, लेकिन ओपी पहले से ही 'टाइप = "दिनांक" इनपुट तत्व का उपयोग कर रहा है, वे सोच रहे थे कि क्या वे उस क्षेत्र के भीतर तिथि के प्रारूप को समायोजित कर सकते हैं। – Alex

5

आप jQuery का उपयोग कर रहे हैं, तो यहाँ एक अच्छा सरल विधि

$("#dateField").val(new Date().toISOString().substring(0, 10)); 

है या वहां पुराने पारंपरिक तरीका है:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10) 
-2

दिनांक मान का स्वरूप 'YYYY-MM-DD' है। निम्नलिखित उदाहरण देखें

<form> 
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/> 
</form> 

आपको केवल php, asp, ruby ​​या उस प्रारूप में जो भी प्रारूप है, उसे प्रारूपित करने की आवश्यकता है।

9

आप नहीं करते हैं।

सबसे पहले, आपका प्रश्न संदिग्ध है - क्या आपका मतलब यह है कि प्रारूप में यह उपयोगकर्ता को प्रदर्शित किया गया है, या प्रारूप जिसमें यह वेब सर्वर पर प्रेषित किया गया है?

यदि आपका मतलब यह है कि प्रारूप में उपयोगकर्ता को प्रदर्शित किया गया है, तो यह अंत उपयोगकर्ता इंटरफ़ेस पर है, HTML में निर्दिष्ट कुछ भी नहीं। आमतौर पर, मैं उम्मीद करता हूं कि यह ऑपरेटिंग सिस्टम लोकेल सेटिंग्स में सेट दिनांक प्रारूप पर आधारित होगा। यह प्रारूप के रूप में यह में प्रदर्शित करता है (आम तौर पर) उपयोगकर्ता किसी भी स्थान के लिए सही एक और स्वरूप है जो उपयोगकर्ता/में दिनांक को समझने के लेखन के लिए प्रयोग किया जाता है, अपने खुद के पसंदीदा प्रारूप के साथ ओवरराइड करने की कोशिश करने के लिए कोई मतलब नहीं है।

यदि आपका मतलब है कि जिस प्रारूप में यह सर्वर पर प्रेषित है, तो आप गलत समस्या को ठीक करने का प्रयास कर रहे हैं। आपको क्या करना है, सर्वर-साइड कोड प्रोग्राम yyyy-mm-dd प्रारूप में दिनांक स्वीकार करने के लिए है।

+0

अफसोस की बात है, आपकी दूसरी टिप्पणी वास्तविक दुनिया में बिल्कुल सही नहीं है। क्रोम और ओपेरा जैसे कुछ ब्राउज़र, कम से कम इकाइयों के _order_ का सम्मान करते हैं, हालांकि इससे कुछ भी नहीं। उदाहरण के लिए, मेरी ओएस लोकेल सेटिंग्स निर्दिष्ट करती हैं कि एक छोटी तारीख के रूप में, इस वर्ष अगस्त का पहला दिन _1/8-2016_ होना चाहिए, लेकिन क्रोम और ओपेरा भी _01/08/2016_ दिखाएंगे। सफारी और फ़ायरफ़ॉक्स (कम से कम ओएस एक्स पर) जैसे अन्य ब्राउज़र ओएस सेटिंग्स को पूरी तरह से अनदेखा करते हैं और हमेशा _2016-08-16_ दिखाते हैं कि इससे कोई फर्क नहीं पड़ता। ऐसी साइट पर जहां उपयोगकर्ता अपनी तिथि प्राथमिकताओं को सेट कर सकते हैं, यह निश्चित रूप से इसे ओवरराइड करने के लिए समझ में आता है। –

+0

(फ़ायरफ़ॉक्स और सफारी के बारे में नोट को अनदेखा करें ... मैं थक गया हूं। न तो ब्राउज़र दिनांक प्रकार का समर्थन करता है, इसलिए वे केवल मूल्य के अंतर्निहित प्रारूप को दिखा रहे हैं, जो कि मेरे वर्तमान कोड के मामले में YYYY-MM- डीडी।) –

+0

क्या अधिकांश लोग प्रदर्शन/इनपुट दिनांक प्रारूप को बदलने के लिए कह रहे हैं कि उपयोगकर्ताओं को अपनी प्राथमिकताओं को सेट करने, या दुनिया में अपने पसंदीदा दिनांक प्रारूपों को लागू करने के लिए सक्षम करना चाहते हैं? उत्तरार्द्ध ऐसा कुछ है जो मैंने किया है, जैसा कि मैंने कहा है, लेकिन आप इस बारे में किसी भी तरह से तर्क दे सकते हैं कि पूर्व उपयुक्त है या नहीं। लेकिन यह एक प्रस्तुतिकरण सेटिंग होगी, इसलिए एचटीएमएल के दायरे से बाहर। – Stewart

10

मैं एक ही सवाल या stackoverflow पर संबंधित सवाल पाया

वहाँ = "date" प्रारूप इनपुट प्रकार बदलने के लिए कोई तरीका है?

मुझे एक साधारण समाधान मिला, आप कण प्रारूप नहीं दे सकते लेकिन आप इसे इस तरह अनुकूलित कर सकते हैं।

एचटीएमएल कोड:

<body> 
<input type="date" id="dt" onchange="mydate1();" hidden/> 
<input type="text" id="ndt" onclick="mydate();" hidden /> 
<input type="button" Value="Date" onclick="mydate();" /> 
</body> 

सीएसएस कोड:

#dt{text-indent: -500px;height:25px; width:200px;} 

जावास्क्रिप्ट कोड:

function mydate() 
{ 
    //alert(""); 
document.getElementById("dt").hidden=false; 
document.getElementById("ndt").hidden=true; 
} 
function mydate1() 
{ 
d=new Date(document.getElementById("dt").value); 
dt=d.getDate(); 
mn=d.getMonth(); 
mn++; 
yy=d.getFullYear(); 
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy 
document.getElementById("ndt").hidden=false; 
document.getElementById("dt").hidden=true; 
} 

आउटपुट:

enter image description here

+0

यहां तक ​​कि बेहतर - नियमित इनपुट –

+0

पर एक पारदर्शी दिनांक नियंत्रण की स्थिति के लिए सीएसएस का उपयोग करें, यदि आपके पास इसके उत्तर के लिए धन्यवाद, यदि आपके पास कोई लिंक या कोड है, तो मुझे –

+0

अपडेट करना होगा। –

1

क्यों एचटीएमएल 5 तारीख नियंत्रण का उपयोग नहीं के रूप में यह है, अन्य विशेषताओं यह ब्राउज़रों उस तारीख प्रकार का समर्थन पर ठीक से काम की अनुमति देता है और अभी भी फ़ायरफ़ॉक्स जैसे अन्य ब्राउज़रों अभी तक यह है कि दिनांक प्रकार का समर्थन करने के

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/> 
+0

+4

आवश्यकता स्पष्ट रूप से थी, मैंने उद्धृत किया - "मुझे इसे डीडी-एमएम-वाई प्रारूप में चाहिए।" यह कैसे मदद करता है? –

0

पर काम करता है उस के साथ कोई निर्भरता के साथ स्वच्छ कार्यान्वयन। https://jsfiddle.net/h3hqydxa/1/

<style type="text/css"> 
    .dateField { 
     width: 150px; 
     height: 32px; 
     border: none; 
     position: absolute; 
     top: 32px; 
     left: 32px; 
     opacity: 0.5; 
     font-size: 12px; 
     font-weight: 300; 
     font-family: Arial; 
     opacity: 0; 
    } 

    .fakeDateField { 
     width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */ 
     height: 32px; /* same as above */ 
     border: none; 
     position: absolute; /* position overtop the date field */ 
     top: 32px; 
     left: 32px; 
     display: visible; 
     font-size: 12px; /* same as above */ 
     font-weight: 300; /* same as above */ 
     font-family: Arial; /* same as above */ 
     line-height: 32px; /* for vertical centering */ 
    } 
    </style> 

    <input class="dateField" id="dateField" type="date"></input> 
    <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div> 

    <script> 
    var dateField = document.getElementById("dateField"); 
    var fakeDateField = document.getElementById("fakeDateField"); 

    fakeDateField.addEventListener("click", function() { 
     document.getElementById("dateField").focus(); 
    }, false); 

    dateField.addEventListener("focus", function() { 
     fakeDateField.style.opacity = 0; 
     dateField.style.opacity = 1; 
    }); 

    dateField.addEventListener("blur", function() { 
     fakeDateField.style.opacity = 1; 
     dateField.style.opacity = 0; 
    }); 

    dateField.addEventListener("change", function() { 
     // this method could be replaced by momentJS stuff 
     if (dateField.value.length < 1) { 
     return; 
     } 

     var date = new Date(dateField.value); 
     var day = date.getUTCDate(); 
     var month = date.getUTCMonth() + 1; //zero-based month values 
     fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + "/" + day; 
    }); 

    </script> 
1
$('input[type="date"]').change(function(){ 
    alert(this.value.split("-").reverse().join("-")); 
}); 
+2

इस कोड स्निपेट के लिए धन्यवाद, जो कुछ तत्काल सहायता प्रदान कर सकता है। एक उचित स्पष्टीकरण [बहुत सुधार होगा] (// meta.stackexchange.com/q/114762) दिखाकर इसका शैक्षिक मूल्य * क्यों * यह समस्या का एक अच्छा समाधान है, और भविष्य के पाठकों के लिए इसे और अधिक उपयोगी बना देगा, लेकिन समान नहीं, प्रश्न। स्पष्टीकरण जोड़ने के लिए कृपया अपना उत्तर संपादित करें, और संकेत दें कि कौन सी सीमाएं और धारणाएं लागू होती हैं। –

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