wasup

datepiker 사용하기 : fromDay ~ toDay 본문

IT/html, css, script

datepiker 사용하기 : fromDay ~ toDay

wasupup 2022. 8. 18. 10:48
반응형

할때마다 새로 검색하는 datepiker

맨 마지막 출처 링크가 정리가 잘 되어있다.

 

cdn

<script src="{MARI_HOMESKIN_URL}/js/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ko.js"></script>

html

<label for="fromDate">
	<input type="text" name="fromDate" id="fromDate"/>
</label>
<label for="toDate">
	<input type="text" name="toDate" id="toDate"/>
</label>

script

<script>
	$(function() {
		$("#today").text(new Date().toLocaleDateString());

		$.datepicker.setDefaults($.datepicker.regional['ko']); 
		
		//시작일.
		$('#fromDate').datepicker({
			showOn: "both", 
			dateFormat: "yy-mm-dd",  
			changeMonth: true, 
			onClose: function( selectedDate ) {    
				$("#toDate").datepicker( "option", "minDate", selectedDate );
			}                
		});

		//종료일
		$('#toDate').datepicker({
			showOn: "both", 
			dateFormat: "yy-mm-dd",
			changeMonth: true,
			onClose: function( selectedDate ) {
				$("#fromDate").datepicker( "option", "maxDate", selectedDate );
			}                
		});
	});
</script>

 

 

 

 

 

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

https://jqueryui.com/datepicker/

 

Datepicker | jQuery UI

Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b

jqueryui.com

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQuery UI</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
        <style>
            /*datepicker에서 사용한 이미지 버튼 style적용*/
            img.ui-datepicker-trigger {
                margin-left:5px; vertical-align:middle; cursor:pointer;
}
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        <!-- datepicker 한국어로 -->
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ko.js"></script>
        <script>
            $(function() {
                
            
                //오늘 날짜를 출력
                $("#today").text(new Date().toLocaleDateString());

                //datepicker 한국어로 사용하기 위한 언어설정
                $.datepicker.setDefaults($.datepicker.regional['ko']); 
                
                // 시작일(fromDate)은 종료일(toDate) 이후 날짜 선택 불가
                // 종료일(toDate)은 시작일(fromDate) 이전 날짜 선택 불가

                //시작일.
                $('#fromDate').datepicker({
                    showOn: "both",                     // 달력을 표시할 타이밍 (both: focus or button)
                    buttonImage: "images/calendar.gif", // 버튼 이미지
                    buttonImageOnly : true,             // 버튼 이미지만 표시할지 여부
                    buttonText: "날짜선택",             // 버튼의 대체 텍스트
                    dateFormat: "yy-mm-dd",             // 날짜의 형식
                    changeMonth: true,                  // 월을 이동하기 위한 선택상자 표시여부
                    //minDate: 0,                       // 선택할수있는 최소날짜, ( 0 : 오늘 이전 날짜 선택 불가)
                    onClose: function( selectedDate ) {    
                        // 시작일(fromDate) datepicker가 닫힐때
                        // 종료일(toDate)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
                        $("#toDate").datepicker( "option", "minDate", selectedDate );
                    }                
                });

                //종료일
                $('#toDate').datepicker({
                    showOn: "both", 
                    buttonImage: "images/calendar.gif", 
                    buttonImageOnly : true,
                    buttonText: "날짜선택",
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    //minDate: 0, // 오늘 이전 날짜 선택 불가
                    onClose: function( selectedDate ) {
                        // 종료일(toDate) datepicker가 닫힐때
                        // 시작일(fromDate)의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정 
                        $("#fromDate").datepicker( "option", "maxDate", selectedDate );
                    }                
                });
            });
        </script>
    </head>
    <body>
        오늘 날짜 : <span id="today"></span>
        <form>
          <label for="fromDate">시작일</label>
          <input type="text" name="fromDate" id="fromDate">
          ~
          <label for="toDate">종료일</label>
          <input type="text" name="toDate" id="toDate">
        </form>
    </body>
</html>

https://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=220546927730 

 

[jQuery/jQuery UI] Datepicker > 시작일과 종료일 입력시 선택 가능 범위 제한하기

[jQuery/jQuery UI] Datepicker > 시작일과 종료일 입력시 선택 가능 범위 제한하기 조건 :: 시작...

blog.naver.com

 

 

반응형
저작자표시 비영리 동일조건

'IT > html, css, script' 카테고리의 다른 글

checkbox check  (0) 2022.08.31
Tip - microsoft/PowerToys 컬러 확인하기 프로그램  (0) 2022.08.18
textarea resize, readonly  (0) 2022.08.17
css 말줄임 표시  (0) 2022.08.17
svg) note  (0) 2022.01.06
'IT/html, css, script' Related Articles more
Comments