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

Question

मैं अपने वेबपेज पर एचटीएमएल 5 तत्वों के साथ काम कर रहा हूं। डिफ़ॉल्ट इनपुट के type="date"रूप में दिनांक दिखाता है YYYY-MM-DD।

सवाल यह है कि क्या इसके प्रारूप को कुछ इस तरह बदलना संभव है DD-MM-YYYY:?

Comments

Google ने Chrome के लिए एक FAQ बनाया है: Developers.google.com/web/updates/2012/08/… तो प्रारूप OS की स्थानीय सेटिंग पर आधारित है।

— एंडी तजहोनो

मैं अपना समय बर्बाद करने की कोशिश कर रहा हूं dd/mm/yyyy। बस क्षण या jQuery की तारीख की तरह एक और पुस्तकालय का उपयोग करें

— अली अल अमीन

Answer 1

प्रारूप को बदलना असंभव है

हमें वायर फॉर्मेट और ब्राउजर के प्रेजेंटेशन फॉर्मेट के बीच अंतर करना होगा।

तार का प्रारूप

एचटीएमएल 5 तारीख इनपुट विनिर्देश को संदर्भित करता है आरएफसी 3339 विनिर्देश , जो एक पूर्ण दिनांक स्वरूप के बराबर निर्दिष्ट करता है: yyyy-mm-dd। देखें अनुभाग 5.6 अधिक जानकारी के लिए आरएफसी 3339 विनिर्देश की।

यह प्रारूप valueHTML विशेषता और DOM प्रॉपर्टी द्वारा उपयोग किया जाता है और साधारण फॉर्म सबमिशन करते समय उपयोग किया जाता है।

प्रस्तुति प्रारूप

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

डेस्कटॉप डिवाइस

क्रोम, फ़ायरफ़ॉक्स और ओपेरा के लिए, इनपुट फ़ील्ड के टेक्स्ट का प्रारूपण ब्राउज़र की भाषा सेटिंग पर आधारित है। एज के लिए, यह विंडोज भाषा सेटिंग पर आधारित है। अफसोस की बात है, सभी वेब ब्राउज़र ऑपरेटिंग सिस्टम में कॉन्फ़िगर की गई तारीख स्वरूपण को अनदेखा करते हैं। मेरे लिए यह बहुत ही अजीब व्यवहार है, और इस इनपुट प्रकार का उपयोग करते समय विचार करने के लिए कुछ। उदाहरण के लिए, डच उपयोगकर्ता जिनके पास अपना ऑपरेटिंग सिस्टम या ब्राउज़र भाषा है, उन्हें उस प्रारूप के बजाय en-usदिखाया 01/30/2019जाएगा, जिसके वे आदी हैं 30-01-2019:।

इंटरनेट एक्सप्लोरर 9, 10, और 11 तार प्रारूप के साथ एक पाठ इनपुट क्षेत्र प्रदर्शित करते हैं।

मोबाइल उपकरण

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

Comments

मैं एक जेएस टाइमस्टैम्प के लिए आशा करता था, और वायरफॉर्मैट नहीं। और प्रस्तुति प्रारूप को बदलने का एक तरीका, इसे लगातार बनाना बहुत कठिन है।

— एलन किमर जेन्सेन

@AllanKimmerJensen हालांकि मैं आपके विचारों को समझता हूं। मेरा मानना ​​है कि RFC3339 में निर्दिष्ट प्रारूप का उपयोग करने का निर्णय एक सही है, क्योंकि यह HTML और जावास्क्रिप्ट के बीच एक युग्मन नहीं बनाता है। आपके दूसरे बिंदु के रूप में, मुझे लगता है कि प्रयोज्य दृष्टिकोण से, यह उपयोगकर्ता के लिए कैलेंडर को उसकी क्षेत्रीय प्राथमिकताओं के अनुसार देखने के लिए समझ में आएगा।

— डेविड वॉल्शॉट्स

यदि एप्लिकेशन pt_BR है, तो मुझे pt_BR इनपुट की उम्मीद है। मेरी प्रणाली सेटिंग्स कोई फर्क नहीं पड़ता। HTML5 को लोकेल को लागू करने के लिए किसी तरह की आवश्यकता है।

— इयुरिल्वियो

मैं तारीख / मुद्रा सेटिंग्स के लिए स्पेनिश लोकेल का उपयोग करता हूं क्योंकि मैं स्पेन में स्थित हूं, फिर भी मेरी पहली भाषा अंग्रेजी है और मैं यूएसए कीबोर्ड लेआउट के लिए उपयोग किया जाता हूं इसलिए मैं अंग्रेजी / यूएसए कीबोर्ड का उपयोग करता हूं। मेरे ग्राहक फ्रेंच बोलने वाले यूरोपीय हैं .... काश कि मैं यूएसए मिमी-डीडी-य्यी प्रारूप में तिथियों को प्रदर्शित करने से रोकने के लिए क्रोम आदि को इंगित कर पाता!

— ल्यूक एच

क्या बेकार घटक है, जो इस चश्मे के साथ आता है?

— बोह

Answer 2

चूँकि यह सवाल वेब दायरे में काफी कुछ पूछा गया था, और सबसे रोमांचक में से एक वेब घटकों का उतरना है । अब आप इस मुद्दे को अपनी आवश्यकताओं के अनुरूप तैयार किए गए कस्टम HTML5 तत्व के साथ हल कर सकते हैं। यदि आप किसी भी html टैग के कामकाज को ओवरराइड / बदलना चाहते हैं, तो आप केवल शैडो डोम के साथ खेलते हुए अपना निर्माण करें ।

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

आप बहुलक के लिए डेटाइम-इनपुट जैसे एक सरल (और काम करने वाले) समाधान से शुरू कर सकते हैं जो आपको इस तरह एक टैग का उपयोग करने की अनुमति देता है:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

या आप अपनी इच्छानुसार रचनात्मक और पॉप-अप पूर्ण-तिथि वाले स्टाइल प्राप्त कर सकते हैं , स्वरूपण और स्थानों की इच्छा के साथ, कॉलबैक, और आपके विकल्पों की लंबी सूची (आपको अपने निपटान में एक संपूर्ण कस्टम एपीआई मिला है!)

मानक-अनुरूप, कोई हैक नहीं।

दोबारा जाँच करें उपलब्ध polyfills , क्या ब्राउज़रों / संस्करणों वे समर्थन है, और अगर यह अपने उपयोगकर्ता आधार का पर्याप्त% को कवर ... यह 2018 है, तो संभावना है कि यह निश्चित रूप से अपने उपयोगकर्ताओं के अधिकांश कवर करेंगे कर रहे हैं।

आशा है ये मदद करेगा!

Comments

लेकिन उन स्थानीय लोगों में से कोई हैं? यानी महीने के नाम को गैर-अंग्रेजी में बदल दें। और क्या वे डेस्कटॉप और मोबाइल पर काम करते हैं?

— सैम हस्लेर

ज़रूर, वे स्थानीय हैं। आप सिस्टम के लोकेल (यानी: is.gd/QSkwAY ) का लाभ उठा सकते हैं या वेबकम्पोनेंट के अंदर अपनी i18n फाइलें प्रदान कर सकते हैं (जैसे: is.gd/Ru9U82 )। मोबाइल ब्राउज़रों के रूप में, वे पॉलीफ़िल का उपयोग कर समर्थित हैं, हालांकि 100% (अभी तक) नहीं ... मेरे द्वारा पोस्ट किए गए ब्राउज़र / संस्करण लिंक की जांच करें। फिर, यह खून बह रहा है किनारा। यदि आप आगे देख रहे हैं, यह एक महान समाधान है।

— joseldn

क्षमा करें, मैंने आपकी नवीनतम टिप्पणी नहीं देखी थी। यह: jcrowther.io/2015/05/11/i18n-and-web-compenders काफी उपयोगी लगते हैं और उन्हें उत्तर में शामिल किया जाना चाहिए।

— सैम हस्लेर

खुशी है कि आप इसे उपयोगी पाते हैं। मैं हर चीज के साथ जवाब अपडेट करूंगा।

— joseldn

@SDude उन लिंक्स की तरह दिखता है, जिनके बारे में आपने सोचा था कि इसमें शामिल मूल्य अभी भी शामिल नहीं हैं।

— मार्क अमेरी

Answer 3

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

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

बाकी सीएसएस और जेएस का एक सा है: http://jsfiddle.net/g7mvaosL/

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")

input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

यह डेस्कटॉप पर क्रोम के लिए अच्छी तरह से काम करता है, और आईओएस पर सफारी (विशेष रूप से वांछनीय है, क्योंकि टच स्क्रीन पर देशी तिथि जोड़तोड़ अपराजेय एमएचओ हैं)। दूसरों के लिए जाँच नहीं की, लेकिन किसी भी Webkit पर विफल होने की उम्मीद नहीं है।

Comments

यह काम नहीं करता है, यह आपको बदल जाता है MMMM YYYY DD, केवल DDपरिवर्तन। -1 इसके लिए, सॉरी

— कैन ओ 'स्पैम

@SamSwift - मान बदलने के बाद क्या आपने "रन" पर क्लिक किया है? ;)

— pmucha

नहीं, वह नहीं है। आप यह नहीं समझते कि यह कैसे काम करता है: आप JS के साथ खेलते हैं और आपको HTML के साथ होना चाहिए। आपने momentफ़ंक्शन के इनपुट प्रारूप को बदल दिया है और यह जाने का तरीका नहीं है। आपको बदलना चाहिए था data-date-format="DD-YYYY-MM"और फिर आपको 09-2015-08 प्राप्त होगा जो कि सही परिणाम है।

— शामू

सफारी, एज, ओपेरा में न तो काम नहीं करता है - जो इसे अनुपयोगी बनाते हैं

— MaxZoom

फ़ायरफ़ॉक्स में टूटी हुई

— अलेक्जेंडर लल्लियर

Answer 4

दो अलग-अलग स्वरूपों को अलग करना महत्वपूर्ण है :

• RFC 3339 / ISO 8601 "वायर फॉर्मेट": YYYY-MM-DD। एचटीएमएल 5 विनिर्देश के अनुसार, यह वह प्रारूप है जिसका उपयोग फ़ॉर्म सबमिशन के लिए या डोम एपीआई के माध्यम से अनुरोध किए जाने पर किया जाना चाहिए। यह स्थानीय और क्षेत्र स्वतंत्र है।
• उपयोगकर्ता इंटरफ़ेस नियंत्रण द्वारा प्रदर्शित प्रारूप और उपयोगकर्ता इनपुट के रूप में स्वीकार किया जाता है। ब्राउज़र विक्रेताओं को उपयोगकर्ता की वरीयताओं के चयन के लिए प्रोत्साहित किया जाता है। उदाहरण के लिए, भाषा और पाठ वरीयताओं वाले फलक में चयनित क्षेत्र "यूनाइटेड स्टेट्स" के साथ मैक ओएस पर, क्रोम 20 "m / d / yy" प्रारूप का उपयोग करता है।

HTML5 विनिर्देश में किसी भी प्रारूप को ओवरराइड करने या मैन्युअल रूप से निर्दिष्ट करने का कोई भी साधन शामिल नहीं है।

Comments

क्या valueविशेषता तार प्रारूप से मेल खाती है, या उपयोगकर्ता को क्या प्रदर्शित किया जाता है?

— फ्लिम्स

@ valueविशेषता हमेशा तार प्रारूप से मेल खाती है।

— डेविड वाल्शॉट्स

Answer 5

मेरा मानना ​​है कि ब्राउज़र स्थानीय दिनांक प्रारूप का उपयोग करेगा। लगता है कि इसे बदलना संभव नहीं है। आप निश्चित रूप से कस्टम तिथि पिकर का उपयोग कर सकते हैं।

Comments

स्थानीय दिनांक प्रारूप का अर्थ है हमारा फ़ोन डिफ़ॉल्ट दिनांक प्रारूप या स्थान दिनांक फ़ॉर्मेट?

— गोविंदराव कोंडला

निर्भर करता है कि आप किस मोबाइल ब्राउज़र का उपयोग कर रहे हैं। लेकिन मुझे संदेह है कि यह फोन का डिफ़ॉल्ट होगा।

— माइकल मिओर

"स्थानीय" प्रारूप का अर्थ भौगोलिक स्थान पर आधारित होता है, जो संभवतः तारीख प्रारूप को निर्धारित करने का सबसे खराब तरीका है। क्या यूरोप की यात्रा करने वाला कोई अमेरिकी अपने स्मार्ट फोन से 210 प्रारूप और तारीखों में समय दिखाना शुरू कर देगा, जैसे कि yyyy-mm-dd या dd / mm / yyyy? या अमेरिका में एक यूरोपीय के लिए इसके विपरीत?

— RobG

Answer 6

Google Chrome अपने अंतिम बीटा संस्करण में अंततः इनपुट का उपयोग करता है type=date, और प्रारूप है DD-MM-YYYY।

तो एक विशिष्ट प्रारूप को बाध्य करने का एक तरीका होना चाहिए। मैं एक HTML5 वेब पेज विकसित कर रहा हूं और विभिन्न खोजों के साथ अब दिनांक खोजें विफल हो गई हैं।

Comments

आपके द्वारा उल्लिखित DD-MM-YYYY प्रारूप शायद आपका स्थानीय कैलेंडर प्रारूप है। यह बुद्धिमान नहीं है (और जहां तक ​​मैं देख सकता हूं, वर्तमान HTML5 मानकों के भीतर असंभव है) एक वेबसाइट के आगंतुकों पर एक विशिष्ट प्रारूप को मजबूर करने के लिए, क्योंकि वे एक कैलेंडर प्रारूप के लिए उपयोग किए जा सकते हैं जो आप उन पर बल देते हैं।

— डेविड वाल्शॉट्स

आप प्रस्तुति प्रारूप का उल्लेख कर रहे हैं, क्योंकि यदि आप input.val () पढ़ने की कोशिश करते हैं, तो google chrome (v35) प्रारूप yyyy-mm-dd में वह दिनांक लौटाता है, जो कुछ भी प्रस्तुति प्रारूप है;)

— Tilt

@DavidWalschots अगर केवल अमरीकियों को एहसास होगा कि यह दुनिया के बाकी हिस्सों में मंदबुद्धि स्वरूप को लागू करने के लिए कितना नासमझ है।

— user275801

@ user275801 जबकि मैं मानता हूं कि M-D-Yयह एक विषम प्रारूप है। मैंने अमेरिकियों को दूसरों पर मजबूर करने के लिए नहीं देखा है। :-)

— डेविड वाल्शॉट्स

@DavidWalschots अधिकांश सॉफ्टवेयर और ऑपरेटिंग सिस्टम जो मैंने देखे हैं, आपको उन्हें अमेरिकन मैडी प्रारूप के "ऑप्ट-आउट" करने की आवश्यकता है। उस अर्थ में, यह वास्तव में "मजबूर" है। वास्तव में मेरे लिनक्स में ऑस्ट्रेलिया के लिए सभी क्षेत्रीय सेटिंग्स हैं, लेकिन मेरा ब्राउज़र (एक अमेरिकी ब्राउज़र, अगर इसे कहा जा सकता है) अभी भी इसे mdy प्रारूप में सभी तिथियों को प्रदर्शित करने के लिए अपने आप में लेता है, और इस मामले में मैं असमर्थ हूं " बाहर निकलना"।

— user275801

Answer 7

यदि आपको एक त्वरित समाधान की आवश्यकता है, तो यह कोशिश करें कि yyyy-mm-dd "dd- Sep -2016" बनाएं

1) अपने इनपुट एक स्पैन क्लास के पास बनाएं (लेबल के रूप में कार्य करें)

2) लेबल को अपडेट करें हर बार आपकी तिथि उपयोगकर्ता द्वारा बदल दी जाती है, या जब डेटा से लोड करने की आवश्यकता होती है।

IE11 + के लिए वेबकिट ब्राउज़र मोबाइल और पॉइंटर-इवेंट्स के लिए काम करता है और इसके लिए jQuery और Jquery Date की आवश्यकता होती है

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>

Comments

यह प्रश्न का उत्तर नहीं देता है और इसके लिए 2 पुस्तकालयों की आवश्यकता होती है, जिनमें से किसी को भी टैग नहीं किया जाता है और न ही पूछा जाता है। यह तारीख की मैन्युअल प्रविष्टि की भी अनुमति नहीं देता है।

— रॉबिन

इसे बदलने के लिए नहीं कहा गया था, केवल प्रारूप दिखाएं ... आप इसे पूर्वावलोकन के रूप में कर सकते हैं, और परिवर्तन घटनाओं के साथ इनपुट का उपयोग कर सकते हैं, वैसे भी प्रारूप को अपडेट करने के लिए।

— मिगुएल

Answer 8

बहुत सारी चर्चाओं को पढ़ने के बाद, मैंने एक सरल समाधान तैयार किया है, लेकिन मैं बहुत से Jquascript का उपयोग करके बहुत सारे Jquery और CSS का उपयोग नहीं करना चाहता।

HTML कोड:

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

सीएसएस कोड:

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

आउटपुट:

Answer 9

जैसा कि कहा गया <input type=date ... >है, यह पूरी तरह से अधिकांश ब्राउज़रों में लागू नहीं किया गया है, तो आइए हम ब्राउज़रों (क्रोम) जैसे वेबकिट के बारे में बात करते हैं।

लिनक्स का उपयोग करते हुए, आप इसे पर्यावरण चर को बदलकर बदल सकते हैं LANG, LC_TIMEकाम करने के लिए नहीं लगता है (मेरे लिए कम से कम)।

आप localeअपने वर्तमान मूल्यों को देखने के लिए एक टर्मिनल में टाइप कर सकते हैं। मुझे लगता है कि इसी अवधारणा को IOS पर लागू किया जा सकता है।

जैसे: उपयोग करना:

LANG=en_US.UTF-8 /opt/google/chrome/chrome

दिनांक के रूप में दिखाया गया है mm/dd/yyyy

का उपयोग करते हुए:

LANG=pt_BR /opt/google/chrome/chrome

दिनांक के रूप में दिखाया गया है dd/mm/yyyy

आप अपने स्वयं के कस्टम लोकेल बनाने और अपनी तिथियों को प्रारूपित करने के लिए http://lh.2xlibre.net/locale/pt_BR/ ( pt_BRअपने स्थान से परिवर्तन ) का उपयोग कर सकते हैं।

डिफ़ॉल्ट सिस्टम दिनांक को बदलने के तरीके पर एक और अधिक उन्नत संदर्भ है: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ और https: // askubuntu। com / प्रश्न / 21316 / कैसे-कर सकते हैं-ए-अनुकूलित एक प्रणाली-स्थान

आप वास्तविक वर्तमान दिनांक प्रारूप का उपयोग करके देख सकते हैं date:

$ date +%x
01-06-2015

लेकिन जैसे-जैसे LC_TIMEऔर d_fmtक्रोम द्वारा अस्वीकार कर दिया जा करने के लिए (और मुझे लगता है कि यह वेबकिट या क्रोम में एक बग है) दुर्भाग्य से लगता है, यह काम नहीं करते । : '(

तो, दुर्भाग्य से प्रतिक्रिया है, यदि IF LANGपर्यावरण चर आपकी समस्या का समाधान नहीं करता है, तो अभी तक कोई रास्ता नहीं है।

Comments

+1 महान! प्रयोग: LANG=ja_JP.UTF-8 chromium-browserमेरे लिए चाल चली। यह विवाल्डी के साथ भी काम करता है और मैं अन्य ब्राउज़रों में भी अनुमान लगाता हूं। धन्यवाद!

— लेप

Answer 10

ब्राउज़र उपयोगकर्ता के सिस्टम दिनांक प्रारूप से दिनांक-इनपुट प्रारूप प्राप्त करते हैं।

(समर्थित ब्राउज़र, क्रोम, एज में परीक्षण किया गया।)

चूंकि तिथि नियंत्रण की शैली को बदलने के लिए चश्मे के रूप में परिभाषित कोई मानक नहीं है, इसलिए ब्राउज़रों में इसे लागू करना संभव नहीं है।

हालांकि, सिस्टम सेटिंग्स से दिनांक प्रारूप प्राप्त करने का यह व्यवहार बेहतर है और मैं दृढ़ता से सुझाव देता हूं, हमें इसे ओवरराइड करने का प्रयास नहीं करना चाहिए। इसका कारण यह है कि उपयोगकर्ता तारीख-इनपुट के प्रारूप को उसी रूप में देखेंगे जैसे उन्होंने सिस्टम / डिवाइस में कॉन्फ़िगर किया है और जिसे वे अपने लोकेल के साथ सहज या मेल खाते हैं।

याद रखें, यह स्क्रीन पर केवल यूआई प्रारूप है जो उपयोगकर्ता देखते हैं, आपकी जावास्क्रिप्ट / बैकएंड में आप हमेशा अपना वांछित प्रारूप रख सकते हैं।

उसी पर google Developers पेज देखें।

Comments

@downvoters, वर्तमान और भविष्य के उत्तर को बेहतर बनाने के लिए -1 के बारे में टिप्पणी छोड़ना बेहतर है।

— राहुल आर।

Answer 11

वेब-किट ब्राउज़र को उपयोगकर्ता के कंप्यूटर या मोबाइल पर डिफ़ॉल्ट दिनांक स्वरूप का उपयोग करना संभव नहीं है। लेकिन अगर आप jquery और jquery UI का उपयोग कर सकते हैं तो एक तारीख-लेने वाला है जो डिज़ाइन करने योग्य है और किसी भी प्रारूप में दिखाया जा सकता है जैसा कि डेवलपर चाहता है। jquery UI दिनांक-पिकर का लिंक इस पृष्ठ पर है http://jqueryui.com/datepicker/ आप डेमो के साथ-साथ कोड और प्रलेखन या प्रलेखन लिंक भी पा सकते हैं

संपादित करें: -मुझे लगता है कि क्रोम भाषा सेटिंग्स का उपयोग करता है जो डिफ़ॉल्ट रूप से सिस्टम सेटिंग्स के बराबर हैं लेकिन उपयोगकर्ता उन्हें बदल सकता है लेकिन डेवलपर उपयोगकर्ताओं को ऐसा करने के लिए मजबूर नहीं कर सकता है इसलिए आपको अन्य जेएस समाधानों का उपयोग करना होगा जैसे कि मैं बताता हूं कि आप वेब खोज सकते हैं जावास्क्रिप्ट दिनांक-बीनने या jquery दिनांक-पिकर जैसे प्रश्नों के साथ

Answer 12

मुझे प्रारूप बदलने का एक तरीका मिला, यह एक मुश्किल तरीका है, मैंने सिर्फ एक सीएसएस कोड का उपयोग करके दिनांक इनपुट फ़ील्ड की उपस्थिति बदल दी है।

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}

<input type="date" value="2019-12-07">

Answer 13

चूंकि पोस्ट 2 महीने पहले सक्रिय है। इसलिए मैंने अपना इनपुट भी देना चाहा।

मेरे मामले में मैं एक कार्ड रीडर से तारीख प्राप्त करता हूं जो dd / mm / yyyy प्रारूप में आता है।

मैं क्या करूं। उदाहरण के लिए

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }

<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

कोड क्या करते हैं:

1. यह उस तिथि को विभाजित करता है जो मुझे dd / mm / yyyy के रूप में मिलता है ("/" के आधार पर विभाजन () का उपयोग करके) और एक सरणी बनाता है
2. इसके बाद सरणी (रिवर्स () का उपयोग करके) के बाद से तारीख इनपुट मैं क्या मिलता है के रिवर्स का समर्थन करता है।
3. फिर यह इनपुट फ़ील्ड द्वारा आवश्यक प्रारूप के अनुसार एक स्ट्रिंग से जुड़ता है (ज्वाइन () का उपयोग करके)

यह सब एक लाइन में किया जाता है।

मैंने सोचा कि यह कुछ मदद करेगा इसलिए मैंने यह लिखा।

Comments

यह पूछे गए प्रश्न को संबोधित नहीं करता है; आप यहां एक कस्टम प्रारूप पार्स कर रहे हैं, उस प्रारूप को नहीं बदल <input>रहे हैं जो मूल्य दिखाने के लिए उपयोग करता है।

— मार्क अमेरी

यह सिर्फ एक काम है

— हिज्बुल्लाह शाह

Answer 14

मैंने 2 साल पहले इस मुद्दे को खोजा था, और मेरी Google खोजों ने मुझे फिर से इस प्रश्न की ओर अग्रसर किया। शुद्ध जावास्क्रिप्ट के साथ इसे संभालने की कोशिश में अपना समय बर्बाद न करें। मैं इसे बनाने की कोशिश में अपना समय बर्बाद करता हूं dd/mm/yyyy। कोई पूर्ण समाधान नहीं है जो सभी ब्राउज़रों के साथ फिट बैठता है। इसलिए मैं इसके स्थान पर डिफ़ॉल्ट तिथि प्रारूप के साथ काम करने के लिए jQuery डेटपाइकर का उपयोग करने या अपने ग्राहक को बताने की सलाह देता हूं

Answer 15

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

<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।