Girdi türü = “tarih” biçimini değiştirmenin bir yolu var mı?

Web sayfamda HTML5 öğeleriyle çalışıyorum. Varsayılan olarak giriş type="date"tarihi tarih olarak gösterir YYYY-MM-DD.

Soru şu ki, biçimini aşağıdaki gibi değiştirmek mümkün DD-MM-YYYYmü?

Biçimi değiştirmek imkansız

Kablo üzerinden biçim ile tarayıcının sunum biçimi arasında ayrım yapmamız gerekir.

Kablo biçimi

HTML5 tarihi giriş özelliği ifade eder , RFC 3339 tarifnamede e eşit bir tam tarih biçimini belirtir: yyyy-mm-dd. Daha fazla ayrıntı için RFC 3339 teknik özelliğinin 5.6 bölümüne bakın .

Bu biçim valueHTML özelliği ve DOM özelliği tarafından kullanılır ve normal form gönderme işlemi sırasında kullanılan biçimdir.

Sunum biçimi

Tarayıcılar bir tarih girdisi sunma biçiminde kısıtlanmamıştır. Chrome, Edge, Firefox ve Opera'yı yazarken tarih desteği var ( buraya bakın ). Hepsi bir tarih seçici görüntüler ve giriş alanındaki metni biçimlendirir.

Masaüstü cihazlar

Chrome, Firefox ve Opera için, giriş alanı metninin biçimlendirilmesi tarayıcının dil ayarını temel alır. Edge için Windows dil ayarını temel alır. Ne yazık ki, tüm web tarayıcıları işletim sisteminde yapılandırılan tarih biçimlendirmesini yok sayar. Bana göre bu çok garip bir davranış ve bu girdi türünü kullanırken göz önünde bulundurulması gereken bir şey. Örneğin, işletim sistemi veya tarayıcı dili ayarlanmış olan Hollandalı kullanıcılar alışık oldukları biçim yerine en-usgösterilecektir .01/30/201930-01-2019

Internet Explorer 9, 10 ve 11, kablo biçimiyle bir metin giriş alanı görüntüler.

Mobil cihazlar

Özellikle Android'de Chrome için biçimlendirme, Android görüntüleme dilini temel alır. Bunu doğrulayamadım, ancak aynı diğer tarayıcılar için de geçerli olduğundan şüpheleniyorum.

Bu soru sorulduğundan beri, web alanında birkaç şey oldu ve en heyecan verici olanlardan biri web bileşenlerinin inişidir . Artık ihtiyaçlarınıza göre tasarlanmış özel bir HTML5 öğesi ile bu sorunu zarif bir şekilde çözebilirsiniz . Herhangi bir html etiketinin çalışmasını geçersiz kılmak / değiştirmek isterseniz, sadece gölge dom ile oynamanızı kendiniz oluşturun .

İyi haber şu ki, zaten çok sayıda kazan plakası var, bu yüzden büyük olasılıkla sıfırdan bir çözüm bulmanız gerekmeyecek. Sadece kontrol insanlar inşa ediyoruz neyi ve oradan fikir edinmek.

Bunun için bir etiket kullanmanıza izin veren polimer için datetime-input gibi basit (ve çalışan) bir çözümle başlayabilirsiniz :

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

ya da yaratıcı ve pop-up tam tarih-toplayıcı olabilir istediğiniz gibi tarz biçimlendirme ve yerel ayarlar arzu, geri aramaları, ve seçeneklerin uzun liste ile, (eğer emrinde bir bütün özel API var!)

Standartlara uygun, kesmek yok.

İki kere kontrol mevcut polyfills ne tarayıcılar / versiyonları destekledikleri ve bu Kullanıcı kitlesinin yeterli% kapsıyorsa şansı kesinlikle kullanıcıların çoğu ele alacağız yani ... O, 2018 bu.

Umarım yardımcı olur!

Daha önce de belirtildiği gibi formatı değiştirmek resmi olarak mümkün değildir. Ancak alanı biçimlendirmek mümkündür, bu nedenle (biraz JS yardımı ile) tarihi istediğimiz formatta görüntüler. Tarih girdisini manipüle etme olasılıklarından bazıları bu şekilde kaybedilir, ancak formatı zorlama isteği daha büyükse, bu çözüm bir yol olabilir. Tarih alanları yalnızca şu şekilde kalır:

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

Gerisi biraz CSS ve JS: 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">

Masaüstü için Chrome'da ve iOS'ta Safari'de iyi çalışır (özellikle dokunmatik ekranlardaki yerel tarih manipülatörleri rakipsiz IMHO olduğundan). Başkalarını kontrol etmedi, ancak herhangi bir Webkit'te başarısız olmasını beklemeyin.

İki farklı formatı ayırt etmek önemlidir :

• RFC 3339 / ISO 8601 "kablo biçimi": YYYY-AA-GG. HTML5 spesifikasyonuna göre, bu, form gönderildikten sonra veya DOM API aracılığıyla istendiğinde girişin değeri için kullanılması gereken biçimdir. Bölge ve bölgeden bağımsızdır.
• Kullanıcı arayüzü kontrolü tarafından görüntülenen ve kullanıcı girişi olarak kabul edilen format. Tarayıcı satıcıları, kullanıcının tercih seçimini izlemeleri için teşvik edilir. Örneğin, Dil ve Metin tercihleri ​​bölmesinde "ABD" bölgesi seçili Mac OS'de, Chrome 20 "m / d / yy" biçimini kullanır.

HTML5 belirtimi, her iki biçimi de geçersiz kılmak veya el ile belirtmek için herhangi bir yöntem içermez.

Tarayıcının yerel tarih biçimini kullanacağına inanıyorum. Değiştirmenin mümkün olduğunu düşünmeyin. Elbette özel bir tarih seçici kullanabilirsiniz.

Google Chrome son beta sürümünde nihayet girişi kullanır type=dateve biçimi kullanılır DD-MM-YYYY.

Yani belirli bir formatı zorlamanın bir yolu olmalı. Bir HTML5 web sayfası geliştiriyorum ve tarih aramaları artık farklı biçimlerde başarısız oluyor.

Hızlı bir çözüme ihtiyacınız varsa bunu deneyin Yyyy-aa-gg yapmak için "dd- Eyl -2016"

1) Girdi bir span sınıfının yakınında oluşturun (etiket gibi davranın)

2) Tarihiniz kullanıcı tarafından her değiştirildiğinde veya verilerden yüklenmesi gerektiğinde etiketi güncelleyin.

IE11 + için webkit tarayıcı cepleri ve işaretçi olayları için çalışır jQuery ve Jquery Date gerektirir

$("#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>

Birçok tartışmayı okuduktan sonra basit bir çözüm hazırladım ama çok fazla Jquery ve CSS kullanmak istemiyorum, sadece bir javascript.

HTML Kodu:

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

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

Gibi, söz konusu <input type=date ... >bu yüzden tarayıcılar gibi webkit hakkında konuşması (krom) let tam çoğu tarayıcıda uygulanmadı.

Linux kullanarak, ortam değişkeni değiştirerek değiştirebilirsiniz LANG, LC_TIMEyapamaz (en azından benim için) çalışmaları gibi görünüyor.

localeMevcut değerlerinizi görmek için bir terminal yazabilirsiniz . Aynı kavramın IOS'a da uygulanabileceğini düşünüyorum.

örneğin: Kullanma:

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

Tarih şu şekilde gösterilir: mm/dd/yyyy

Kullanımı:

LANG=pt_BR /opt/google/chrome/chrome

Tarih şu şekilde gösterilir: dd/mm/yyyy

Sen kullanabilirsiniz http://lh.2xlibre.net/locale/pt_BR/ (değişiklik pt_BRistediğiniz gibi tarihlerinizi size kendi özel yerel oluşturmak ve biçimlendirmek için bölgeye göre).

Varsayılan sistem tarihinin nasıl değiştiğine dair daha gelişmiş bir referans: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ ve https: // askubuntu. com / sorular / 21316 / nasıl-can-i-özelleştir-a-sistem-yerel

Gerçek geçerli tarih biçimini aşağıdakileri kullanarak görebilirsiniz date:

$ date +%x
01-06-2015

Ama LC_TIMEve d_fmtne yazık ki, (ve bunu webkit veya krom bir hata olduğunu düşünüyorum) krom tarafından reddedilmesine görünüyor ÇaIsmyor . : '(

Yani, ne yazık ki, eğer LANGortam değişkeni sorununuzu çözmezse, henüz bir yolu yok.

Tarayıcılar, tarih giriş biçimini kullanıcının sistem tarih biçiminden alır.

(Desteklenen tarayıcılarda, Chrome, Edge'de test edilmiştir.)

Tarih kontrolünün stilini değiştirmek için şu an için spesifikasyonlar tarafından tanımlanan bir standart olmadığından, aynı şeyi tarayıcılarda uygulamak mümkün değildir.

Ancak, tarih biçimini sistem ayarlarından alma davranışı daha iyidir ve kesinlikle önermem, geçersiz kılmaya çalışmamalıyız. Bunun nedeni, kullanıcıların tarih-giriş biçimini sistemde / aygıtta yapılandırdıkları gibi görecekleri ve yerel ayarlarıyla rahat oldukları veya yerel ayarlarıyla eşleşecekleri görecektir.

Unutmayın, bu sadece kullanıcıların ekranda gördüğü UI formatıdır, javascript / arka uçta istediğiniz formatı her zaman koruyabilirsiniz.

Aynı anda google geliştiriciler sayfasına bakın.

Web kiti tarayıcılarını kullanıcının bilgisayarını veya cep telefonlarını varsayılan tarih biçimini kullanarak değiştirmek mümkün değildir. Ancak jquery ve jquery UI'yi kullanabiliyorsanız, geliştirilebilir ve geliştiricinin istediği herhangi bir biçimde gösterilebilen bir tarih seçici vardır. jquery UI tarih seçicinin bağlantısı bu sayfada http://jqueryui.com/datepicker/ demirin yanı sıra kod ve dokümantasyon veya dokümantasyon bağlantısını da bulabilirsiniz.

Düzenleme: -Benim krom varsayılan olarak sistem ayarlarına eşit dil ayarlarını kullanıyor ama kullanıcı bunları değiştirebilir, ancak geliştirici kullanıcıları bunu yapmaya zorlayamaz, bu yüzden web'de arama yapabileceğinizi söyleyen diğer js çözümlerini kullanmanız gerekir javascript tarih seçicileri veya jquery tarih seçicisi gibi sorgularla

biçimini değiştirmek için bir yol buldum, onun zor bir yolu, ben sadece sadece bir CSS kodu kullanarak tarih giriş alanlarının görünümünü değiştirdi.

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

Yazı 2 ay önce aktif olduğundan. bu yüzden de girdilerimi vermeyi düşündüm.

Benim durumumda gg / aa / yyyy biçiminde gelen bir kart okuyucudan tarih alıyorum.

ne yaptığım. Örneğin

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();">

kod ne yapar:

1. "d" / dd / aa / yyyy (split () kullanarak) tarihini böler ve bir dizi yapar,
2. daha sonra tarih girdisi aldığımın tersini desteklediğinden diziyi tersine çevirir (reverse () kullanarak).
3. daha sonra diziyi, giriş alanının gerektirdiği biçime göre bir dizeye ekler (join () kullanarak)

Bütün bunlar tek bir satırda yapılır.

Ben bu birine yardımcı olacağını düşündüm bu yüzden bunu yazdım.

Bu sorunu 2 yıl önce aradım ve google aramalarım beni tekrar bu soruya yönlendiriyor. Saf JavaScript ile bu sorunu çözmeye çalışırken zaman kaybetmeyin. Bunu yapmaya çalışırken zamanımı boşa harcıyorum dd/mm/yyyy. Tüm tarayıcılara uyan eksiksiz bir çözüm yoktur. Bu yüzden tarih jQuery seçici kullanmanızı veya müşterinize bunun yerine varsayılan tarih biçimiyle çalışmasını söylemenizi öneririm

Eski bir yazı olduğunu biliyorum ama google aramada ilk öneri olarak geliyor, kısa cevap no, önerilen cevap kullanıcı özel bir tarih piker, kullandığım doğru cevap tarih girişini simüle etmek ve istediğiniz herhangi bir formatı yapmak için bir metin kutusu kullanıyor , 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ılarda çalıştığını unutmayın.

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

3- Bu kodu sayfanızdaki birden çok tarih girişi için kullanacaksanız, lütfen hem işlev çağrısındaki metin girişinin "xTime" kimliğini ve girişin kendisini başka bir şeye değiştirin ve elbette, istediğiniz girişin adını kullanın. form gönder.

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