2013년 7월 10일 (수) 16:49 판

jQuery UI

jQuery CDN

<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-ko.js" charset="utf-8"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/i18n/jquery.ui.datepicker-ko.js" charset="utf-8"></script>

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">

@@ 81번째 줄: / 81번째 줄: @@
 <syntaxhighlight lang="html5"><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"></syntaxhighlight>
+[[분류:jQuery]]
+[[분류:javascript]]
+[[분류:개발]]
+[[분류:dev]]

"JQuery"의 두 판 사이의 차이

2013년 7월 10일 (수) 16:49 판

jQuery UI

Widget

datePicker