datepicker 사용하기
2019. 12. 5. 16:59ㆍPROGRAMMING/JavaScript & JQuery
소스 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html>
<head>
<script>
$(document).ready(function(){
$("#startDate").datepicker({dateFormat: 'yy-mm-dd'});
$("#endDate").datepicker({dateFormat: 'yy-mm-dd'});
$("#endDate").on("change",function(){
//마감일자가 시작일자보다 더 빠르면 경고 후 text 공백으로
if($("#startDate").val() > $("#endDate").val()){
alert("마감일자가 시작일자보다 더 빠를 수 없습니다.");
$("#endDate").val("");
return false;
}else{
return false;
}
});
});
</script>
</head>
<body>
<form name="picker" id="picker" method="post" >
시작일자 : <input type="text" id="startDate" placeholder="클릭하세요." readonly/>
~
마감일자 : <input type="text" id="endDate" placeholder="클릭하세요." readonly/>
</form>
</body>
</html>
|
테스트해보세요!!
날짜 비교에 있어서 다른 블로그를 몇개 찾아보니 날짜 스트링을 split 해서 따로 이래저래해서 비교하는 예제가 많던데
저는 같은 포맷으로 놓고 그냥 날짜 문자열 그대로 비교해도 문제 없이 동작하더라구요...?
다음으로 datepicker에 초기 설정값들을 몇가지 넣어보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<html>
</head>
<script>
$(document).ready(function(){
//버튼 패널에 버튼
$("#startDate").datepicker({showButtonPanel: true,
currentText: '오늘',
closeText: '닫기',
dateFormat:"yy-mm-dd"});
$("#endDate").datepicker({ showButtonPanel: true,
currentText: '오늘',
closeText: '닫기',
dateFormat:"yy-mm-dd"});
//시작일자를 오늘 날짜, 마감일자를 7일(일주일)뒤로 초기값 설정
$("#startDate").datepicker('setDate','today');
$("#endDate").datepicker('setDate','+7D');
$("#endDate").on("change",function(){
if($("#startDate").val() > $("#endDate").val()){
alert("마감일자가 시작일자보다 더 빠를 수 없습니다.");
$("#endDate").val("");
return false;
}else{
return false;
}
});
});
</script>
<head>
<body>
<form name="picker" id="picker" method="post" >
시작일자 : <input type="text" id="startDate" readonly/> ~
마감일자 : <input type="text" id="endDate" readonly/>
</form>
<body>
</html>
|
테스트해보세요!!
'PROGRAMMING > JavaScript & JQuery' 카테고리의 다른 글
| 자동으로 하이픈 Hyphen( - ) 입력하기 (0) | 2019.12.06 |
|---|---|
| JQuery 사용하기 (0) | 2019.12.06 |
| 문자수를 지정하여 다음칸으로 이동시키기 (autoTab) (0) | 2019.12.05 |
| HTML태그 추가/삭제(append, prepend, after, before,remove) (0) | 2019.09.05 |