[jQueryUI] 간편한 날짜 선택 팝업 구현

Front-End/jQueryUI

[jQueryUI] 간편한 날짜 선택 팝업 구현 - datepicker()

리딩리드 2017. 2. 2. 19:30

간편한 날짜 선택 팝업 구현

1. 정의

- datepicker()를 이용하여 간단하게 날짜 팝업을 구현한다

2. 구문

- $(텍스트상자).datepicker({매개변수 : 값,...})

1) 날짜 형식 국제화 대응

- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script>

- 위의 url을 추가 함으로서 날짜 형식을 맞출 수가 있다

2) 언어 선택

- $.datepicker.setDefault 메소드를 이용하여 언어를 선택한다

- ko(한국어), fr(프랑스), de(독일)

3. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery UI</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> <style> </style> </head> <form> <input type="text" id="date" size="10"/> </form> <span id="details"></span> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script> <script> $(function() { $.datepicker.setDefaults($.datepicker.regional['ko']); $('#date').datepicker(); }); </script>