Bagaimana cara menetapkan nilai default tanggal jenis input ke hari ini?

Jenis input HTML5 sangat bagus, pemilih tanggal bawaan baru Opera sangat mudah, dan Chrome setidaknya telah mendukung jenis masukan baru dengan implementasi roda putar.

Tetapi apakah ada cara untuk menetapkan nilai default bidang tanggal ke tanggal hari ini? Dengan Opera, saya dapat memilih 'Hari Ini' dari pemilih tanggal, dan segera setelah saya mengklik salah satu tombol langkah di Chrome, itu menambah / mengurangi dari tanggal hari ini.

Saya tidak malu untuk memberi kode solusi untuk masalah kecil ini, tetapi tampaknya konyol bagi saya bahwa kedua browser sepenuhnya menyadari tanggal saat ini tetapi tidak secara otomatis hanya memasukkannya (setidaknya sebagai pengganti).

Seperti bidang input HTML apa pun, browser akan membiarkannya kosong kecuali jika nilai default ditentukan dengan valueatribut.

Sayangnya HTML5 tidak menyediakan cara untuk menentukan 'hari ini' dalam valueatribut (yang dapat saya lihat), hanya tanggal RFC3339 yang valid seperti 2011-09-29.

TL; DR Gunakan YYYY-MM-DDformat tanggal atau tidak akan ditampilkan

Objek Tanggal JavaScript menyediakan dukungan bawaan yang cukup untuk format yang diperlukan untuk menghindari melakukannya secara manual:

Tambahkan ini untuk dukungan zona waktu yang benar:

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());
});​

JS murni:

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

ini bekerja untuk saya:

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

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

Kode berikut berfungsi dengan baik:

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

Perhatikan bahwa ini bergantung pada PHP.

Anda dapat mengisi nilai default melalui javascript seperti yang terlihat di sini: 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);
});

Saya mungkin akan memberikan sedikit waktu ekstra untuk melihat apakah bulan dan tanggal adalah satu digit dan awali dengan nol ekstra ... tetapi ini akan memberi Anda ide.

EDIT: Menambahkan cek untuk tambahan nol

Ikuti format Ymd standar, jika Anda menggunakan PHP

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

demo

Jika Anda tidak ingin menggunakan jQuery, Anda dapat melakukan sesuatu seperti ini

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;

demo

Dalam HTML5, tidak ada cara untuk menetapkan nilai default bidang tanggal ke tanggal hari ini? Seperti yang ditunjukkan dalam jawaban lain, nilainya dapat diatur menggunakan JavaScript, dan ini biasanya merupakan pendekatan terbaik jika Anda ingin mengatur default sesuai dengan tanggal saat ini kepada pengguna saat halaman dimuat.

HTML5 mendefinisikan valueAsDateproperti untuk input type=dateelemen, dan menggunakannya, Anda bisa mengatur nilai awal langsung dari objek yang dibuat misalnya oleh new Date(). Namun, misalnya IE 10 tidak tahu properti itu. (Ini juga tidak memiliki dukungan asli untukinput type=date , tapi itu masalah yang berbeda.)

Jadi dalam praktiknya Anda perlu mengatur valueproperti, dan harus dalam notasi konforman ISO 8601. Saat ini hal ini dapat dilakukan dengan lebih mudah, karena kita dapat mengharapkan browser yang digunakan saat ini untuk mendukung toISOStringmetode ini:

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

Jika Anda melakukan sesuatu yang berkaitan dengan tanggal dan waktu di browser, Anda ingin menggunakan Moment.js :

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

moment()mengembalikan objek yang mewakili tanggal dan waktu saat ini. Anda kemudian memanggil .format()metodenya untuk mendapatkan representasi string sesuai dengan format yang ditentukan. Dalam hal ini YYYY-MM-DD,.

Contoh lengkap:

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

gunakan moment.js untuk menyelesaikan masalah ini dalam 2 baris, tipe input tanggal html5 hanya menerima "YYYY-MM-DD" format ini. Saya memecahkan masalah saya dengan cara ini.

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

ini adalah cara paling sederhana untuk menyelesaikan masalah ini.

Javascript

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

Jquery

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

Pilihan lain

Jika Anda ingin menyesuaikan tanggal, bulan dan tahun, lakukan saja jumlah atau sub sesuai keinginan Anda 😎 Untuk bulan dimulai dari 0, itulah mengapa perlu menjumlahkan 1 dengan bulan.

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

Appy fungsi hari ini

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

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

Sangat Sederhana, Cukup gunakan bahasa sisi server seperti PHP, ASP, JAVA atau bahkan Anda dapat menggunakan javascript.

Ini solusinya

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

jika Anda perlu mengisi input datetime, Anda dapat menggunakan ini:

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

Untuk NodeJS (Ekspres dengan templat SWIG):

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

Solusi paling sederhana tampaknya mengabaikan waktu UTC yang akan digunakan, termasuk yang sangat terpilih. Di bawah ini adalah versi sederhana, ES6, non-jQuery dari beberapa jawaban yang ada:

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

Inilah yang saya lakukan dalam kode saya, saya baru saja menguji dan itu bekerja dengan baik, tipe input = "date" tidak mendukung untuk mengatur curdate secara otomatis, jadi cara saya mengatasi keterbatasan ini adalah menggunakan kode PHP kode sederhana seperti ini .

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

Semoga ini bisa membantu!

Kedua jawaban teratas itu salah.

Lapisan pendek yang menggunakan JavaScript murni, menyumbang zona waktu lokal dan tidak memerlukan fungsi tambahan untuk didefinisikan:

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

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

Ini mendapatkan datetime saat ini dalam milidetik (sejak zaman) dan menerapkan zona waktu offset dalam milidetik (menit * 60k menit per milidetik).

Anda dapat mengatur tanggal menggunakan element.valueAsDatetetapi kemudian Anda memiliki panggilan tambahan ke Date()konstruktor.

Ini adalah sesuatu yang benar-benar perlu Anda lakukan di sisi server karena format waktu lokal masing-masing pengguna berbeda, belum lagi setiap browser berperilaku berbeda.

Nilai input Tanggal Html harus dalam format ini: yyyy-mm-dd jika tidak maka tidak akan menampilkan nilai.

ASP CLASSIC, ATAU 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

Output tanggal hari ini: 2019-02-08

Kemudian di html Anda: <input type="date" value="<% =get_date %>"

PHP

gunakan saja ini: <input type="date" value="<?= date("Y-m-d"); ?>">

Ini sangat sederhana dengan menerapkan kode berikut, Menggunakan PHP

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

Fungsi tanggal akan mengembalikan tanggal saat ini, dengan mencatat tanggal di time() .

oleh Javascript:

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)

Jika Anda menggunakan ruby, Anda dapat menggunakan ini untuk menetapkan nilai default ke tanggal dan waktu hari ini:

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

Solusi sederhana:

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

Karena tidak ada metode default untuk menetapkan nilai tanggal hari ini, saya akan mengatakan ini harus bergantung pada aplikasi itu. Jika Anda ingin memaksimalkan pemaparan audiens Anda ke pemilih tanggal, maka gunakan skrip sisi server (PHP, ASP, dll.) Untuk menetapkan nilai default.

Namun, jika itu untuk konsol administrasi CMS, dan Anda tahu bahwa pengguna akan selalu memiliki JS di atau situs Anda tepercaya, maka Anda dapat menggunakan JS dengan aman untuk mengisi nilai default, sesuai jlbruno.

Saya memiliki masalah yang sama dan saya memperbaikinya dengan JS sederhana. Input:

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

JS

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

Penting: skrip JS harus berada di baris kode terakhir, atau setelah dimasukkan, karena jika Anda memasukkan kode ini sebelumnya, skrip tidak akan menemukan input Anda.

Tidak ada metode standar dalam HTML itu sendiri untuk memasukkan tanggal hari ini ke dalam bidang input. Namun, seperti bidang input lainnya, ia akan menerima nilai.

Anda bisa menggunakan PHP untuk mengambil tanggal hari ini dan memasukkannya ke dalam bidang nilai elemen formulir.

<?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' />";
?>

Bidang nilai menerima format YYYY-MM-DD sebagai input sehingga cukup dengan membuat variabel $date_string dalam format yang sama dengan nilai input yang diterima dan mengisinya dengan tahun, bulan dan hari yang diambil dari tanggal hari ini dan nol! Anda memiliki tanggal pemilihan sendiri!

Semoga ini membantu :)

Edit:

Jika Anda ingin membuat field input bersarang dalam HTML daripada PHP, Anda bisa melakukan hal berikut.

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

Saya menyadari pertanyaan ini ditanyakan beberapa waktu yang lalu (2 tahun yang lalu) tetapi masih butuh beberapa saat untuk menemukan jawaban yang pasti di internet, jadi ini berlaku untuk siapa saja yang mencari jawabannya kapan pun mungkin dan berharap itu sangat membantu semua orang :)

Edit Lainnya:

Hampir lupa, sesuatu yang telah menjadi masalah besar bagi saya di masa lalu selalu lupa untuk mengatur zona waktu default setiap kali membuat skrip dalam PHP yang menggunakan fungsi date ().

Sintaksnya adalah date_default_timezone_set(...);. Dokumentasi dapat ditemukan di sini di PHP.net dan daftar zona waktu yang didukung untuk disisipkan ke dalam fungsi dapat ditemukan di sini . Ini selalu mengganggu karena saya di Australia, semuanya selalu didorong mundur 10 jam jika saya tidak mengatur ini dengan benar karena defaultnya ke UTC + 0000 di mana saya membutuhkan UTC + 1000 jadi berhati-hatilah :)

Terima kasih peter, sekarang saya mengubah kode saya.

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

Dan bagi mereka yang menggunakan ASP VBScript

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

Dan kemudian di dalam tubuh, elemen Anda akan terlihat seperti ini

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

Bersulang!

Bahkan setelah sekian lama, itu mungkin membantu seseorang. Ini adalah solusi JS sederhana.

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>

Solusi serupa berfungsi di Angular tanpa pustaka tambahan untuk mengonversi format tanggal. Untuk Angular (kode disingkat karena kode komponen umum):

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