Làm cách nào để đặt giá trị mặc định của ngày nhập vào ngày hôm nay?

Các loại đầu vào HTML5 rất tuyệt, công cụ chọn ngày tích hợp mới của Opera rất đơn giản và Chrome ít nhất đã hỗ trợ loại đầu vào mới với triển khai bánh xe quay.

Nhưng có cách nào để đặt giá trị mặc định của trường ngày thành ngày hôm nay không? Với Opera, tôi có thể chọn 'Hôm nay' từ công cụ chọn ngày và ngay khi tôi nhấp vào một trong các nút bước trong Chrome, nó sẽ tăng / giảm từ ngày hôm nay.

Tôi không ngại viết mã cho một giải pháp cho vấn đề nhỏ này, nhưng có vẻ ngớ ngẩn với tôi rằng cả hai trình duyệt đều biết đầy đủ về ngày hiện tại nhưng sẽ không tự động chỉ bật nó (ít nhất là một trình giữ chỗ).

Giống như bất kỳ trường nhập HTML nào, trình duyệt sẽ để trống, trừ khi giá trị mặc định được chỉ định với valuethuộc tính.

Thật không may, HTML5 không cung cấp cách chỉ định 'hôm nay' trong valuethuộc tính (mà tôi có thể thấy), chỉ một ngày hợp lệ RFC3339 như thế nào 2011-09-29.

TL; DR Sử dụng YYYY-MM-DDđịnh dạng ngày hoặc nó sẽ không hiển thị

Đối tượng Ngày JavaScript cung cấp đủ hỗ trợ tích hợp cho định dạng được yêu cầu để tránh thực hiện thủ công:

Thêm phần này để hỗ trợ múi giờ chính xác:

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 thuần túy:

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

cái này hiệu quả với tôi

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

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

Các mã sau hoạt động tốt:

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

Lưu ý rằng điều này phụ thuộc vào PHP.

Bạn có thể điền giá trị mặc định thông qua javascript như được thấy ở đây: 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);
});

Tôi có lẽ sẽ đặt thêm một chút thời gian để xem tháng và ngày có phải là một chữ số không và tiền tố chúng có thêm 0 không ... nhưng điều này sẽ cho bạn một ý tưởng.

EDIT: Đã thêm kiểm tra cho số không thêm

Theo định dạng Ymd tiêu chuẩn, nếu bạn đang sử dụng PHP

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

HTML

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

Mã não

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

bản giới thiệu

Nếu bạn không muốn sử dụng jQuery, bạn có thể làm một cái gì đó như thế này

HTML

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

Mã não

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;

bản giới thiệu

Trong HTML5 như vậy, không có cách nào để đặt giá trị mặc định của trường ngày thành ngày hôm nay? Như được hiển thị trong các câu trả lời khác, giá trị có thể được đặt bằng JavaScript và đây thường là cách tiếp cận tốt nhất nếu bạn muốn đặt mặc định theo ngày hiện tại cho người dùng khi trang được tải.

HTML5 xác định valueAsDatetài sản cho input type=datecác yếu tố, và sử dụng nó, bạn có thể thiết lập giá trị ban đầu trực tiếp từ một đối tượng được tạo ra ví dụ bằng new Date(). Tuy nhiên, ví dụ IE 10 không biết thuộc tính đó. (Nó cũng thiếu hỗ trợ chính hãng input type=date, nhưng đó là một vấn đề khác.)

Vì vậy, trong thực tế, bạn cần đặt thuộc valuetính và nó phải ở trong ký hiệu tuân thủ ISO 8601. Ngày nay điều này có thể được thực hiện khá dễ dàng, vì chúng ta có thể mong đợi các trình duyệt được sử dụng hiện tại hỗ trợ toISOStringphương thức:

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

Nếu bạn đang làm bất cứ điều gì liên quan đến ngày và thời gian trong trình duyệt, bạn muốn sử dụng Moment.js :

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

moment()trả về một đối tượng đại diện cho ngày và thời gian hiện tại. Sau đó, bạn gọi .format()phương thức của nó để có được một chuỗi đại diện theo định dạng đã chỉ định. Trong trường hợp này , YYYY-MM-DD.

Ví dụ đầy đủ:

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

sử dụng khoảnh khắc.js để giải quyết vấn đề này trong 2 dòng, loại đầu vào ngày html5 chỉ chấp nhận "YYYY-MM-DD" định dạng này. Tôi giải quyết vấn đề của mình theo cách này.

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

đây là cách đơn giản nhất để giải quyết vấn đề này

Javascript

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

Jquery

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

Một lựa chọn khác

Nếu bạn muốn tùy chỉnh ngày, tháng và năm, chỉ cần thực hiện tổng hoặc phụ theo mong muốn của bạn 😎 Đối với tháng được bắt đầu từ mẫu 0, đó là lý do tại sao cần phải tổng 1 với tháng.

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

Áp dụng chức năng hôm nay

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

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

Rất đơn giản, chỉ cần sử dụng các ngôn ngữ phía máy chủ như PHP, ASP, JAVA hoặc thậm chí bạn có thể sử dụng javascript.

Đây là giải pháp

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

nếu bạn cần điền datetime đầu vào, bạn có thể sử dụng:

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

Đối với NodeJS (Express với các mẫu SWIG):

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

Các giải pháp đơn giản nhất dường như bỏ qua rằng thời gian UTC sẽ được sử dụng, bao gồm cả những giải pháp được đánh giá cao. Dưới đây là phiên bản sắp xếp hợp lý, ES6, không phải jQuery của một vài câu trả lời hiện có:

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

Đây là những gì tôi đã làm trong mã của mình, tôi vừa thử nghiệm và nó hoạt động tốt, kiểu nhập = "ngày" không hỗ trợ tự động đặt curdate, vì vậy cách tôi sử dụng để khắc phục giới hạn này là sử dụng mã PHP một mã đơn giản như thế này .

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

Hy vọng nó giúp!

Cả hai câu trả lời hàng đầu đều không chính xác.

Một lớp lót ngắn sử dụng JavaScript thuần túy, chiếm các múi giờ cục bộ và không yêu cầu thêm chức năng nào được xác định:

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

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

Điều này nhận được thời gian hiện tại tính bằng mili giây (kể từ epoch) và áp dụng bù thời gian theo mili giây (phút * 60k phút mỗi mili giây).

Bạn có thể đặt ngày bằng cách sử dụng element.valueAsDatenhưng sau đó bạn có thêm một cuộc gọi đến hàm Date()tạo.

Đây là điều bạn thực sự cần làm phía máy chủ vì định dạng giờ địa phương của mỗi người dùng khác nhau, chưa kể mỗi trình duyệt hoạt động khác nhau.

Giá trị đầu vào Ngày của Html phải ở định dạng này: yyyy-mm-dd nếu không nó sẽ không hiển thị giá trị.

LỚP ASP, HOẶC 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

Đầu ra của ngày hôm nay: 2019-02-08

Sau đó, trong html của bạn: <input type="date" value="<% =get_date %>"

PHP

chỉ sử dụng cái này <input type="date" value="<?= date("Y-m-d"); ?>">

Điều này rất đơn giản bằng cách áp dụng mã sau đây, Sử dụng PHP

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

Chức năng ngày sẽ trả về ngày hiện tại, bằng cách lấy ngày trong time().

bằng 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)

Nếu bạn đang sử dụng ruby, bạn có thể sử dụng giá trị này để đặt giá trị mặc định thành ngày và giờ hôm nay:

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

Một giải pháp đơn giản:

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

Vì không có phương pháp mặc định nào để đặt giá trị cho đến ngày hôm nay, tôi sẽ nói rằng điều này nên phụ thuộc vào ứng dụng của nó. Nếu bạn đang tìm cách tối đa hóa mức độ hiển thị của đối tượng của mình với bộ chọn ngày, thì hãy sử dụng tập lệnh phía máy chủ (PHP, ASP, v.v.) để đặt giá trị mặc định.

Tuy nhiên, nếu đó là bảng điều khiển quản trị của CMS và bạn biết rằng người dùng sẽ luôn có JS trên hoặc trang web của bạn đáng tin cậy, thì bạn có thể sử dụng JS một cách an toàn để điền vào giá trị mặc định, theo jlbruno.

Tôi đã có cùng một vấn đề và tôi đã sửa nó bằng JS đơn giản. Đầu vào:

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

JS

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

Quan trọng: tập lệnh JS phải nằm trong dòng mã cuối cùng hoặc sau khi nhập, bởi vì nếu bạn đặt mã này trước, tập lệnh sẽ không tìm thấy đầu vào của bạn.

Không có phương thức mặc định nào trong chính HTML để chèn ngày hôm nay vào trường đầu vào. Tuy nhiên, giống như bất kỳ trường đầu vào nào khác, nó sẽ chấp nhận một giá trị.

Bạn có thể sử dụng PHP để tìm nạp ngày hôm nay và nhập nó vào trường giá trị của phần tử biểu mẫu.

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

Trường giá trị chấp nhận định dạng YYYY-MM-DD làm đầu vào một cách đơn giản bằng cách tạo một biến có $date_stringcùng định dạng mà giá trị đầu vào chấp nhận và điền vào năm, tháng và ngày lấy từ ngày hôm nay và voilá! Bạn có một ngày được chọn trước!

Hi vọng điêu nay co ich :)

Biên tập:

Nếu bạn muốn có trường đầu vào được lồng trong HTML chứ không phải PHP, bạn có thể làm như sau.

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

Tôi nhận ra câu hỏi này đã được hỏi cách đây một thời gian (2 năm trước) nhưng tôi vẫn mất một lúc để tìm câu trả lời chắc chắn trên internet, vì vậy điều này sẽ phục vụ bất cứ ai đang tìm kiếm câu trả lời bất cứ khi nào có thể và hy vọng nó giúp đỡ mọi người rất nhiều :)

Chỉnh sửa khác:

Hầu như quên mất, điều gì đó từng là nỗi đau của hoàng gia đối với tôi trong quá khứ là luôn quên đặt múi giờ mặc định bất cứ khi nào tạo một tập lệnh trong PHP sử dụng hàm date ().

Cú pháp là date_default_timezone_set(...);. Tài liệu có thể được tìm thấy ở đây tại PHP.net và danh sách các múi giờ được hỗ trợ để chèn vào hàm có thể được tìm thấy ở đây . Điều này luôn gây phiền nhiễu vì tôi ở Úc, mọi thứ luôn bị đẩy lùi 10 giờ nếu tôi không cài đặt đúng cách này vì nó mặc định là UTC + 0000 khi tôi cần UTC + 1000, vì vậy hãy thận trọng :)

Cảm ơn peter, bây giờ tôi thay đổi mã của tôi.

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

Và đối với những người sử dụng 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
%>

Và sau đó trong cơ thể, yếu tố của bạn sẽ trông giống như thế này

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

Chúc mừng!

Thậm chí sau tất cả những thời gian này, nó có thể giúp đỡ một ai đó. Đây là giải pháp JS đơn giản.

Mã não

  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>

Giải pháp tương tự hoạt động trong Angular mà không cần bất kỳ thư viện bổ sung nào để chuyển đổi định dạng ngày. Đối với Angular (mã được rút ngắn do mã thành phần phổ biến):

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