개발자의 끄적끄적

[jquery] datetimepiecker 예제 본문

개발/javascript & jquery

[jquery] datetimepiecker 예제

효벨 2024. 12. 18. 01:00
728x90
반응형

[jquery] datetimepiecker 예제

 

 

웹사이트를 개발하다보면

 

기간 검색은 필수 인데요!

 

그중에서 년월일만 검색할껀지 시간도 같이 검색할껀지 내용에 따라 약간 다릅니다!

 

이번에는 

 

jquery datetimepicker 를 이용해서 시분초를 선택하는 예제입니다!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery DateTimePicker Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.21/jquery.datetimepicker.min.css">
</head>
<body>
    <h1>jQuery DateTimePicker Example</h1>
    <input type="text" id="datetimepicker" placeholder="Select date and time">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.21/jquery.datetimepicker.full.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#datetimepicker').datetimepicker({
                format: 'Y-m-d H:i', // Date and time format
                step: 15, // Minutes step interval
                lang: 'en', // Language
                todayButton: true, // Add 'Today' button
                validateOnBlur: false // Prevent validation issues on blur
            });
        });
    </script>
</body>
</html>

 

 

위 소스 잘 보시고 참고하시면 됩니다!

 

오늘도 화이팅하세요! ㅎㅎ

반응형
저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[javascript] browser history.back detect example / 브라우저 뒤로가기 감지 방법  (0) 2024.12.19
[javascript/jquery] url 체크 정규식  (0) 2024.10.31
[javascript&jquery] datatable 페이징 영역 숨기는 방법  (0) 2024.10.25
[javascript/jquery] input type number 에서 숫자만 입력받게 하는 방법  (0) 2024.09.24
[javascript/jquery] javascript 이메일 정규식  (0) 2024.09.12
'개발/javascript & jquery' Related Articles more
Comments