입력 유형 날짜의 기본값을 오늘로 설정하는 방법은 무엇입니까?

HTML5 입력 유형은 훌륭하고 Opera의 새로운 내장 날짜 선택기는 산들 바람이며 Chrome은 적어도 스핀 휠 구현으로 새로운 입력 유형을 지원했습니다.

그러나 날짜 필드의 기본값을 오늘 날짜로 설정하는 방법이 있습니까? Opera를 사용하면 날짜 선택기에서 '오늘'을 선택할 수 있으며 Chrome에서 단계 버튼 중 하나를 클릭하자마자 오늘 날짜에서 증가 / 감소합니다.

나는이 사소한 문제에 대한 해결책을 코딩하기를 부끄러워하지 않지만 두 브라우저 모두 현재 날짜를 완전히 알고 있지만 자동으로 (최소 자리 표시 자) 표시하지는 않습니다.

HTML 입력 필드와 마찬가지로 브라우저에서 기본값을 지정하지 않으면 브라우저는 비워 둡니다. value 속성으로 .

불행히도 HTML5는 value속성 에서 '오늘'을 지정하는 방법을 제공하지 않으며 (알 수있는) RFC3339 유효한 날짜 만2011-09-29 입니다.

TL; DRYYYY-MM-DD 날짜 형식을 사용 하지 않으면 표시되지 않습니다

JavaScript Date 객체는 필요한 형식을 수동으로 수행하지 않도록 충분한 기본 제공 지원을 제공합니다.

올바른 시간대 지원을 위해 이것을 추가하십시오.

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

월과 날짜가 한 자리인지 확인하고 여분의 0을 접두사로 추가하는 데 약간의 시간이 더 걸릴 것입니다 ...하지만 아이디어를 제공해야합니다.

편집 : 여분의 0에 대한 검사가 추가되었습니다.

PHP를 사용하는 경우 표준 Ymd 형식을 따르십시오

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

brower에서 날짜 및 시간과 관련된 작업을 수행하는 경우 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>

이 문제를 2 줄로 해결하려면 moment.js를 사용하십시오. 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 );
    }

오늘의 기능을 적용

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 (SWIG 템플릿으로 표현) :

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

가장 간단한 솔루션은 투표율이 높은 UTC 시간을 포함하여 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

이것은 내 코드에서 수행 한 것입니다. 방금 테스트했으며 제대로 작동했습니다. input 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>

그것이 도움이되기를 바랍니다!

두 가지 모두 정답이 맞지 않습니다.

순수한 JavaScript를 사용하는 짧은 한 줄짜리가 현지 시간대를 설명하며 추가 함수를 정의 할 필요가 없습니다.

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

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

이것은 현재 날짜 시간을 밀리 초 단위로 가져오고 (에포크 이후) 밀리 초 단위로 시간대 오프셋을 적용합니다 (분 * 밀리 초당 60k 분).

를 사용하여 날짜를 설정할 수 element.valueAsDate있지만 Date()생성자 를 추가로 호출합니다 .

이것은 각 사용자의 현지 시간 형식이 다르기 때문에 서버 측에서 실제로해야 할 일이며 각 브라우저의 동작은 다릅니다.

HTML 날짜 입력 값은 yyyy-mm-dd 형식이어야합니다. 그렇지 않으면 값이 표시되지 않습니다.

ASP 클래식 또는 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()합니다.

자바 스크립트로 :

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가 있거나 사이트를 신뢰할 수 있다는 것을 알고 있다면 jlbruno에 따라 JS를 사용하여 기본값을 채울 수 있습니다.

나는 같은 문제가 있었고 간단한 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 형식을 입력으로 허용하므로 입력 값이 허용하는 형식과 동일한 형식으로 를 오늘 날짜 및 날짜에서 가져온 연도, 월 및 일로 채 웁니다. 당신은 미리 선택된 날짜가 있습니다!

도움이 되었기를 바랍니다 :)

편집하다:

입력 필드를 PHP가 아닌 HTML 내에 중첩 시키려면 다음을 수행하십시오.

<?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 년 전) 요청되었다는 것을 알고 있지만 인터넷에서 확실한 대답을 찾는 데 여전히 시간이 걸렸으므로 언제든지 대답을 찾고있는 사람에게 봉사하고 희망을 갖습니다. 모두를 크게 도와줍니다 :)

다른 편집 :

거의 잊었다. 과거에 나에게 큰 고통이었던 것은 date () 함수를 사용하는 PHP로 스크립트를 작성할 때마다 항상 기본 시간대를 설정하는 것을 잊어 버린다.

구문은 date_default_timezone_set(...);입니다. 문서를 찾을 수 있습니다 PHP.net 여기 와 기능에 삽입 할 지원하는 시간대의 목록은 여기에서 찾을 수 있습니다 . 내가 호주에 있기 때문에 이것은 항상 성가시다. 기본적으로 UTC + 0000이 필요하므로 UTC + 0000이 필요하므로 조심스럽게 조심해야한다. :)

고마워 피터, 이제 내 코드를 변경합니다.

<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 에서 작동 합니다. 각도의 경우 (공통 구성 요소 코드로 인해 코드가 단축 됨) :

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