[JavaScript / HTML] input type="date" 범위내 날짜 작성

오늘은 두 개의 인풋으로 범위 내의 날짜 값을 받아오는 코드를 작성했습니다.

  - jQuery UI의 DatePicker를 참고하여 작성했습니다.

 

1. 시작범위의 인풋과 끝범위의 인풋을 작성해줍니다.

<input type="text" name="rt_start_date" id="startDate" class="form-control" value="" readonly>
<input type="text" name="rt_end_date" id="endDate" class="form-control" value="" readonly>

 

2. CSS 파일과 JS 파일을 가지고옵니다.

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

 

3. JavaScript를 작성해줍니다.

var dateFormat = "mm/dd/yy",
from = $( "#startDate" )
  .datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1
  })
  .on( "change", function() {
    to.datepicker( "option", "minDate", getDate( this ) );
  }),
to = $( "#endDate" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 1
})
.on( "change", function() {
  from.datepicker( "option", "maxDate", getDate( this ) );
});

function getDate( element ) {
var date;
try {
  date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
  date = null;
}

return date;
}

 

 

Reference : https://jqueryui.com/datepicker/#date-range