jQuer - Datepicker

Browse more Jquery Examples
<!doctype html>
<!--
https://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm
-->
<html lang = "kr">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(document).ready(function() {
             $("body").click(function(event) {
   console.log("clicked: " + event.target);
});

            //1. Default functionality
            $( "#datepicker-11" ).datepicker();
            $( "#datepicker-12" ).datepicker();
            $( "#datepicker-13" ).datepicker();
            $( "#button-11" ).tooltip();
            $( "#datepicker-11" ).tooltip({disabled: false});
            $( "#datepicker-12" ).tooltip({content: "<strong>Hi!</strong>",
               track:true});            
            $( "#datepicker-13" ).tooltip({disabled: true});
            //동적으로 생성된 DOM개체의 이벤트에 연결
            $( "#datepicker-12" ).on('change', function(){
                alert($( this ).val());
            }
            );
            $("#datepicker-13").focusin(function() {
                $("#datepicker-13").css("background-color", "green");  
            });
            $("#datepicker-13").blur(function() {
                $("#datepicker-13").css("background-color", "white");  
            });    
            $( "#datepicker-13" ).change(function(){
                //$("#datepicker-13").attr("disabled", true);
                $("#datepicker-13").css("background-color", "blue");       
            }
            );
            
            $( "#button-11" ).click(function(){
                alert($("#datepicker-11").val());
            }
            );  
            
            //2. Inline Datepicker
            $( "#datepicker-2" ).datepicker();
            $( "#button-2" ).click(function(){
                alert($("#datepicker-2").val());
            }
            );      
            $( "#datepicker-2" ).change(function(){
                $( "#label-2" ).text($( "#datepicker-2" ).val());
            }
            );  
            
            //3. Use of appendText, dateFormat, altField and altFormat
            $( "#datepicker-31" ).datepicker({
               appendText:"(yy/mm/dd)",
               dateFormat:"yy/mm/dd",
               altField: "#datepicker-32",
               altFormat: "DD, d MM, yy"               
            });
            //4. Use of beforeShowDay
            $( "#datepicker-4" ).datepicker({
                dateFormat:"yy/mm/dd",
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
            //5. Use of defaultDate, dayNamesMin, and duration
            $( "#datepicker-5" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
               duration: "slow"
            });  
            
            //7. Use of changeMonth, changeYear, and numberOfMonths
            $( "#datepicker-7" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[1,1]
            });            
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div>1. Default functionality
      <p>Enter Date1: <input type = "text" id = "datepicker-11" title="date1"><input type = "button" id = "button-11" value="button-11" title="Date1 값 확인"></p>
      <p>Enter Date2: <input type = "text" id = "datepicker-12" title="date2"></p>
      <p>Enter Date3: <input type = "text" id = "datepicker-13" title="date3"></p>
      </div>
      
      <div>2. Inline Datepicker
      <p>
      Enter Date: <div id = "datepicker-2"></div>
      <input type = "button" id = "button-2" value="button-2">
      <label id="label-2"></label>
      </div> 
      <p></p>
      <div> 3. 
      Use of appendText, dateFormat, altField and altFormat
      <p>Enter Date: <input type = "text" id = "datepicker-31"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-32"></p>      
      </div> 
      
      <p>
          4. Use of beforeShowDay
<p>Enter Date: <input type = "text" id = "datepicker-4"></p>          
      </p>
      
      <p>
      5. Use of defaultDate, dayNamesMin, and duration
<p>Enter Date: <input type = "text" id = "datepicker-5"></p>         
      </p>    
      
    <p>
      7. Use of changeMonth, changeYear, and numberOfMonths
<p>Enter Date: <input type = "text" id = "datepicker-7"></p>        
      </p>       
   </body>
</html>
jQuer - Datepicker

Follow

Newsletter
