JavaScript È°¿ëÆÁ
2019.01.13 / 22:30

[bootstrap] ±¸±Û Å©·Ò¿¡¼­ bootstrap datapicker°¡ ÀÛµ¿ÇÏÁö ¾ÊÀ»¶§

hanulbit
Ãßõ ¼ö 277

Internet Explorer¿¡¼­´Â ÀÛµ¿À» ÀßÇÏÁö¿ä.

±Ùµ¥ °©Àڱ⠱¸±Û Å©·ÒÀ» ÄѺ¸´Ï ¾ÈµÇ´Â ¹®Á¦¸¦ ¹ß°ßÇ߳׿ä.

datepicker.js¸¦ º¯°æÇØÁÖ¸é ½±°Ô ÇØ°áÀÌ µË´Ï´Ù.

zIndex·Î °Ë»öÇÏ¸é µü 550 ÁÙ Á¤µµ¿¡ ³ª¿Í¿ä.

   var zIndex = parseInt(this.element.parents().filter(function(){
     return $(this).css('z-index') !== 'auto';
    }).first().css('z-index'))+1151;

10À¸·Î µÇÀִµ¥ ÀÌ°É 1151·Î º¯°æÇØÁÖ¸é µË´Ï´Ù.

±×·³ Àßµ¹¾Æ°¡À¯~

 ÀÌ·¸°Ô Àß ³ª¿À³×¿ä ¤»¤»

Âü°í·Î µ¥ÀÌÅÍ datepicker¸¦ »ç¿ëÇϽǷÁ¸é 3°³ÀÇ ÆÄÀÏÀÌ ÇÊ¿äÇØ¿ä.

 1. datepicker core js

bootstrap-datepicker.js

 2.ÇÑ±Û Áö¿øÀ» À§ÇÑ js

bootstrap-datepicker.kr.js

 3.±×¸®°í ¸ÔÀÏ css

datepicker3.css

 

EX) Example

1.Import

</div> <link rel="stylesheet" type="text/css" href="<c:url value='/css/bootstrap/datepicker3.css' /> " />

<script src="<c:url value='/js/lib/bootstrap/bootstrap-datepicker.js' /> "></script>


<script src="<c:url value='/js/lib/bootstrap/bootstrap-datepicker.kr.js' /> "></script>

2. config

 $('#datapickerBox input').datepicker({
  format: "yyyy-mm-dd",
  startView: 1,
  todayBtn:"linked",
  language: "kr",
  orientation: "top auto",
  keyboardNavigation: false,
  forceParse: false,
  autoclose: true,
  todayHighlight: true
 });

3.tag

<div class="col-xs-1" id="datapickerBox">
<input class="form-control input-sm" type="text" id="wrtDtReg" name="wrtDt" placeholder="" readonly="readonly">