관리 메뉴

웹개발 블로그

[JQuery] datetimepicker 날짜 및 시간 (한국어) 본문

◆JavaScript/활용

[JQuery] datetimepicker 날짜 및 시간 (한국어)

쿠키린 2023. 9. 11. 09:30

참고

https://okimaru.tistory.com/262

 

Jquery datetimepicker 기본 설정

웹 화면을 구현하면서 날짜뿐만이 아니라 시간까지 필요할때가 있다. 이때 jquery의 datetimepicker 라이브러리를 사용한다. 환경구성은 Spring Boot + Thymeleaf 템플릿 엔진 + jquery 사용 1. 다운로드 위치 ht

okimaru.tistory.com

 

라이브러리

jquery.datetimepicker.full.min.js
0.06MB
jquery.datetimepicker.min.css
0.02MB

실행소스

<!DOCTYPE html>
<html lang="ko">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
    src="https://code.jquery.com/jquery-2.2.4.js"
    integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
    crossorigin="anonymous"></script>
    <link href="./jquery.datetimepicker.min.css"  rel="stylesheet" type="text/css">
    <script src="./jquery.datetimepicker.full.min.js"></script>
</head>
<body>
    <input class="dateStart" type="text" >
    <input class="dateStart" type="text" >
</body>
</html>

<script>
 
    $(".dateStart").datetimepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    format:'Y-m-d H:i',
    step: 10,//몇분단위로 시간을 설정할것인가 설정
    defaultSelect: false,
    defaultDate: false

});
jQuery.datetimepicker.setLocale('kr');
</script>