[jQuery] 달력과 날짜입력기( DatePicker + 시간 = DateTimePicker ) > 기술자료

• 목록

jQuery 의 DatePicker 에서 시간까지 선택 가능한 DatetimePicker 를 소개합니다

플러그인은 https://xdsoft.net/jqplugins/datetimepicker/ 에서 다운로드 합니다

다운받은 파일중에서 아래 2개 파일을 서버에 업로드하면 사용가능합니다
jquery.datetimepicker.css
jquery.datetimepicker.full.min.js


1. 공통
<script src="./jquery.min.js">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css">
<scrpt src="./jquery.datetimepicker.full.min.js">


2. 기본 사용법
<input type="text" id="datetimepicker" name="date">
<script>
$('#datetimepicker').datetimepicker();
</script>


3. 시간만 표시하고 시간 형식 지정하기
<input type="text" id="datetimepicker2" name="date2">
<script>
jQuery('#datetimepicker2').datetimepicker({
    datepicker:false,
    format:'H:i' // 시:분 표시
});
</script>


4. 특정 날짜 선택 못하게하기
<input type="text" id="datetimepicker9" name="date9">
<script>
jQuery('#datetimepicker9').datetimepicker({
    onGenerate:function( ct ){
        jQuery(this).find('.xdsoft_date.xdsoft_weekend')
            .addClass('xdsoft_disabled');
    },
    weekend:['01.01.2022','0201.2022','03.01.2022'],
    timepicker:false
});
</script>


5. 선택할 수 있는 시간 직접 지정하기
<input type="text" id="datetimepicker5" name="date5">
<script>
jQuery('#datetimepicker5').datetimepicker({
    datepicker:false,
    allowTimes:[
        '12:00','13:00','15:00'
    ]
});
</script>


6. 페이지 내에 달력 삽입하고 사용언어를 한국어로 설정
jQuery('#datetimepicker3').datetimepicker({
    format:'d.m.Y H:i',
    inline:true,
    lang:'kr'
});


참고자료
https://m.blog.naver.com/webi0963/221337799803
https://vip00112.tistory.com/34