데이트피커

메가공무원 사이트에서 다양하게 사용되고 있는 캘린더 기능입니다.
조회기간 및 캘린더 아이콘을 클릭하여 사용자가 희망하는 기간을 설정하고, 해당 기간 동안의 관련 정보를 조회할 수 있습니다.

달력

상담날짜 신청 등의 목적으로 메가공무원 사이트의 다양한 페이지에서 사용되고 있는 캘린더 기능입니다.
캘린더의 날짜부분을 클릭하여 사용자가 희망하는 상담일자을 선택하고 해당 일정으로 상담예약을 신청할 수 있습니다.

  

  

    
    
      시간 선택
      10:00
      10:30
      11:00
      11:30
      12:00
      12:30
      13:00
      13:30
      14:00
      14:30
      15:00
      15:30
      16:00
      16:30
      17:00
      17:30
      18:00
    
  

var initDay = '+1';
$('#mg_date_result').val(mgFrontScript.isDay(initDay)); // 명일 선택
var thisDatepicker = $("#mg_datepicker").datepicker({
  dateFormat: 'yy-mm-dd',
  dayNamesMin: ['일','월','화','수','목','금','토'],
  monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  showOtherMonths: true,
  minDate: initDay,
  maxDate: '14', // <= 공휴일 테스트 필요할 경우 주석달아주세요!!
  beforeShowDay: mgFrontScript.noWeekendsWithHolidays,
  onSelect: function(dateText, inst) {
    var txtDay = mgFrontScript.onSelectPickerDay($(this), dateText);
    $('#mg_date_result').val(txtDay);
  }
});

.mg_datepicker_wrp{max-width:445px;}
.mg_datepicker_wrp .date_result{display: flex;justify-content: space-between;}
.mg_datepicker_wrp .date_result input,
.mg_datepicker_wrp .date_result select{height: 40px;border-color: #000;border-width: 1px;border-style: solid;text-align: center;width: 49%;font-size: 13px;}

.mg_datepicker_wrp .date_result select:disabled{color: #a39b9b;}