안녕하세요! XE타운 여러분~!?
게시판 설정 -> 사용자 정의에서 형식을 일자(연월일)로 선택하고
글을 쓰면 위에 스샷처럼 날짜만 선택이 가능합니다.
저는 위 스샷과 같이 날짜에 추가적으로 시간 데이터까지 필요하게 되어 별도의 작업을 진행 하였습니다.
해당 부분은 코어를 수정하는것 같아.. 만약 해당파일이 수정이되면 다시 패치해줘야 하는 번거로움이 있습니다.
참고 하시고 하는 방법은 아래를 읽어주시기 바랍니다.
우선 필요한 준비물은 jQuery-Timepicker-Addon JavaScript 패키지가 필요 합니다.
https://github.com/trentrichardson/jQuery-Timepicker-Addon.git
해당 파일은 위 주소에서 받으시면 됩니다.
파일을 받고 압축 파일을 열어보면
위와 같은 파일들을 확인 할 수 있는데 여기서 필요한 파일들은
dist 폴더에 있는
jquery-ui-sliderAccess.js
jquery-ui-timepicker-addon.min.js
jquery-ui-timepicker-addon.min.css
파일 3개와
dist -> i18n 폴더안에
jquery-ui-timepicker-ko.js
파일 1개가 필요 합니다.
xe설치경로/common/js/plugins/ 로 들어가서
위 파일 4개를 ui.datetimepicker 폴더를 만들어 주시고 넣어 줍니다.
그리고 xe설치경로/common/js/plugins/ui 에 들어가서
jquery-ui.min.js
jquery-ui.min.css
images 폴더
2개의 파일과 images 폴더를 복사해서 ui.datetimepicke 폴더에 넣어 줍니다.
그러면 최종적으로 ui.datetimepicke 폴더에는 위와 같이 파일들이 모여 있겠죠?
마지막으로 파일 하나를 더 추가해줘야하는데 바로
plugin.load
파일을 만들고 그 파일에
jquery-ui.min.js
jquery-ui.min.css
jquery-ui-sliderAccess.js
jquery-ui-timepicker-addon.min.css
jquery-ui-timepicker-addon.min.js
jquery-ui-timepicker-ko.js
라고 내용을 적어주시고 저장해주시기 바랍니다.
그러면 timepicker를 사용할 준비는 끝났습니다.
// 귀찮으신 분들은 구글 드라이브에 파일을 올렸으니 받아서 해당 경로에 압축을 풀고 넣어주세요 (링크)
이제는 소스를 약간 수정해야 합니다.
xe설치경로/classes/extravar/Extravar.class.php 수정
case 'date' : //return zdate($value, "Y-m-d"); return zdate($value, "Y-m-d H:i:s");
위 경로에 case 'date' :
부분을 기본 return zdate($value, "Y-m-d"); 는 주석 처리 해주시고 위와같이 변경해주세요
case 'date' :
// datepicker javascript plugin load
// Context::loadJavascriptPlugin('ui.datepicker');
// $buff[] = '<input type="hidden" name="' . $column_name . '" value="' . $value . '" />';
// $buff[] = '<input type="text" id="date_' . $column_name . '" value="' . zdate($value, 'Y-m-d H:i:s') . '" class="date" />';
// $buff[] = '<input type="button" value="' . lang('cmd_delete') . '" class="btn" id="dateRemover_' . $column_name . '" />';
// $buff[] = '<script type="text/javascript">';
// $buff[] = '//<![CDATA[';
// $buff[] = '(function($){';
// $buff[] = '$(function(){';
// $buff[] = ' var option = { dateFormat: "yy-mm-dd", changeMonth:true, changeYear:true, gotoCurrent:false, yearRange:\'-100:+10\', onSelect:function(){';
// $buff[] = ' $(this).prev(\'input[type="hidden"]\').val(this.value.replace(/-/g,""))}';
// $buff[] = ' };';
// $buff[] = ' $.extend(option,$.datepicker.regional[\'' . Context::getLangType() . '\']);';
// $buff[] = ' $("#date_' . $column_name . '").datepicker(option);';
// $buff[] = ' $("#dateRemover_' . $column_name . '").click(function(){';
// $buff[] = ' $(this).siblings("input").val("");';
// $buff[] = ' return false;';
// $buff[] = ' })';
// $buff[] = '});';
// $buff[] = '})(jQuery);';
// $buff[] = '//]]>';
// $buff[] = '</script>';
Context::loadJavascriptPlugin('ui.datetimepicker');
$buff[] = '<input type="hidden" name="' . $column_name . '" value="' . $value . '" />';
$buff[] = '<input type="text" id="date_' . $column_name . '" value="' . zdate($value, 'Y-m-d H:i:s') . '" class="date" />';
$buff[] = '<input type="button" value="' . lang('cmd_delete') . '" class="btn" id="dateRemover_' . $column_name . '" />';
$buff[] = '<script type="text/javascript">';
$buff[] = '//<![CDATA[';
$buff[] = '(function($){';
$buff[] = '$(function(){';
$buff[] = ' var option = { timeFormat: "HH:mm:ss", changeMonth:true, changeYear:true, gotoCurrent:true, yearRange:\'-100:+10\', onSelect:function(){';
$buff[] = ' $(this).prev(\'input[type="hidden"]\').val(this.value.replace(/\D/g,""))}';
$buff[] = ' };';
$buff[] = ' $("#date_' . $column_name . '").datetimepicker(option);';
$buff[] = ' $("#dateRemover_' . $column_name . '").click(function(){';
$buff[] = ' $(this).siblings("input").val("");';
$buff[] = ' return false;';
$buff[] = ' })';
$buff[] = '});';
$buff[] = '})(jQuery);';
$buff[] = '//]]>';
$buff[] = '</script>';
break;
그리고 위와 같이
Context::loadJavascriptPlugin('ui.datepicker'); 부분을 컨트롤+F 로 찾아서
기존 datepicker 부분을 datetimepicker로 변경해 줍니다.
그러면 사용자정의에서 날짜와 시간을 선택 할 수 있습니다.
