jQuery UI

jQuery UI 는
JavaScript 와 jQuery 기반 라이브러리로
GUI widget,  각종 애니메이션 효과, 테마 등을 편리하게(?) 사용할수 있도록 제공한다.

공식: https://jqueryui.com/
CDN : https://code.jquery.com/ui/

 jQuery 라이브러리 우선 
<script src="https://code.jquery.com/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 jQuery UI 적용 CSS : 종류가 많고 다운로드 받아 커스터마이징 가능 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">
 jQueryUI JS 파일

 

---

datepicker

<script>

$(function(){
    // $("#datepicker1").datepicker();   // 기본입력포맷 mm/dd/yyyy

    $("#datepicker1").datepicker({
        dateFormat: 'yy-mm-dd',
    });
});

</script>
    
BirthDate: <input type="text" id="datepicker1">

<hr>

<script>

$(function(){
    $("#datepicker2").datepicker({
        dateFormat: 'yy.mm.dd',
        prevText: '이전 달',
        nextText: '다음 달',
        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월'],
        dayNames: ['일','월','화','수','목','금','토'],
        dayNamesShort: ['일','월','화','수','목','금','토'],
        dayNamesMin: ['일','월','화','수','목','금','토'],
        showMonthAfterYear: true,
        changeMonth: true,
        changeYear: true,
        yearSuffix: '년'
    });
});

</script>
    
생년월일: <input type="text" id="datepicker2">

<hr>

<script>

// 디폴트 세팅 변경 (이후 datepicker 에 영향을 줌.)
$.datepicker.setDefaults({
    dateFormat: 'yy-mm',
    prevText: '이전 달',
    nextText: '다음 달',
    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월'],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    showMonthAfterYear: true,
    yearSuffix: '년'
});

$(function(){
    $("#datepicker31, #datepicker32").datepicker();
});

</script>

<p>조회기간:
  <input type="text" id="datepicker31"> ~
  <input type="text" id="datepicker32">
</p>

<hr>

<script>

$(function(){
    $("#datepicker41, #datepicker42").datepicker();
});

</script>

<p>조회기간:
      <input type="text" id="datepicker41"> ~
      <input type="text" id="datepicker42">
</p>