<label class="label">기간 선택 Datepicker</label>
<div class="row">
<div class="col col-6 sm-margin-bottom-10">
<label class="input">
<i class="icon-append far fa-calendar-alt"></i>
<input type="text" name="start" id="start" placeholder="Start date">
</label>
</div>
<div class="col col-6">
<label class="input">
<i class="icon-append far fa-calendar-alt"></i>
<input type="text" name="finish" id="finish" placeholder="Finish date">
</label>
</div>
</div>
<script>
$(document).ready(function(){
$('#start').datepicker({
dateFormat: 'yy-mm-dd',
prevText: '<i class="fas fa-angle-left"></i>',
nextText: '<i class="fas fa-angle-right"></i>',
showMonthAfterYear: true,
monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNamesMin: ['일','월','화','수','목','금','토'],
onSelect: function(selectedDate){
$('#finish').datepicker('option', 'minDate', selectedDate);
}
});
$('#finish').datepicker({
dateFormat: 'yy-mm-dd',
prevText: '<i class="fas fa-angle-left"></i>',
nextText: '<i class="fas fa-angle-right"></i>',
showMonthAfterYear: true,
monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNamesMin: ['일','월','화','수','목','금','토'],
onSelect: function(selectedDate){
$('#start').datepicker('option', 'maxDate', selectedDate);
}
});
});
</script>