Programing

입력 유형 날짜에 날짜 설정

crosscheck 2020. 9. 23. 07:15
반응형

입력 유형 날짜에 날짜 설정


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

크롬의 datepicker 입력 유형 날짜 에서 오늘 날짜를 설정합니다 .

$(document).ready( function() {
    var now = new Date();
    var today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    alert(today);
    $('#datePicker').val(today);
});​

하지만 작동하지 않습니다

이 jsFiddle 편집 -크롬에서 시도하십시오.


바이올린 링크 : http://jsfiddle.net/7LXPq/93/

이 두 가지 문제 :

  1. HTML 5의 날짜 제어는 SQL에서 사용하는 연-월-일 형식을 허용합니다.
  2. 월이 9이면 단순히 9가 아닌 09로 설정해야합니다. 그래서 그것은 주간 필드에도 적용됩니다.

데모를 보려면 바이올린 링크를 따르십시오.

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

document.getElementById("datePicker").valueAsDate = new Date()

작동해야합니다.


업데이트 : 나는 이것을 date.toISOString().substr(0, 10). 수락 된 답변과 동일한 결과를 제공하며 좋은 지원을받습니다.


나에게이 문제를 해결하는 가장 짧은 방법은 moment.js를 사용하고이 문제를 단 두 줄로 해결하는 것입니다.

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

var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

위의 코드가 작동합니다.


다음 형식이면 코드가 작동했을 것입니다 : YYYY-MM-DD, 날짜 형식에 대한 컴퓨터 표준 http://en.wikipedia.org/wiki/ISO_8601


일반적으로 날짜 입력을 사용할 때 다음 두 가지 도우미 함수를 만듭니다.

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${date.getFullYear()
  }-${('0' + (date.getMonth() + 1)).slice(-2)
  }-${('0' + date.getDate()).slice(-2)
  }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str => new Date(str.split('-'));

그런 다음 날짜 입력 값을 다음과 같이 설정할 수 있습니다.

$('#datePicker').val(dateToInput(new Date()));

그리고 이렇게 선택한 값을 검색합니다

const dateVal = inputToDate($('#datePicker').val())

Datetimepicker는 항상 입력 형식 YYYY-MM-DD가 필요하며 모델의 표시 형식이나 로컬 시스템 날짜 시간에 대해서는 신경 쓰지 않습니다. 그러나 날짜 시간 선택기의 출력 형식은 원하는 것입니다 (로컬 시스템). 내 게시물에 간단한 예가 있습니다 .


Jquery 버전

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));

참고 URL : https://stackoverflow.com/questions/12346381/set-date-in-input-type-date

반응형