요즘은 검색에 Datepicker 를 넣지 않는곳이 없는것 같다
요청사항은 다들 비슷한데 검색해보면 뭔가 요청사항을 이리저리 찢어놓은 느낌이라 붙여보았다
-
데이터 피커에 한글로 표시되게 해주세요 (기타 옵션)
-
시작일은 해당월에 1일을 Default 로 해주세요
-
끝일은 당일의 날짜로 해주세요
이 옵션들이 검색하면 꼭 한번에 나오지를 않아서 애먹었다
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
|
$(function() {
//모든 datepicker에 대한 공통 옵션 설정
var thisDate = new Date();
var thisYear = thisDate.getFullYear(); //해당 연
var thisMonth = thisDate.getMonth() + 1; //해당 월
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd' //Input Display Format 변경
,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
,changeYear: true //콤보박스에서 년 선택 가능
,changeMonth: true //콤보박스에서 월 선택 가능
,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
,monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //달력의 월 부분 텍스트
,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트
,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트
,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트
});
//시작일의 초기값을 설정
$('#sDatepicker').datepicker({
onClose: function( selectedDate ) {
$("#eDatepicker").datepicker( "option", "minDate", selectedDate );
// 시작일(sDatepicker) datepicker가 닫힐때
// 종료일(eDatepicker)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
}
});
$('#sDatepicker').datepicker('setDate', thisYear+'-'+thisMonth+'-01'); //시작일 초기값 셋팅
//종료일의 초기값을 내일로 설정
$('#eDatepicker').datepicker({
onClose: function( selectedDate ) {
$("#sDatepicker").datepicker( "option", "maxDate", selectedDate );
// 종료일(eDatepicker) datepicker가 닫힐때
// 시작일(eDatepicker)의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정
}
});
$('#eDatepicker').datepicker('setDate', 'today'); //끝일 초기값 셋팅
});
|
|
|
|
특히 닫힐때에 한계값과 초기값을 동시에 셋팅하는게 하나의 옵션에 다 때려박으면 안되더라 ...
저렇게 두개로 따로주어야 정상작동 한다는것 기억하자
출처 : https://its-easy.tistory.com/12
[Jquery UI] Datepicker 간단 사용법
Jquery UI 공식사이트인 https://jqueryui.com 에서 모든 Example과 API문서를 보고, 실무에서 많이 쓰일 것 같은 내용만 손쉽게 사용 할 수 있도록 정리해보았습니다. 현재 최신 버전인 1.12.1 버전 기준입니다...
its-easy.tistory.com
출처 : https://codeday.me/ko/qa/20190317/84711.html
jQuery에서 .datepicker ( ‘setdate’) 문제 - 코드 로그
.datepicker ()를 사용하여 선택한 특정 날짜 범위를 기반으로 일부 데이터를 가져 오는 쿼리를 실행하는 함수가 있습니다. 응답 데이터에있는 datepicker를 쿼리가 실행되기 전에 선택한 날짜 범위로 다시 설정하려고합니다. queryDate = '2009-11-01'; $('#datePicker').datepicker('setDate', queryDate); datepicker를 오늘 날짜로 설정 한 흥미로운 결과가 있습니다. 나는 단지 오류가
codeday.me
'Web Programming > JavaScript' 카테고리의 다른 글
Javascript 를 이용한 모바일 화면회전 서치 (0) | 2019.08.22 |
---|---|
jQuery 를 이용한 SelectBox Selected 하는법 (0) | 2019.06.12 |
Modal PopUp 사용하기 (0) | 2019.06.10 |
XSS 크로스 사이트 스크립팅 (0) | 2019.05.21 |