วิธีการตั้งค่าเริ่มต้นของวันที่ประเภทอินพุตเป็นวันนี้?

ประเภทอินพุต HTML5 นั้นยอดเยี่ยมตัวเลือกวันที่ในตัวใหม่ของ Opera นั้นง่ายและ Chrome ได้สนับสนุนประเภทอินพุตใหม่อย่างน้อยด้วยการใช้ล้อหมุน

แต่มีวิธีการตั้งค่าเริ่มต้นของเขตข้อมูลวันที่วันที่วันนี้หรือไม่? ด้วย Opera ฉันสามารถเลือก 'วันนี้' จากเครื่องมือเลือกวันที่และทันทีที่ฉันคลิกที่ปุ่มขั้นตอนใดปุ่มหนึ่งใน Chrome จะเป็นการเพิ่ม / ลดลงจากวันที่วันนี้

ฉันไม่อายที่จะเขียนคำตอบสำหรับปัญหาเล็ก ๆ น้อย ๆ นี้ แต่ดูเหมือนว่าโง่สำหรับฉันที่เบราว์เซอร์ทั้งสองทราบวันที่ปัจจุบันอย่างสมบูรณ์ แต่จะไม่ปรากฏขึ้นโดยอัตโนมัติ

เช่นเดียวกับช่องป้อนข้อมูล HTML เบราว์เซอร์จะปล่อยว่างไว้เว้นแต่ว่ามีการระบุค่าเริ่มต้นพร้อมvalueแอตทริบิวต์

แต่น่าเสียดายที่ HTML5 ไม่ได้ให้วิธีการระบุ 'วันนี้' ในส่วนvalueแอตทริบิวต์ (ที่ฉันสามารถดู) เพียงRFC33392011-09-29วันที่ถูกต้องเช่น

TL; DRใช้YYYY-MM-DDรูปแบบวันที่ไม่เช่นนั้นจะไม่ปรากฏ

วัตถุ JavaScript วันที่ให้การสนับสนุนในตัวเพียงพอสำหรับรูปแบบที่ต้องการเพื่อหลีกเลี่ยงการทำด้วยตนเอง:

เพิ่มสิ่งนี้เพื่อการสนับสนุนเขตเวลาที่ถูกต้อง:

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:

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

สิ่งนี้ใช้ได้กับฉัน:

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

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

รหัสต่อไปนี้ทำงานได้ดี:

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

โปรดทราบว่านี่ต้องอาศัย PHP

คุณสามารถเติมค่าเริ่มต้นผ่านจาวาสคริปต์ตามที่เห็นที่นี่: 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);
});

ฉันอาจใช้เวลาเพิ่มเล็กน้อยเพื่อดูว่าเดือนและวันที่เป็นเลขหลักเดียวและนำหน้าด้วยศูนย์พิเศษ ... แต่นี่ควรให้ความคิดกับคุณ

แก้ไข: เพิ่มการตรวจสอบศูนย์พิเศษ

ปฏิบัติตามรูปแบบ Ymd มาตรฐานหากคุณใช้ 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);
});

การสาธิต

หากคุณไม่ต้องการใช้ jQuery คุณสามารถทำสิ่งนี้ได้

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;

การสาธิต

ใน HTML5 เป็นเช่นนี้ไม่มีวิธีตั้งค่าเริ่มต้นของเขตข้อมูลวันที่เป็นวันที่วันนี้? ดังที่แสดงในคำตอบอื่น ๆ ค่าสามารถตั้งค่าโดยใช้ JavaScript และนี่เป็นวิธีที่ดีที่สุดหากคุณต้องการตั้งค่าเริ่มต้นตามวันที่ปัจจุบันให้กับผู้ใช้เมื่อโหลดหน้าเว็บ

HTML5 กำหนดvalueAsDateคุณสมบัติสำหรับองค์ประกอบและใช้มันคุณสามารถตั้งค่าเริ่มต้นโดยตรงจากเช่นวัตถุที่สร้างขึ้นโดยinput type=date new Date()อย่างไรก็ตามเช่น IE 10 ไม่ทราบว่าคุณสมบัติ (มันยังขาดการสนับสนุนของแท้input type=dateแต่ก็เป็นปัญหาที่แตกต่างกัน)

ดังนั้นในทางปฏิบัติคุณต้องตั้งค่าvalueคุณสมบัติและต้องเป็นสัญกรณ์ที่สอดคล้องกับ ISO 8601 ทุกวันนี้สิ่งนี้สามารถทำได้ค่อนข้างง่ายเนื่องจากเราสามารถคาดหวังว่าเบราว์เซอร์ที่ใช้ในปัจจุบันจะสนับสนุนtoISOStringวิธีการนี้:

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

หากคุณกำลังทำสิ่งที่เกี่ยวข้องกับวันที่และเวลาในเบราว์เซอร์คุณต้องการใช้Moment.js :

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

moment()ส่งคืนวัตถุที่เป็นตัวแทนของวันที่และเวลาปัจจุบัน จากนั้นคุณเรียก.format()ใช้เมธอดเพื่อรับการแทนค่าสตริงตามรูปแบบที่ระบุ ในกรณีนี้,YYYY-MM-DDนี้

ตัวอย่างเต็มรูปแบบ:

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

ใช้ moment.js เพื่อแก้ปัญหานี้ใน 2 บรรทัดประเภทอินพุตวันที่ html5 ยอมรับเฉพาะรูปแบบนี้ "YYYY-MM-DD" ฉันแก้ปัญหาด้วยวิธีนี้

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

นี่เป็นวิธีที่ง่ายที่สุดในการแก้ปัญหานี้

จาวาสคริ

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

jquery

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

ตัวเลือกอื่น

หากคุณต้องการปรับแต่งวันเดือนและปีเพียงแค่ทำผลรวมหรือย่อยตามที่คุณต้องการ😎สำหรับเดือนเริ่มต้นจากแบบฟอร์ม 0 นั่นคือเหตุผลที่ต้องรวม 1 กับเดือน

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 ฟังก์ชั่นวันนี้

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

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

ง่ายมากเพียงใช้ภาษาฝั่งเซิร์ฟเวอร์เช่น PHP, ASP, JAVA หรือแม้กระทั่งคุณสามารถใช้จาวาสคริปต์

นี่คือทางออก

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

หากคุณจำเป็นต้องกรอกวันที่และเวลาคุณสามารถใช้:

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

สำหรับ NodeJS (Express with SWIG templates):

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

วิธีแก้ไขที่ง่ายที่สุดดูเหมือนจะมองข้ามว่าจะใช้เวลา UTC รวมถึงรายการที่ได้รับการโหวตสูง ด้านล่างเป็นรุ่น ES6 ที่ไม่ใช่ jQuery ที่คล่องตัวของคำตอบที่มีอยู่สองสามข้อ:

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

นี่คือสิ่งที่ฉันทำในรหัสของฉันฉันเพิ่งทดสอบและใช้งานได้ดีอินพุต type = "date" ไม่สนับสนุนการตั้งค่า curdate โดยอัตโนมัติดังนั้นวิธีที่ฉันใช้เพื่อเอาชนะข้อ จำกัด นี้คือการใช้รหัส PHP อย่างง่ายเช่นนี้ .

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

หวังว่ามันจะช่วย!

ทั้งคำตอบยอดนิยมไม่ถูกต้อง

ตัวย่อขนาดสั้นหนึ่งบรรทัดที่ใช้จาวาสคริปต์แท้สร้างบัญชีสำหรับเขตเวลาท้องถิ่นและไม่จำเป็นต้องกำหนดฟังก์ชั่นพิเศษเพิ่มเติม:

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

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

สิ่งนี้จะได้รับ datetime ปัจจุบันเป็นมิลลิวินาที (ตั้งแต่ยุค) และใช้การชดเชยเวลาในหน่วยมิลลิวินาที (นาที * 60k นาทีต่อมิลลิวินาที)

คุณสามารถกำหนดวันที่ใช้element.valueAsDateแต่จากนั้นคุณมีการโทรพิเศษเพื่อDate()สร้าง

นี่เป็นสิ่งที่คุณต้องทำในฝั่งเซิร์ฟเวอร์เนื่องจากรูปแบบเวลาท้องถิ่นของผู้ใช้แต่ละคนแตกต่างกันไป

ค่าอินพุตวันที่ Html ควรอยู่ในรูปแบบนี้: yyyy-mm-ddมิฉะนั้นจะไม่แสดงค่า

ASP CLASSIC หรือ 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

ผลผลิตของวันที่วันนี้: 2019-02-08

จากนั้นใน html ของคุณ: <input type="date" value="<% =get_date %>"

PHP

เพียงใช้สิ่งนี้: <input type="date" value="<?= date("Y-m-d"); ?>">

ง่ายมากโดยใช้รหัสต่อไปนี้ใช้ PHP

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

time()ฟังก์ชั่นวันที่จะกลับมาวันที่ปัจจุบันโดยการใช้วันที่ใน

โดย 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)

หากคุณใช้ทับทิมคุณสามารถใช้สิ่งนี้เพื่อตั้งค่าเริ่มต้นเป็นวันที่และเวลาของวันนี้:

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%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>

เนื่องจากไม่มีวิธีการเริ่มต้นการตั้งค่าเป็นวันที่วันนี้ฉันจะบอกว่าสิ่งนี้ควรขึ้นอยู่กับแอปพลิเคชันของมัน หากคุณต้องการเพิ่มการรับชมของผู้ชมให้ได้มากที่สุดให้ใช้ตัวเลือกวันที่จากนั้นใช้สคริปต์ฝั่งเซิร์ฟเวอร์ (PHP, ASP และอื่น ๆ ) เพื่อตั้งค่าเริ่มต้น

อย่างไรก็ตามหากเป็นคอนโซลการดูแลระบบของ CMS และคุณรู้ว่าผู้ใช้จะมี JS อยู่เสมอหรือเว็บไซต์ของคุณเชื่อถือได้คุณสามารถใช้ JS เพื่อเติมค่าเริ่มต้นได้อย่างปลอดภัยตาม jlbruno

ฉันมีปัญหาเดียวกันและฉันแก้ไขด้วย JS ง่ายๆ อินพุต:

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

JS

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

สำคัญ: สคริปต์ JS ควรอยู่ในบรรทัดรหัสสุดท้ายหรือหลังจากป้อนข้อมูลเนื่องจากถ้าคุณใส่รหัสนี้ไว้ก่อนหน้าสคริปต์จะไม่พบอินพุตของคุณ

ไม่มีวิธีการเริ่มต้นภายใน HTML นั้นเพื่อแทรกวันที่วันนี้ลงในช่องใส่ อย่างไรก็ตามเช่นเดียวกับช่องใส่อื่น ๆ ก็จะยอมรับค่า

คุณสามารถใช้ PHP เพื่อดึงวันที่วันนี้และป้อนลงในฟิลด์ค่าขององค์ประกอบแบบฟอร์ม

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

ฟิลด์ค่ายอมรับรูปแบบ YYYY-MM-DD เป็นอินพุตดังนั้นเพียงสร้างตัวแปร $date_stringในรูปแบบเดียวกับที่ค่าอินพุตยอมรับและเติมด้วยปีเดือนและวันที่ดึงมาจากวันที่ปัจจุบันและวันที่! คุณมีวันที่กำหนดไว้ล่วงหน้าแล้ว!

หวังว่าจะช่วย :)

แก้ไข:

หากคุณต้องการให้ฟิลด์อินพุตซ้อนกันภายใน HTML แทนที่จะเป็น PHP คุณสามารถทำสิ่งต่อไปนี้ได้

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

ฉันรู้ว่าคำถามนี้ถูกถามสักครู่ (2 ปีที่แล้ว) แต่มันก็ยังใช้เวลาสักครู่ในการหาคำตอบที่ชัดเจนบนอินเทอร์เน็ตดังนั้นสิ่งนี้จะไปให้บริการทุกคนที่กำลังมองหาคำตอบเมื่อใดก็ตามที่มันอาจเป็นและหวังว่า ช่วยทุกคนอย่างมาก :)

การแก้ไขอื่น:

เกือบลืมไปแล้วสิ่งที่เป็นความเจ็บปวดสำหรับฉันในอดีตมักจะลืมกำหนดเขตเวลาเริ่มต้นทุกครั้งที่สร้างสคริปต์ใน PHP ที่ใช้ฟังก์ชั่น date ()

date_default_timezone_set(...);ไวยากรณ์ เอกสารที่สามารถพบได้ที่นี่ที่ PHP.netและรายชื่อของเขตเวลาที่ได้รับการสนับสนุนที่จะแทรกเข้าไปในฟังก์ชั่นที่สามารถพบได้ที่นี่ นี่เป็นเรื่องที่น่ารำคาญอยู่เสมอตั้งแต่ฉันอยู่ในออสเตรเลียทุกอย่างจะถูกผลักกลับไปอีก 10 ชั่วโมงถ้าฉันไม่ได้ตั้งค่าไว้อย่างถูกต้องเพราะมันเป็นค่าเริ่มต้นที่ UTC + 0000 ซึ่งฉันต้องการ UTC + 1000 ดังนั้นต้องระมัดระวัง :)

ขอบคุณปีเตอร์ตอนนี้ฉันเปลี่ยนรหัสของฉัน

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

และสำหรับผู้ที่ใช้ 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
%>

และในร่างกายองค์ประกอบของคุณควรมีลักษณะเช่นนี้

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

ไชโย!

แม้หลังจากเวลาทั้งหมดเหล่านี้มันอาจช่วยใครซักคน นี่เป็นโซลูชัน JS ที่ง่าย

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>

โซลูชันที่คล้ายกันทำงานในAngularโดยไม่มีไลบรารีเพิ่มเติมเพื่อแปลงรูปแบบวันที่ สำหรับ Angular (รหัสสั้นลงเนื่องจากรหัสส่วนประกอบทั่วไป):

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