HTML tarih giriş etiketinde tarih biçimi nasıl ayarlanır?

105

Html <input type="date"></input>etiketinde tarih formatını ayarlamanın mümkün olup olmadığını merak ediyorum ... Şu anda bu yyyy-aa-gg iken, gg-aa-yyyy formatında ihtiyacım var.

html  date  input  format 
— Piotr
kaynak
3
Bir HTML5 girdi türü = tarih'in değer çıktısını belirtmenin olası bir kopyası değil mi? ? Ben söyleyebilirim, bu soru burada daha iyi biri o daha eski istedi, ancak o eski bir oldukça iyi bir cevabı vardır.
— Arsen7
— Vaibhav Mule
Ülke ayarlarım Hollandaca ve Chrome'da GG-AA-YYYY gösteriyor. Web sitesini kullanan istemcinin Windows ayarlarına bağlı gibi görünüyor.
— dark_passages

Yanıtlar:

11

Yapmıyorsun.

Birincisi, sorunuz belirsiz - kullanıcıya görüntülendiği formatı mı yoksa web sunucusuna iletildiği formatı mı kastediyorsunuz?

Kullanıcıya görüntülendiği formatı kastediyorsanız, bu, HTML'de belirttiğiniz hiçbir şeyi değil, son kullanıcı arayüzüne bağlıdır. Genellikle, işletim sistemi yerel ayarlarında ayarlandığı tarih biçimine dayalı olmasını beklerim. Görüntülediği biçim (genel olarak konuşulursa) kullanıcının yerel ayarı ve kullanıcının tarihleri ​​yazmak / anlamak için kullandığı biçim için doğru biçim olduğundan, kendi tercih ettiğiniz biçimle onu geçersiz kılmaya çalışmanın bir anlamı yoktur.

Sunucuya iletildiği biçimi kastediyorsanız, yanlış sorunu çözmeye çalışıyorsunuz demektir. Yapmanız gereken, sunucu tarafındaki kodu yyyy-aa-gg biçiminde tarihleri ​​kabul edecek şekilde programlamaktır.

— Stewart
kaynak
1
Maalesef ikinci yorumun gerçek dünyada pek doğru değil. Chrome ve Opera gibi bazı tarayıcılar, en azından varlıkların sırasına saygı gösterir , ancak bundan başka bir şey değildir. Örneğin, işletim sistemi yerel ayarlarım kısa bir tarih olarak bu yıl Ağustos ayının ilk gününün 1 / 8-2016 olması gerektiğini , ancak Chrome ve Opera'nın bile 01/08/2016 gösterilmesi gerektiğini belirtiyor . Safari ve Firefox gibi diğer tarayıcılar (en azından OS X'te) işletim sistemi ayarlarını tamamen yok sayar ve ne olursa olsun her zaman 2016-08-16'yı gösterir . Kullanıcıların kendi tarih tercihlerini ayarlayabildikleri bir sitede, bunu geçersiz kılmak kesinlikle mantıklıdır.
— Janus Bahs Jacquet
(Firefox ve Safari hakkındaki notu dikkate almayın… Yoruldum. Hiçbir tarayıcı tarih türünü desteklemiyor, bu nedenle değerin temel biçimini gösteriyorlar, yani mevcut kodum YYYY-AA-GG şeklindedir. .)
— Janus Bahs Jacquet
Ekran / giriş tarih formatını nasıl değiştireceklerini soran insanların çoğu, kullanıcıların kendi tercihlerini ayarlamalarını veya dünyaya kendi tercih ettikleri tarih formatlarını uygulamalarını sağlamak mı istiyor? İkincisi, söylediğim gibi, kimsenin yapmaması gereken bir şeydir, ancak ilkinin uygun olup olmadığı konusunda her iki şekilde de tartışabilirsiniz. Ancak sunum amaçlı bir ayar olacaktır, bu nedenle HTML kapsamı dışında kalır.
— Stewart
Sorun, bunun ayarlanamayan bir sunum ortamı olmasıdır . Sunum ayarları genel olarak CSS'ye aittir, ancak bunu CSS'de (veya başka bir yerde) değiştirmenin bir yolu yoktur. Ayrıca, HTML spesifikasyonunun kendisi bile sunum ayarlarından bağımsız değildir. Örneğin, ile ilgili bölüm input[type=password]"kullanıcı aracısının değeri gizlemesi gerektiğini, böylece kullanıcı dışındaki kişilerin görmemesi gerektiğini" söyler, bu da kullanıcı aracısının tarihi belirli bir şekilde sunması gerektiğini söylemek kadar sunumdur.
— Janus Bahs Jacquet
1
Bazıları , web yöneticilerinin dünya üzerinde kendi tercih ettikleri tarih biçimlerini uygulamalarını engellediği için bunun ayarlanamayacağının iyi bir şey olduğunu söyleyebilir . Ancak şifre girişleri beni düşündürdü. Pek çok yerde, HTML spesifikasyonu, esasen tarayıcı varsayılan stil sayfaları için öneriler olan sunum önerileri verir. Buradaki fark, bu özel sunum yönü için bir CSS özelliği yok gibi görünmesidir.
— Stewart
11

Stackoverflow'da aynı soruyu veya ilgili soruyu buldum

Giriş türü = "tarih" biçimini değiştirmenin bir yolu var mı?

Basit bir çözüm buldum, Partikül Formatı veremezsiniz ama bu şekilde özelleştirebilirsiniz.

HTML Kodu:

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

CSS Kodu:

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

Javascript Kodu:

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

Çıktı:

görüntü açıklamasını buraya girin

— külçe bhatt
kaynak
Daha da iyisi - normal giriş üzerinde şeffaf bir tarih kontrolü konumlandırmak için css kullanın
— George Mauer
Cevabınız için teşekkürler, bunun için herhangi bir bağlantınız veya kodunuz varsa, güncellemem gerekiyor
— ashish bhatt
Bu harika bir seçenektir.
— Dillon Burnett
Sanırım bunun CSS veya Javascript ile değil (soruya göre) HTML ile mümkün olup olmadığını soruyor.
— Shizukura
6

JQuery kullanıyorsanız, işte güzel ve basit bir yöntem

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

Veya eski geleneksel yol var:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
— sean.boyer
kaynak
4

Tarih türünü destekleyen ve firefox gibi henüz tarih türünü desteklemeyen diğer tarayıcılarda hala çalışmasına izin veren diğer özelliklerle birlikte html5 tarih kontrolünü olduğu gibi neden kullanmıyorsunuz?

<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"/>
— Paul IE
kaynak
<pre> <input type = "text" name = "input1" placeholder = "YYYY-AA-GG" gerekli kalıp = "[0-9] {4} - [0-9] {2} - [0-9 ] {2} "title =" Bu biçime bir tarih girin YYYY-AA-GG "/> </pre>
— Paul IE
8
Gereksinim açıkça şuydu: "Gg-aa-yyyy biçiminde ihtiyacım var." Bu nasıl yardımcı olur?
— Harijs Krūtainis
1
Firefox ile çalışmaz. Bu html, yer tutucu aa / gg / yyyy ile bir girdi gösterir. Pencerelerim ve firefox'um ilk dil olarak Hollandaca ayarlandı. Windows bölgesel ayarı kısa tarihi gösterir: 30-11-2018.
— Roland
1

Bunu kesin olarak bilmiyorum, ancak bunun kullanıcının tarih / saat ayarlarına göre tarayıcı tarafından ele alınması gerektiğini düşünüyorum. Bilgisayarınızı, tarihleri ​​bu biçimde görüntüleyecek şekilde ayarlamayı deneyin.

— Sözdizimi hatası
kaynak
1 
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
— Dheeraj Rao
kaynak
3
Hemen yardımcı olabilecek bu kod parçacığı için teşekkür ederiz. Uygun bir açıklama , bunun neden soruna iyi bir çözüm olduğunu göstererek eğitimsel değerini büyük ölçüde artıracak ve benzer, ancak aynı olmayan sorulara sahip gelecekteki okuyucular için daha yararlı hale getirecektir. Lütfen açıklama eklemek için cevabınızı düzenleyin ve hangi sınırlamaların ve varsayımların geçerli olduğuna dair bir gösterge verin.
— Toby Speight
1

Çok fazla araştırma yaptım ve birinin formatını zorlayabileceğini sanmıyorum <input type="date">. Tarayıcı yerel biçimi seçer ve kullanıcı ayarlarına bağlı olarak, kullanıcının dili İngilizce ise, tarih İngilizce biçiminde (aa / gg / yyyy) görüntülenecektir.

Bence en iyi çözüm, ekranı kontrol etmek için bir eklenti kullanmaktır.

Jquery DatePicker , yerelleştirmeyi , tarih biçimini zorlayabileceğiniz için iyi bir seçenek gibi görünüyor ...

— Fifi
kaynak
1

Yukarıda okuduğum her şeyden biraz farklı bir cevap buldum.

Benim çözümüm küçük bir JavaScript ve bir html girişi kullanıyor.

Bir girdi tarafından kabul edilen Tarih, 'yyyy-aa-gg' olarak biçimlendirilmiş bir Dize ile sonuçlanır. Onu bölebilir ve yeni bir Date () olarak düzgün bir şekilde yerleştirebiliriz.

İşte temel 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>

İşte temel JS:

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

Tarihi istediğiniz gibi biçimlendirebilirsiniz. Yeni bir Tarih () oluşturabilir ve oradaki tüm bilgileri alabilir ... veya dizenizi oluşturmak için sadece 'userDate []' kullanabilirsiniz.

Unutmayın, bir tarihin 'new Date ()' içine girilmesinin bazı yolları beklenmedik bir sonuç verir. (yani - bir gün geride)

— thielr7
kaynak
1 
<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>
— pala dattadri
kaynak
2
HTML kodunu buraya gönderdiğinizde, kod olarak biçimlendirmeniz çok önemlidir. Eğer yapmazsanız sayfanın bir parçası olarak biçimlendirilir ve cevabınız bir cevap gibi görünmez. Nasıl biçimlendireceğinizi bilmiyorsanız , yardım merkezinde bununla ilgili güzel bir rehber var
— Zoe
0

kısa doğrudan cevap hayır veya kutunun dışında değil, ancak tarih girişini simüle etmek ve istediğiniz herhangi bir formatı yapmak için bir metin kutusu ve saf JS kodu kullanmak için bir yöntem buldum, işte kod 

<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- Lütfen bu yöntemin yalnızca tarih türünü destekleyen tarayıcı için çalıştığını unutmayın.

2- JS kodundaki ilk işlev, tarih türünü desteklemeyen ve görünümü normal bir metin girişine ayarlayan tarayıcı içindir.

3- Bu kodu sayfanızda birden fazla tarih girişi için kullanacaksanız, lütfen hem işlev çağrısında hem de girişin kendisinde metin girişinin ID "xTime" değerini başka bir şeyle değiştirin ve tabii ki için istediğiniz girişin adını kullanın. form gönder.

4-ikinci işlevde gün + "/" + ay + "/" + yıl yerine istediğiniz herhangi bir biçimi kullanabilirsiniz, örneğin yıl + "/" + ay + "/" + gün ve metin girişinde aşağıdaki gibi bir yer tutucu veya değer kullanın sayfa yüklendiğinde kullanıcı için yyyy / aa / gg.

— gölgeli
kaynak
0

Aa-gg-yyyy olarak biçimlendirme için

aa = tarih.split ("-")

tarih = aa [1] + '-' + aa [2] + '-' + aa [0]

— Abilash Raghu
kaynak
-1

Bağımlılık olmadan temiz uygulama. 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>
— James Perih
kaynak
-1

Bu yyyy-aa-gg formatını javascript'te split yöntemi kullanarak gg-aa-yyyy olarak değiştirebiliriz.

let dateyear= "2020-03-18";
let arr = dateyear.split('-') //now we get array of these and we can made in any format as we want
let dateFormat = arr[2] + "-" + arr[1] + "-" + arr[0]  //In dd-mm-yyyy format
— Narun Dutta
kaynak
-2

İşte çözüm: 

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

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

umarım bu sorunu çözecektir :)

— Muhammed Waqas
kaynak
1
Çözümünüz tarih türü HTML girişini kullanmadığından soruyu gerçekten cevaplamıyor.
— Vincent
türünü tarihe ayarlamanıza gerek yoktur. tarih seçici için tarih olmadan çalışacaktır. Deneyin, umarım sorununuzu çözer.
— Muhammad Waqas
-3

Tarih değerinin biçimi 'YYYY-MM-DD'. Aşağıdaki örneğe bakın

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

İhtiyacınız olan tek şey tarihi php, asp, ruby ​​veya bu formata sahip olmak için herhangi bir şekilde formatlamaktır.

— Charmi
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.