요런 jquery 달력인 datepicker를 사용하고 있었다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datepicker</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
var options = {
showOn : 'button'
, buttonImage : 'https://jqueryui.com/resources/demos/datepicker/images/calendar.gif'
, buttonText : '날자선택'
, buttonImageOnly : true
, showMonthAfterYear : true
, changeYear : true
, changeMonth : true
, dateFormat : 'yy-mm-dd'
, monthNamesShort : ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] // 월의 한글 형식.
, dayNamesMin : ['일','월','화','수','목','금','토']
};
$(".datepicker").datepicker(options);
});
</script>
</head>
<body>
<input type="text" class="datepicker" id="date1">
~
<input type="text" class="datepicker" id="date2">
</body>
</html>
퍼블리셔 분이 datepicker에 대한 수정을 요청하셨다. 웹접근성에 맞게 작동해야 한다는 것이다.
날짜 input안에서 탭을 하면 달력 이미지로 포커스가 가고 거기서 앤터를 치면 달력이 펼쳐져야 된다는 것이다.
현재소스에서는 input 옆에 버튼이 생기지만 이미지만 있어서 그쪽으로는 포커스가 가질 않는다.
그래서 엄청난 삽질을 했다.
datepicker를 통제하기 위해 무지막지한 스크립트를 덕지덕지 붙이기 시작했다.
그러던 중 buttonImageOnly 라는 속성이 뭐지... false로 주면 어떻게 되나...
false로 설정하고 새로 고침을 하니...
button이 생성되고 이미지가 button안에 BG로 보이는 것이다.
역시... tutorial을 제대로 읽어야 한다.
그래야 고생을 안한다.
buttonImageOnly : false
요것만 바꿔주면 된다..
'프론트 프로그램' 카테고리의 다른 글
| 다음 API 종료 및 카카오 API 전환 적용 (0) | 2019.02.01 |
|---|---|
| bxslider 웹 접근성 지적사항 조치 (4) | 2019.01.18 |
| 웹 페이지 강제 이동시키기 (0) | 2017.09.28 |
| 스크립트 윈도우창 닫을 때 이벤트 감지 및 처리 - beforeunload - 이 페이지에서 나가시겠습니까, 이 사이트에서 나가시겠습니까 (0) | 2017.08.24 |
| Tabs Upload 3 업로드, 다운로드 소스 (0) | 2017.07.07 |