Giriş türü tarihinin varsayılan değerini bugün olarak nasıl ayarlayabilirim?

HTML5 giriş türleri harika, Opera'nın yeni yerleşik tarih seçici bir esinti ve Chrome en azından yeni giriş türünü bir spin-wheel uygulamasıyla destekledi.

Ancak, tarih alanının varsayılan değerini bugünün tarihine ayarlamanın bir yolu var mı? Opera ile tarih seçiciden 'Bugün'ü seçebilirim ve Chrome'daki adım düğmelerinden birini tıklar tıklamaz, bugünün tarihinden itibaren artar / azalır.

Bu küçük soruna bir çözüm kodlamak için utangaç değilim, ama her iki tarayıcı da şu anki tarihin tamamen farkında olduğunu, ancak otomatik olarak (en azından bir yer tutucu olarak) pop olmayacak bana aptalca görünüyor.

Herhangi bir HTML giriş alanı gibi, valueözellik ile varsayılan bir değer belirtilmedikçe tarayıcı alanı boş bırakır .

Ne yazık ki HTML5, valuenitelikte ( bugün görebildiğim) 'bugün' belirtmenin bir yolunu sağlamaz , yalnızca RFC3339 geçerli bir tarih gibi 2011-09-29.

TL; DRYYYY-MM-DD Tarih biçimini kullan yoksa görüntülenmez

JavaScript Tarih nesnesi, manuel olarak yapılmasını önlemek için gereken biçim için yeterli yerleşik destek sağlar:

Doğru saat dilimi desteği için bunu ekleyin:

Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
    return local.toJSON().slice(0,10);
});

jQuery:

$(document).ready( function() {
    $('#datePicker').val(new Date().toDateInputValue());
});​

Saf JS:

document.getElementById('datePicker').value = new Date().toDateInputValue();

bu benim için çalışıyor:

document.getElementById('datePicker').valueAsDate = new Date();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Aşağıdaki kod iyi çalışıyor:

<input type="date" value="<?php echo date('Y-m-d'); ?>" />

Bunun PHP'ye dayandığını unutmayın.

Varsayılan değeri burada görüldüğü gibi javascript aracılığıyla doldurabilirsiniz: http://jsfiddle.net/7LXPq/

$(document).ready( function() {
    var now = new Date();
    var month = (now.getMonth() + 1);               
    var day = now.getDate();
    if (month < 10) 
        month = "0" + month;
    if (day < 10) 
        day = "0" + day;
    var today = now.getFullYear() + '-' + month + '-' + day;
    $('#datePicker').val(today);
});

Muhtemelen ay ve tarihin tek haneli olup olmadığını görmek için fazladan zaman ayıracağım ve ekstra sıfır ile önekini ekleyeceğim ... ama bu size bir fikir vermeli.

DÜZENLEME: Ekstra sıfır kontrolü eklendi

PHP kullanıyorsanız standart Ymd biçimini izleyin

<input type="date" value="<?php echo date("Y-m-d"); ?>">

HTML

<input type="date" id="theDate">

JS

$(document).ready(function() {
    var date = new Date();

    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    var today = year + "-" + month + "-" + day;       
    $("#theDate").attr("value", today);
});

gösteri

JQuery kullanmak istemiyorsanız böyle bir şey yapabilirsiniz

HTML

<input type="date" id="theDate">

JS

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;       
document.getElementById("theDate").value = today;

gösteri

HTML5'te, tarih alanının varsayılan değerini bugünün tarihine ayarlamanın bir yolu yok mu? Diğer yanıtlarda gösterildiği gibi, değer JavaScript kullanılarak ayarlanabilir ve sayfa yüklendiğinde kullanıcının geçerli tarihe göre varsayılanı ayarlamak istiyorsanız bu genellikle en iyi yaklaşımdır.

HTML5, öğelerin valueAsDateözelliğini tanımlar input type=dateve bunu kullanarak, başlangıç ​​değerini doğrudan tarafından oluşturulan bir nesneden ayarlayabilirsiniz new Date(). Ancak, örneğin IE 10 bu özelliği bilmiyor. (Ayrıca gerçek bir desteğe sahip değildir input type=date, ancak bu farklı bir konudur.)

Bu yüzden pratikte valueözelliği ayarlamanız gerekir ve ISO 8601 uygun gösteriminde olmalıdır. Günümüzde bu oldukça kolay bir şekilde yapılabilir, çünkü şu anda kullanılan tarayıcıların toISOStringyöntemi desteklemesini bekleyebiliriz :

<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>

Tarayıcıdaki tarih ve saatle ilgili bir şey yapıyorsanız Moment.js'yi kullanmak istiyorsunuz :

moment().format('YYYY-MM-DD');

moment()geçerli tarihi ve saati temsil eden bir nesne döndürür. Ardından .format(), belirtilen biçime göre bir dize temsili almak için yöntemini çağırırsınız . Bu durumda YYYY-MM-DD,.

Tam örnek:

<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>

Bu sorunu 2 satırda çözmek için moment.js'yi kullanın, html5 tarih giriş türü yalnızca bu biçimi "YYYY-AA-GG" kabul eder. Sorunumu bu şekilde çözüyorum.

var today = moment().format('YYYY-MM-DD');
 $('#datePicker').val(today);

bu sorunu çözmenin en basit yoludur.

JavaScript

document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);

jQuery

$('#date-field').val(new Date().toISOString().slice(0, 10));

Başka seçenek

Tarih, ay ve yılı özelleştirmek istiyorsanız, sadece istediğiniz gibi toplamı veya altını yapın 😎 Ay ​​için 0'dan başlar, bu nedenle ay ile 1'i toplamanız gerekir.

function today() {
        let d = new Date();
        let currDate = d.getDate();
        let currMonth = d.getMonth()+1;
        let currYear = d.getFullYear();
        return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
    }

Bugün fonksiyonunu uygula

document.getElementById('date-field').value = today();

$('#date-field').val(today());

Çok Basit, Sadece PHP, ASP, JAVA gibi sunucu tarafı dilleri kullanın veya hatta javascript kullanabilirsiniz.

İşte çözüm

<?php
  $timezone = "Asia/Colombo";
  date_default_timezone_set($timezone);
  $today = date("Y-m-d");
?>
<html>
  <body>
    <input type="date" value="<?php echo $today; ?>">
  </body>
</html>

<input id="datePicker" type="date" />

$(document).ready( function() {
    var now = new Date();
 
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);

    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;


   $('#datePicker').val(today);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />

giriş tarih saatini doldurmanız gerekiyorsa bunu kullanabilirsiniz:

<input type="datetime-local" name="datetime" 
       value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />

NodeJS için (SWIG şablonlarıyla Express):

<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />

En basit çözümler, yüksek oy kullanan olanlar da dahil olmak üzere UTC zamanının kullanılacağını göz ardı ediyor gibi görünüyor. Aşağıda, mevcut birkaç cevabın modern, ES6, jQuery olmayan bir sürümü bulunmaktadır:

const today = (function() {
    const now = new Date();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    return `${now.getFullYear()}-${month}-${day}`;
})();
console.log(today); // as of posting this answer: 2019-01-24

Bu benim koduma yaptım, ben sadece test ettik ve iyi çalıştı, giriş türü = "tarih" otomatik olarak curdate ayarlamak için desteklemiyor, bu yüzden bu sınırlamanın üstesinden gelmek için kullanılan yolu PHP kodu böyle basit bir kod kullanmak oldu .

<html>
<head></head>
    <body>
        <form ...>
            <?php
                echo "<label for='submission_date'>Data de submissão</label>";
                echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
            ?>
        </form>
    </body>
</html>

Umarım yardımcı olur!

Her iki üst yanıt da yanlış.

Saf JavaScript kullanan kısa bir tek satır, yerel saat dilimini hesaba katar ve tanımlanması gereken ek işlevler gerektirmez:

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;

<input id='date-input' type='date'>

Bu, geçerli tarih saatini milisaniye olarak alır (dönemden beri) ve saat dilimi ofsetini milisaniye (milisaniye başına dakika * 60k dakika) olarak uygular.

Tarihi kullanarak ayarlayabilirsiniz element.valueAsDateancak sonra Date()yapıcı için ekstra bir çağrı var .

Her kullanıcının yerel saat biçimi farklı olduğundan, sunucu tarafında yapmanız gereken bir şeydir, her tarayıcının farklı davrandığından bahsetmiyoruz.

Html Tarih girişleri değeri şu biçimde olmalıdır: yyyy-aa-gg aksi takdirde bir değer göstermez.

ASP KLASİK VEYA VBSCRIPT:

current_year = DatePart("yyyy",date) 
current_month = DatePart("m",date) 
current_day = DatePart("d",date) 

IF current_month < 10 THEN
current_month = "0"&current_month
END IF
IF current_day < 10 THEN
current_day = "0"&current_day
END IF

get_date = current_year&"-"&current_month&"-"&current_day
Response.Write get_date

Bugünün çıktısı: 2019-02-08

Sonra html'nizde: <input type="date" value="<% =get_date %>"

PHP

sadece şunu kullanın: <input type="date" value="<?= date("Y-m-d"); ?>">

Bu, aşağıdaki kodu uygulayarak, PHP

<input type="date" value="<?= date('Y-m-d', time()); ?>" />

Tarih işlevi, tarih girerek geçerli tarihi döndürür time().

Javascript tarafından:

var today = new Date();

document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)

Ruby kullanıyorsanız, varsayılan değeri bugünün tarih ve saatine ayarlamak için bunu kullanabilirsiniz:

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />

Basit bir çözüm:

<input class="set-today" type="date">
<script type="text/javascript">
    window.onload= function() {
        document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
    }
</script>

Değeri bugünün tarihine ayarlamak için varsayılan bir yöntem olmadığından, bunun uygulamasına bağlı olması gerektiğini söyleyebilirim. Kitlenizin tarih seçiciyle gösterimini en üst düzeye çıkarmak istiyorsanız, varsayılan değeri ayarlamak için sunucu tarafı bir komut dosyası (PHP, ASP, vb.) Kullanın.

Ancak, CMS'nin yönetim konsolu içinse ve kullanıcının her zaman JS'de veya sitenizde güvenilir olacağını biliyorsanız, jlbruno'ya göre varsayılan değeri doldurmak için JS'yi güvenle kullanabilirsiniz.

Aynı sorunu yaşadım ve basit JS ile düzelttim. Girdi:

<input type="date" name="dateOrder" id="dateOrder"  required="required">

JS

<script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

Önemli: JS betiği son kod satırında veya girdikten sonra olmalıdır, çünkü bu kodu daha önce koyarsanız, komut dosyası girdinizi bulamaz.

HTML'nin içinde, giriş alanına bugünün tarihini eklemek için varsayılan bir yöntem yoktur. Ancak, diğer tüm giriş alanları gibi bir değer kabul eder.

Bugünün tarihini almak ve form öğesinin değer alanına girmek için PHP'yi kullanabilirsiniz.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";

    // Send to the browser the input field with the value set with the date string
    echo "<input type='date' value='$date_string' />";
?>

Değer alanı, YYYY-AA-GG biçimini bir girdi olarak kabul eder, böylece $date_stringgiriş değerinin kabul ettiği formatta bir değişken oluşturarak ve bunu bugünün tarihinden ve voilá'dan getirilen yıl, ay ve günle doldurur! Kendinize önceden seçilmiş bir tarih var!

Bu yardımcı olur umarım :)

Düzenle:

Girdi alanının PHP yerine HTML içinde yuvalanmasını istiyorsanız aşağıdakileri yapabilirsiniz.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";
?>
<html>
    <head>...</head>
    <body>
        <form>
            <input type="date" value="<?php print($date_string); ?>" />
        </form>
    </body>
</html>

Bu sorunun bir süre önce (2 yıl önce) sorulduğunu fark ettim, ancak yine de internette kesin bir cevap bulmam biraz zaman aldı, bu yüzden her ne zaman olursa olsun cevabı arayan herkese hizmet ediyor ve umarım herkese çok yardımcı olur :)

Başka Bir Düzenleme:

Neredeyse unuttum, geçmişte benim için kraliyet ağrısı olan bir şey PHP'de date () işlevini kullanan bir komut dosyası oluştururken her zaman varsayılan saat dilimini ayarlamayı unutuyor.

Sözdizimi date_default_timezone_set(...);. Belgeler bulunabilir php.net burada ve işlevine eklemek için desteklenen zaman dilimlerinin listesi burada bulunabilir . Avustralya'da olduğumdan beri bu her zaman sinir bozucuydu, bunu UTC + 1000'e ayarladığım gibi varsayılan olarak ayarlamamış olsaydım her zaman 10 saat geri itilir, bu yüzden dikkatli olun :)

Teşekkürler peter, şimdi kodumu değiştiriyorum.

<input type='date' id='d1' name='d1'>

<script type="text/javascript">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
    m1="0"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
</script>

Ve ASP VBScript kullananlar için

<%
'Generates date in yyyy-mm-dd format
Function GetFormattedDate(setDate)
strDate = CDate(setDate)
strDay = DatePart("d", strDate)
strMonth = DatePart("m", strDate)
strYear = DatePart("yyyy", strDate)
If strDay < 10 Then
  strDay = "0" & strDay
End If
If strMonth < 10 Then
  strMonth = "0" & strMonth
End If
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
%>

Ve sonra vücutta, öğeniz böyle bir şey olmalı

<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />

Şerefe!

Bunca zamandan sonra bile, birisine yardımcı olabilir. Bu basit bir JS çözümüdür.

JS

  let date = new Date();
  let today = date.toISOString().substr(0, 10);
  //console.log("Today: ", today);//test
  document.getElementById("form-container").innerHTML =
    '<input type="date" name="myDate" value="' + today + '" >';//inject field

HTML

 <form id="form-container"></form>

Benzer çözüm, tarih biçimini dönüştürmek için herhangi bir ek kütüphane olmadan Angular'da çalışır . Açısal için (ortak bileşen kodu nedeniyle kod kısaltılır):

//so in myComponent.ts 
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
   //constructor, etc.... 
   ngOnInit() {
      this.today = this.date.toISOString().substr(0, 10);
   }
}
//so in component.html 
<input type="date" [(ngModel)]="today"  />