JQuery

jQuery

jQuery.com

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Learn jQuery

jQuery CDN

jQuery UI

Widget

datePicker

한글화 적용

$(function() {
      $.datepicker.regional['ko'] = {
  closeText: '닫기',
  prevText: '이전달',
  nextText: '다음달',
  currentText: '오늘',
  monthNames: ['1월','2월','3월','4월','5월','6월',
  '7월','8월','9월','10월','11월','12월'],
  monthNamesShort: ['1월','2월','3월','4월','5월','6월',
  '7월','8월','9월','10월','11월','12월'],
  dayNames: ['일','월','화','수','목','금','토'],
  dayNamesShort: ['일','월','화','수','목','금','토'],
  dayNamesMin: ['일','월','화','수','목','금','토'],
  weekHeader: 'Wk',
  dateFormat: 'yy-mm-dd',
  firstDay: 0,
  isRTL: false,
  duration:200,
  showAnim:'show',
  showMonthAfterYear: true,
  yearSuffix: '년'};
      $.datepicker.setDefaults($.datepicker.regional['ko']);
});

기간체크

<script>
/*
jQuery DatePicker 를이용하여 기간설정 유효성 적용 
*/
  $(function() {
 
    //시작일
    $( "#from" ).datepicker({
    numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        showOn: "button",
    buttonImage: "이미지경로",
    buttonImageOnly: true,
        onSelect: function( selectedDate ) {
           var option = this.id == "from" ? "minDate" : "maxDate",
           instance = $( this ).data( "datepicker" ),
           date = $.datepicker.parseDate(
           instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
           selectedDate, instance.settings );
           jQuery( "#from, #to" ).not( this ).datepicker( "option", option, date );
       }
    });
 
    //종료일
    $( "#to" ).datepicker({
    numberOfMonths: 1,
        dateFormat: "yy-mm-dd",
        showOn: "button",
        buttonImage: "이미지경로",
    buttonImageOnly: true,
        onSelect: function( selectedDate ) {
           var option = this.id == "from" ? "minDate" : "maxDate",
           instance = $( this ).data( "datepicker" ),
           date = $.datepicker.parseDate(
           instance.settings.dateFormat ||
           $.datepicker._defaults.dateFormat,
           selectedDate, instance.settings );
           jQuery( "#from, #to" ).not( this ).datepicker( "option", option, date );
        }
     });
  });
</script>

<input type="text" id="from" name="from" style="border: 1px solid #eee; margin:2px;" size="10"> ~ 
<input type="text" id="to" name="to" style="border: 1px solid #eee; margin:2px;" size="10">