jQuery Datepicker Àû¿ë ½Ã ±ôºýÀÓ Çö»ó ÇØ°á Çϱâ
Datepicker ¸¦ »ç¿ëÇÏ¿© ¼±ÅÃÇÏ´Â ³¯Â¥¸¦ ¹Þ¾Æ¿À´Â À̺¥Æ®´Â onSelect ÀÌ´Ù. CSS ¿ä¼Ò°¡ Å©°Ô ¿µÇâÀÌ ¾ø´Â ÇüÅ·Π»ç¿ëÇÑ´Ù¸é, ¹®Á¦°¡ µÇÁö ¾Ê´Â´Ù. ÇÏÁö¸¸ ºê¶ó¿ìÀú¿¡ ºÎ´ãÀ» ÁÖ´Â ¿ä¼Ò¸¦ »ç¿ëÇÏ´Â °æ¿ì ±ôºýÀÓ Çö»óÀÌ ³ªÅ¸ ³¯ ¼ö ÀÖ´Ù.
ÃÖ±Ù¿¡ °ÞÀº »ç·Ê·Î´Â background ¿ä¼Ò¸¦ Àû¿ë ÇÑ °æ¿ì ¹ß»ý Çß´Ù. setTimeout( fun, 200 ) À» »ç¿ëÇؼ ½ÃÁ¡À» õõÈ÷ ÇÏ¿© º¸¸é, ÃʱâÈ µÈ ÈÄ Àç »ý¼º µÇ´Â ºÎºÐÀ» È®ÀÎ ÇÒ ¼ö ÀÖ´Ù. Áï CSS ´Â ÃʱâÈ µÈ´Ù.
¾Æ·¡ ¼Ò½º´Â jquery-ui.js Áß datepicker onSelect ÇÔ¼ö¸¦ Callback ÇÏ´Â ºÎºÐÀÌ´Ù. trigger custom callback ºÎºÐÀ» º¸µµ·Ï ÇÑ´Ù. µÎ°³ ÀÎÀÚ¸¦ Á¦°ø ÇÑ´Ù.
- dateStr: ³¯Â¥ ¹®ÀÚ¿
- inst: Datepicker Object
/* Update the input field with the selected date. */ _selectDate: function(id, dateStr) { var onSelect, target = $(id), inst = this._getInst(target[0]); dateStr = (dateStr != null ? dateStr : this._formatDate(inst)); if (inst.input) { inst.input.val(dateStr); } this._updateAlternate(inst); onSelect = this._get(inst, "onSelect"); if (onSelect) { onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callback } else if (inst.input) { inst.input.trigger("change"); // fire the change event } if (inst.inline){ this._updateDatepicker(inst); } else { this._hideDatepicker(); this._lastInput = inst.input[0]; if (typeof(inst.input[0]) !== "object") { inst.input.focus(); // restore focus } this._lastInput = null; } },
inst.inline ±âÁØ¿¡ µû¶ó this._updateDatepicker( inst ) ÇÔ¼ö¸¦ È£Ãâ ÇÏ¿© À§¿¡¼ ¾ð±ÞÇÑ »óȲÀÌ À翬 µÈ´Ù. Çö»óÀ» ÇØ°á Çϱâ À§Çؼ´Â onSelect ÇÔ¼ö¸¦ ¾Æ·¡¿Í °°ÀÌ ±¸ÇöÇÏ¿© È£Ãâ µÇÁö ¾Êµµ·Ï ÇØ¾ß ÇÑ´Ù.
$datepicker.datepicker( { inline: true, showOtherMonths: true, showMonthAfterYear: true, monthNames: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ], dayNamesMin: [ 'ÀÏ', '¿ù', 'È', '¼ö', '¸ñ', '±Ý', 'Åä' ], onSelect: function( date, inst ) { inst.inline = false; // datepicker object inline false º¯°æ customSelect( date ); // »ç¿ëÀÚ Á¤ÀÇ ±¸Çö ÇÔ¼ö } } );
À§ ¼Ò½º¸¦ Âü°íÇÏ¿© Àû¿ë ÇÑ´Ù¸é, ±ô¹ÚÀÓ Çö»óÀº ÇØ°á µÈ´Ù. customSelect( date ) ·Î Á¤ÀÇÇÑ ÇÔ¼ö´Â ½ºÅ¸ÀÏ¿¡ ¸Â°Ô Àû¿ë Çϵµ·Ï ÇÑ´Ù.
Âü°í »çÀÌÆ®
Ãâó: http://blog.whitelife.co.kr/289 [White Life Story]