μ¬μ©μκ° μΊλ¦°λμμ λ μ§λ₯Ό μ νν μ μλ jQuery κΈ°λ°μ λΌμ΄λΈλ¬λ¦¬
<script>
νκ·Έμ <link>
νκ·Έλ₯Ό μΉ νμ΄μ§μ <head>
νκ·Έ λ΄μ μ½μ
νλ©΄ λλ€.<head>
<link href="νμΌκ²½λ‘/μ μ΄μΏΌλ¦¬-ui-css-νμΌλͺ
.css" rel="stylesheet" type="text/css"/>
// jQuery λ¨Όμ load
<script src="/νμΌκ²½λ‘/μ μ΄μΏΌλ¦¬-νμΌλͺ
.js" type="text/javascript"></script>
// jQuery UI load
<script src="/νμΌκ²½λ‘/μ μ΄μΏΌλ¦¬-UI-νμΌλͺ
.js" type="text/javascript"></script>
</head>
<script>
$(function () {
$("#datepicker").datepicker({
showOn: "both" // button > λ²νΌμ ν΄λ¦ν λ datepicker νμ. focus > input νλκ° ν¬μ»€μ€λ₯Ό λ°μ λ νμ. both > λ μ΄λ²€νΈ μ€ νλκ° λ°μν λ νμ.
, buttonImage: "../images/calender.svg" // datepickerλ₯Ό μ¬μ©ν λ²νΌ μ΄λ―Έμ§μ URL
, buttonImageOnly: true // μμμ μ€μ ν buttonImageλ₯Ό button μμ μμ λ λλ§ νμ§ μκ³ λ¨λ
μΌλ‘ λ λλ§
, buttonText: "μ ν" // λ²νΌμ νμλλ κΈμ
, changeYear: true // dropdownμΌλ‘ year μ ν κ°λ₯
, changeMonth: true // dropdownμΌλ‘ month μ ν κ°λ₯
, dateFormat: 'yy-mm-dd' // νμλλ λ μ§μ νμ
, dayNames: ['μΌμμΌ', 'μμμΌ', 'νμμΌ', 'μμμΌ', 'λͺ©μμΌ', 'κΈμμΌ', 'ν μμΌ'] // μΌμμΌλΆν° μμνλ μμΌ μ΄λ¦ λͺ©λ‘
, dayNamesMin: ['μΌ', 'μ', 'ν', 'μ', 'λͺ©', 'κΈ', 'ν '] // Datepicker λ΄μμ μ΄ λ¨Έλ¦¬κΈλ‘ μ¬μ©ν μ μλλ‘ μΌμμΌλΆν° μμνλ μ΅μνλ μμΌ μ΄λ¦ λͺ©λ‘
, maxDate: "+5y" // μ νν μ μλ μ΅λ λ μ§ (+1D:ν루ν, -1M:νλ¬ν, -1Y:μΌλ
ν)
, minDate: "-5Y" // μ νν μ μλ μ΅μ λ μ§ (-1D:ν루μ , -1M:νλ¬μ , -1Y:μΌλ
μ )
, monthNames: ['1μ', '2μ', '3μ', '4μ', '5μ', '6μ', '7μ', '8μ', '9μ', '10μ', '11μ', '12μ'] // 1μλΆν° μμνλ μ μ΄λ¦ λͺ©λ‘
, monthNamesShort: ['1μ', '2μ', '3μ', '4μ', '5μ', '6μ', '7μ', '8μ', '9μ', '10μ', '11μ', '12μ'] // Datepicker headerμ monthμ μ¬μ©λλ μ μ΄λ¦ λͺ©λ‘
, showMonthAfterYear: true // Datepicker headerμμ νμ μμκ° μ°λ-μμ΄ λλλ‘
, showOtherMonths: true // νμ¬ μμ μμ λλ λμ λ€λ₯Έ μμ λ μ§λ₯Ό νμνκ² λ€. (μ νμ λΆκ°. μ΄λ¬ν λ μ§λ₯Ό μ νν μ μκ² νλ €λ©΄ selectOtherMonths μ΅μ
μ μ¬μ©ν κ²)
, yearSuffix: "λ
" // Datepicker headerμ μ°λ λ€μ νμν μΆκ° ν
μ€νΈ
});
// Datepickerμ default λ μ§λ₯Ό μ€μ
$('#datepicker').datepicker('setDate', 'today'); // (-1D:ν루μ , -1M:νλ¬μ , -1Y:μΌλ
μ ), (+1D:ν루ν, -1M:νλ¬ν, -1Y:μΌλ
ν)
});
</script>
<input id="datepicker">
<script>
$(function () {
$("#datepicker-from").datepicker({
showOn: "both" // button > λ²νΌμ ν΄λ¦ν λ datepicker νμ. focus > input νλκ° ν¬μ»€μ€λ₯Ό λ°μ λ νμ. both > λ μ΄λ²€νΈ μ€ νλκ° λ°μν λ νμ.
, buttonImage: "../images/calender.svg" // datepickerλ₯Ό μ¬μ©ν λ²νΌ μ΄λ―Έμ§μ URL
, buttonImageOnly: true // μμμ μ€μ ν buttonImageλ₯Ό button μμ μμ λ λλ§ νμ§ μκ³ λ¨λ
μΌλ‘ λ λλ§
, buttonText: "μ ν" // λ²νΌμ νμλλ κΈμ
, changeYear: true // dropdownμΌλ‘ year μ ν κ°λ₯
, changeMonth: true // dropdownμΌλ‘ month μ ν κ°λ₯
, dateFormat: 'yy-mm-dd' // νμλλ λ μ§μ νμ
, dayNames: ['μΌμμΌ', 'μμμΌ', 'νμμΌ', 'μμμΌ', 'λͺ©μμΌ', 'κΈμμΌ', 'ν μμΌ'] // μΌμμΌλΆν° μμνλ μμΌ μ΄λ¦ λͺ©λ‘
, dayNamesMin: ['μΌ', 'μ', 'ν', 'μ', 'λͺ©', 'κΈ', 'ν '] // Datepicker λ΄μμ μ΄ λ¨Έλ¦¬κΈλ‘ μ¬μ©ν μ μλλ‘ μΌμμΌλΆν° μμνλ μ΅μνλ μμΌ μ΄λ¦ λͺ©λ‘
, maxDate: "+5y" // μ νν μ μλ μ΅λ λ μ§ (+1D:ν루ν, -1M:νλ¬ν, -1Y:μΌλ
ν)
, minDate: "-5Y" // μ νν μ μλ μ΅μ λ μ§ (-1D:ν루μ , -1M:νλ¬μ , -1Y:μΌλ
μ )
, monthNames: ['1μ', '2μ', '3μ', '4μ', '5μ', '6μ', '7μ', '8μ', '9μ', '10μ', '11μ', '12μ'] // 1μλΆν° μμνλ μ μ΄λ¦ λͺ©λ‘
, monthNamesShort: ['1μ', '2μ', '3μ', '4μ', '5μ', '6μ', '7μ', '8μ', '9μ', '10μ', '11μ', '12μ'] // Datepicker headerμ monthμ μ¬μ©λλ μ μ΄λ¦ λͺ©λ‘
, showMonthAfterYear: true // Datepicker headerμμ νμ μμκ° μ°λ-μμ΄ λλλ‘
, showOtherMonths: true // νμ¬ μμ μμ λλ λμ λ€λ₯Έ μμ λ μ§λ₯Ό νμνκ² λ€. (μ νμ λΆκ°. μ΄λ¬ν λ μ§λ₯Ό μ νν μ μκ² νλ €λ©΄ selectOtherMonths μ΅μ
μ μ¬μ©ν κ²)
, yearSuffix: "λ
" // Datepicker headerμ μ°λ λ€μ νμν μΆκ° ν
μ€νΈ
});
// Datepickerμ default λ μ§λ₯Ό μ€μ
$("#datepicker-to").datepicker({
showOn: "both" // button > λ²νΌμ ν΄λ¦ν λ datepicker νμ. focus > input νλκ° ν¬μ»€μ€λ₯Ό λ°μ λ νμ. both > λ μ΄λ²€νΈ μ€ νλκ° λ°μν λ νμ.
, buttonImage: "../images/calender.svg" // datepickerλ₯Ό μ¬μ©ν λ²νΌ μ΄λ―Έμ§μ URL
, buttonImageOnly: true // μμμ μ€μ ν buttonImageλ₯Ό button μμ μμ λ λλ§ νμ§ μκ³ λ¨λ
μΌλ‘ λ λλ§
, buttonText: "μ ν" // λ²νΌμ νμλλ κΈμ
, changeYear: true // dropdownμΌλ‘ year μ ν κ°λ₯
, changeMonth: true // dropdownμΌλ‘ month μ ν κ°λ₯
, dateFormat: 'yy-mm-dd' // νμλλ λ μ§μ νμ
, dayNames: ['μΌμμΌ', 'μμμΌ', 'νμμΌ', 'μμμΌ', 'λͺ©μμΌ', 'κΈμμΌ', 'ν μμΌ'] // μΌμμΌλΆν° μμνλ μμΌ μ΄λ¦ λͺ©λ‘
, dayNamesMin: ['μΌ', 'μ', 'ν', 'μ', 'λͺ©', 'κΈ', 'ν '] // Datepicker λ΄μμ μ΄ λ¨Έλ¦¬κΈλ‘ μ¬μ©ν μ μλλ‘ μΌμμΌλΆν° μμνλ μ΅μνλ μμΌ μ΄λ¦ λͺ©λ‘
, maxDate: "+5y" // μ νν μ μλ μ΅λ λ μ§ (+1D:ν루ν, -1M:νλ¬ν, -1Y:μΌλ
ν)
, minDate: "-5Y" // μ νν μ μλ μ΅μ λ μ§ (-1D:ν루μ , -1M:νλ¬μ , -1Y:μΌλ
μ )
, monthNames: ['1μ', '2μ', '3μ', '4μ', '5μ', '6μ', '7μ', '8μ', '9μ', '10μ', '11μ', '12μ'] // 1μλΆν° μμνλ μ μ΄λ¦ λͺ©λ‘
, monthNamesShort: ['1μ', '2μ', '3μ', '4μ', '5μ', '6μ', '7μ', '8μ', '9μ', '10μ', '11μ', '12μ'] // Datepicker headerμ monthμ μ¬μ©λλ μ μ΄λ¦ λͺ©λ‘
, showMonthAfterYear: true // Datepicker headerμμ νμ μμκ° μ°λ-μμ΄ λλλ‘
, showOtherMonths: true // νμ¬ μμ μμ λλ λμ λ€λ₯Έ μμ λ μ§λ₯Ό νμνκ² λ€. (μ νμ λΆκ°. μ΄λ¬ν λ μ§λ₯Ό μ νν μ μκ² νλ €λ©΄ selectOtherMonths μ΅μ
μ μ¬μ©ν κ²)
, yearSuffix: "λ
" // Datepicker headerμ μ°λ λ€μ νμν μΆκ° ν
μ€νΈ
});
// Datepickerμ default λ μ§λ₯Ό μ€μ
$('#datepicker-from').datepicker('setDate', 'today'); // (-1D:ν루μ , -1M:νλ¬μ , -1Y:μΌλ
μ ), (+1D:ν루ν, -1M:νλ¬ν, -1Y:μΌλ
ν)
$('#datepicker-to').datepicker('setDate', 'today'); // (-1D:ν루μ , -1M:νλ¬μ , -1Y:μΌλ
μ ), (+1D:ν루ν, -1M:νλ¬ν, -1Y:μΌλ
ν)
});
</script>
<label for="datepicker-from">From</label>
<input id="datepicker-from">
<label for="datepicker-to">to</label>
<input id="datepicker-to">
jQuery API documentationμ optionsμ methodsμ λν μ€λͺ μ΄ μμΈν λμμμΌλ μ°Έκ³ ν΄μ μλ§κ² customνλ©΄ λλ€! π