HTML दिनांक इनपुट टैग में दिनांक प्रारूप कैसे सेट करें?

Question

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

Comments

क्या यह HTML5 इनपुट प्रकार = दिनांक के मूल्य आउटपुट को निर्दिष्ट करने का एक संभावित डुप्लिकेट नहीं है ? ? मैं कहूंगा, यहां यह सवाल उस पुराने वाले से बेहतर पूछा गया है, लेकिन उस पुराने वाले के पास बहुत अच्छा जवाब है।

— आर्सेन

संभावित डुप्लिकेट क्या इनपुट प्रकार = "तिथि" प्रारूप को बदलने का कोई तरीका है?

— वैभव मुले

मेरी देश सेटिंग्स डच हैं, और क्रोम में यह DD-MM-YYYY दिखाता है। ऐसा लगता है कि यह वेबसाइट का उपयोग करके क्लाइंट की विंडो सेटिंग्स पर निर्भर करता है।

— dark_passages

Answer 1

तुम नहीं।

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

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

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

Comments

अफसोस की बात है, आपकी दूसरी टिप्पणी वास्तविक दुनिया में बिल्कुल सही नहीं है। क्रोम और ओपेरा जैसे कुछ ब्राउज़र, कम से कम संस्थाओं के आदेश का सम्मान करते हैं , हालांकि इससे ज्यादा कुछ नहीं है। उदाहरण के लिए, मेरी OS लोकेल सेटिंग्स बताती हैं कि एक छोटी तारीख के रूप में, इस साल अगस्त का पहला दिन 1 / 8-2016 होना चाहिए , लेकिन यहां तक ​​कि क्रोम और ओपेरा शो 01/08/2016 । अन्य ब्राउज़र, जैसे कि सफारी और फ़ायरफ़ॉक्स (कम से कम ओएस एक्स पर) ओएस सेटिंग्स को पूरी तरह से अनदेखा करते हैं और हमेशा 2016-08-16 दिखाते हैं कि कोई फर्क नहीं पड़ता। ऐसी साइट पर जहां उपयोगकर्ता अपनी स्वयं की दिनांक प्राथमिकताएँ सेट कर सकते हैं, यह निश्चित रूप से इसे ओवरराइड करने का कोई मतलब नहीं है।

— Janus Bahs Jacquet

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

— जानुस बह्स जेकट

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

— स्टीवर्ट

परेशानी यह है कि यह एक प्रस्तुतिकरण सेटिंग है जिसे सेट नहीं किया जा सकता है । सामान्य रूप से प्रस्तुति सेटिंग्स CSS में हैं, लेकिन CSS (या कहीं और) में इसे बदलने का कोई तरीका नहीं है। इसके अलावा, यहां तक ​​कि HTML युक्ति भी प्रेजेंटेशनल सेटिंग्स से मुक्त नहीं है। उदाहरण के लिए, इस खंड में input[type=password]कहा गया है कि "उपयोगकर्ता एजेंट को मूल्य अस्पष्ट करना चाहिए ताकि उपयोगकर्ता के अलावा अन्य लोग उसे देख न सकें", जो कि यह कहते हुए उतनी ही प्रस्तुति है कि उपयोगकर्ता एजेंट को एक निश्चित तरीके से तारीख पेश करनी चाहिए।

— Janus Bahs Jacquet

कुछ लोग कहेंगे कि यह एक अच्छी बात है कि इसे सेट नहीं किया जा सकता, क्योंकि यह वेबमास्टरों को दुनिया के अपने पसंदीदा तारीखों के प्रारूप को रोकने से रोकता है। लेकिन पासवर्ड इनपुट मुझे मिल गया है। बहुत सी जगहों पर, एचटीएमएल कल्पना प्रस्तुतिकरण की सिफारिशें देती है, जो अनिवार्य रूप से ब्राउज़र डिफ़ॉल्ट स्टाइलशीट के लिए सिफारिशें हैं। यहाँ अंतर यह है कि इस विशेष प्रस्तुति के लिए सीएसएस संपत्ति प्रतीत नहीं होती है।

— स्टीवर्ट

Answer 2

मुझे स्टैकओवरफ़्लो पर समान प्रश्न या संबंधित प्रश्न मिला

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

मुझे एक सरल समाधान मिला, आप पार्टिकुलेट फॉर्मेट नहीं दे सकते लेकिन आप इस तरह से कस्टमाइज़ कर सकते हैं।

HTML कोड:

    <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;
}

आउटपुट:

Comments

और भी बेहतर - उपयोग सीएसएस नियमित इनपुट पर एक पारदर्शी तारीख नियंत्रण स्थिति

— जॉर्ज Mauer

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

— ashish bhatt

यह एक बेहतरीन विकल्प है।

— डिलन बर्नेट

मुझे लगता है कि वह पूछ रहा है कि क्या यह HTML के साथ संभव है (प्रश्न के आधार पर), सीएसएस और जावास्क्रिप्ट नहीं।

— शिज़ुकुरा

Answer 3

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

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

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

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

Answer 4

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

<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"/>

Comments

<प्री> <इनपुट प्रकार = "टेक्स्ट" नाम = "इनपुट 1" प्लेसहोल्डर = "YYYY-MM-DD" आवश्यक पैटर्न = "[0-9] {4} - [0-9] {2} - [0-9 ] {2} "शीर्षक =" इस फॉर्मेट में एक तारीख डालें YYYY-MM-DD "/> </ pre>

— पॉल IE

आवश्यकता स्पष्ट रूप से थी, मैं बोली - "मुझे dd-mm-yyyy प्रारूप में इसकी आवश्यकता है।" यह कैसे मदद करता है?

— हरिज्स कृष्णिस

फ़ायरफ़ॉक्स के साथ काम नहीं करता है। यह html प्लेसहोल्डर mm / dd / yyyy के साथ एक इनपुट दिखाता है। मेरी खिड़कियां और मेरा फ़ायरफ़ॉक्स दोनों ही पहली भाषा के रूप में डच के साथ सेट हैं। Windows क्षेत्रीय सेटिंग छोटी तिथि दिखाती है: 30-11-2018।

— रोलैंड

Answer 5

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

Answer 6

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

Answer 7

$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});

Comments

इस कोड स्निपेट के लिए धन्यवाद, जो कुछ तत्काल सहायता प्रदान कर सकता है। एक उचित व्याख्या दिखाने से इसके शैक्षिक मूल्य में काफी सुधार होगा कि यह समस्या का एक अच्छा समाधान क्यों है, यह , और यह भविष्य के पाठकों के लिए समान रूप से उपयोगी होगा, लेकिन समान नहीं, प्रश्न। कृपया स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें, और इस बात का संकेत दें कि क्या सीमाएँ और मान्यताएँ लागू होती हैं।

— टोबी स्पाइट

Answer 8

मैंने बहुत खोजबीन की और मुझे नहीं लगता कि कोई इस प्रारूप को लागू कर सकता है <input type="date"> । ब्राउज़र स्थानीय प्रारूप का चयन करता है, और उपयोगकर्ता सेटिंग्स के आधार पर, यदि उपयोगकर्ता की भाषा अंग्रेजी में है, तो तारीख अंग्रेजी प्रारूप (मिमी / डीडी / yyyy) में प्रदर्शित की जाएगी।

मेरी राय में, प्रदर्शन को नियंत्रित करने के लिए एक प्लगइन का उपयोग करना सबसे अच्छा समाधान है।

जेकरी डेटपिकर एक अच्छा विकल्प लगता है क्योंकि आप स्थानीयकरण , तिथि प्रारूप को लागू कर सकते हैं ...

Answer 9

मैंने ऊपर जो कुछ भी पढ़ा है, उससे थोड़ा अलग उत्तर के साथ आया हूं।

मेरा समाधान जावास्क्रिप्ट का एक छोटा सा और एक html इनपुट का उपयोग करता है।

एक स्ट्रिंग द्वारा इनपुट परिणाम द्वारा स्वीकार की गई तारीख को 'yyyy-mm-dd' के रूप में स्वरूपित किया जाता है। हम इसे विभाजित कर सकते हैं और इसे एक नई तिथि () के रूप में ठीक से रख सकते हैं।

यहाँ मूल HTML है:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

यहाँ बुनियादी जेएस है:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

आप किसी भी तरह से तारीख को प्रारूपित कर सकते हैं। आप एक नई तारीख () बना सकते हैं और वहां से सारी जानकारी ले सकते हैं ... या अपनी स्ट्रिंग बनाने के लिए 'userDate []' का उपयोग करें।

ध्यान रखें, कुछ तरीके जो एक तारीख को 'नई तिथि ()' में दर्ज किए जाते हैं, एक अप्रत्याशित परिणाम उत्पन्न करते हैं। (यानी - एक दिन पीछे)

Answer 10

<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>

Comments

जब आप यहां HTML कोड पोस्ट करते हैं, तो यह बहुत महत्वपूर्ण है कि आप इसे कोड के रूप में स्वरूपित करते हैं। यदि आप इसे पृष्ठ के एक भाग के रूप में स्वरूपित नहीं करते हैं, और आपका उत्तर उत्तर की तरह नहीं दिखता है। यदि आप नहीं जानते कि प्रारूप कैसे करें, तो सहायता केंद्र में इस पर एक अच्छा गाइड है

— ज़ो

Answer 11

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

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1- कृपया ध्यान दें कि यह विधि केवल ब्राउज़र के लिए काम करती है जो दिनांक प्रकार का समर्थन करती है।

2- जेएस कोड में पहला कार्य ब्राउजर के लिए होता है जो तिथि प्रकार का समर्थन नहीं करता है और लुक को सामान्य टेक्स्ट इनपुट पर सेट करता है।

3- अगर आप इस कोड का उपयोग अपने पेज में कई तारीखों के इनपुट के लिए करते हैं, तो कृपया फंक्शन कॉल में टेक्स्ट इनपुट की आईडी "xTime" को बदल दें और इनपुट स्वयं किसी और चीज में और निश्चित रूप से आपके द्वारा इच्छित इनपुट के नाम का उपयोग करें। फॉर्म सबमिट करें।

4-दूसरे फ़ंक्शन पर आप दिन के बजाय किसी भी प्रारूप का उपयोग कर सकते हैं + "/" + महीना + "/" + वर्ष उदाहरण के लिए वर्ष + "/" + महीना + "/" + दिन और पाठ इनपुट में प्लेसहोल्डर या मान का उपयोग करें पेज लोड होने पर उपयोगकर्ता के लिए yyyy / mm / dd।

Answer 12

Mm-dd-yyyy में स्वरूपण के लिए

आ = date.split ( "-")

तिथि = आ [1] + '-' + आ [2] + '-' + आ [0]

Answer 13

कोई निर्भरता के साथ स्वच्छ कार्यान्वयन। 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>

Answer 14

यहाँ समाधान है:

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

उम्मीद है कि यह इस मुद्दे को हल करेगा :)

Comments

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

— विंसेंट

आपको इसकी तिथि निर्धारित करने की आवश्यकता नहीं है। डेटपिकर के लिए यह बिना तारीख के काम करेगा। यह कोशिश करो, उम्मीद है कि यह आपकी समस्या को हल करेगा।

— मुहम्मद वकास

Answer 15

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

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

आपको बस उस प्रारूप में php, asp, ruby ​​या जो कुछ भी है उस फॉर्मेट को फॉर्मेट करना है।