마카로닉스

1636 No

부트스트랩 bootstrap datetimepicker 적용하기

2019-03-31 15:40:33 By 라이트 0 527 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

CDN

  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>장애 리스트 관리 시스템</title>

    <!-- CSS -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">       
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">      
    <!--  datepicker3 CSS --> 
   <link href="assets/css/bootstrap-datetimepicker.css" rel="stylesheet"> 
      
    <!-- custoem CSS -->
    <link rel="stylesheet"  href="assets/css/fault_handling.css">      
    
    
    
    <!-- js  -->
    <script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
 
    <!--  datepicker3 js -->        
    <script src="assets/js/moment-with-locales.js"   charset="utf-8"></script>  
    <script src="assets/js/bootstrap-datetimepicker.js"></script>
            
    <script src="assets/js/fault_handling.js" charset="UTF-8"></script>

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>장애 리스트 관리 시스템</title>

    <!-- CSS -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">       
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">      
    <!--  datepicker3 CSS --> 
   <link href="assets/css/bootstrap-datetimepicker.css" rel="stylesheet"> 
      
    <!-- custoem CSS -->
    <link rel="stylesheet"  href="assets/css/fault_handling.css">      
    
    
    
    <!-- js  -->
    <script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
 
    <!--  datepicker3 js -->        
    <script src="assets/js/moment-with-locales.js"   charset="utf-8"></script>  
    <script src="assets/js/bootstrap-datetimepicker.js"></script>
            
    <script src="assets/js/fault_handling.js" charset="UTF-8"></script>

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
<section class="fault-handling-section">
    
    
      <div class="row">  
          <!-- 사이즈 조절 class="col-xs-3 .col-md-2"  -->
          <div class="col-xs-3 col-sm-3 col-md-1"></div>
          <!-- 사이즈 조절 class="col-xs-12 .col-sm-6 .col-md-8"  -->
          <div class="col-xs-12 col-sm-10 col-md-10">
               <div class="fault-handling-title">
                 <h3 class="text-left">장애 리스트 관리 시스템</h3>
                 <div class="text-right">xxx님 ,반갑습니다.</div>   
               </div>
              
              
             <div class="fault-handling-nav-tab">
                  <ul class="nav nav-pills nav-justified">
                      <li role="presentation" class="active"><a href="#">장애 등록/수정/승인</a></li>
                      <li role="presentation" ><a href="index2.html">장애 통계 관리</a></li>
                  </ul>    
             </div>
                                        
              
             <div class="fault-handling-num-1"> <!-- start : num-1 -->
                  <div class="row">
                <form action=""  name="search-form" class="form-horizontal" >                  
                   
                                         
                    <div class="col-xs-3 fault-group-3">
                        <label class="num-label"><span class="num-label-span">담당 팀</span>
                          <select class="form-control  form-group-fault-input-0">
                            <option></option>    
                          </select> 
                        </label>    
                    </div>   
                
                  
                
                    <div class="col-xs-2 fault-group-2">
                        <label class="num-label"><span class="num-label-span">담당 자</span> 
                         <input  class="form-control  form-group-fault-input-1 ">
                        </label>
                    </div>   
                        
                    <div class="col-xs-3 text-right fault-group-startdate date">
                        <label><span class="num-label-span">시작일</span> 
                          <input type="text" class="form-control date  form-group-fault-input-2 datetimepicker1" > 
                        <span class="input-group-addon" >
                                <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                        </label>

                    </div>   
                         
                     <div class="col-xs-3 text-left fault-group-enddate date">
                         <label><span class="num-label-span">종료일</span> 
                          <input type="text" class="form-control date form-group-fault-input-2 datetimepicker1"> 
                        <span class="input-group-addon" >
                                <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                        </label>

                    </div>    
                        
                        
                     <div class="col-xs-1 text-right fault-group-div" >
                        <input type="submit" class="btn btn-primary fault-group-btn " value="검색" >
                    </div>
   
                
               </form> 
                       </div> 
             </div>   <!-- end : num-1 -->
      
              
              
            <div class="fault-handling-num-2"> <!-- start : num-2 -->
              <div class="table-responsive">
                      <table class="table table-bordered  table-hover text-center ">
                        <thead>
                          <tr class="active">
                            <th class="text-center">장애 번호</th>
                            <th class="text-center">장애 등급</th>
                            <th class="text-center">장애 제목</th>
                            <th class="text-center">등록 일시</th>
                            <th class="text-center">수정 일시</th>
                            <th class="text-center">담당 팀</th>
                            <th class="text-center">담당 자</th>
                            <th class="text-center">승인</th>  
                            <th class="text-center">승인자</th>  
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr> 
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr>                            
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr> 
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td>10101</td>
                            <td>심각</td>
                            <td>서버 오류</td>
                            <td>2019-02-11 15:47</td>
                            <td></td>
                            <td>주문개발</td>
                            <td>윤정현</td>
                            <td>승인 필요</td>
                            <td></td>
                          </tr>                            
                        </tbody>
                        
                      </table>
                  
                  
                        <nav class="text-center">
                                <ul class="pagination">
                                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                                    <li><a href="#">&lsaquo;</a></li>
                                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                     <li><a href="#">&rsaquo;</a></li>
                                    <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                                 </ul>
                        </nav>  
                  
                 </div>              
            </div>   <!-- end : num-2 -->
            
              
  
              
            <div class="row"> <!-- start : num-3 -->              
                <div class="num3-1"></div>
                <div class="col-xs-10 col-sm-10 num3-2" >
               <form class="form-horizontal"  >
             
                   <div class="form-group">
                    <label for="" class="col-sm-2 control-label">장애 아이디</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control"  readonly value="1112" >
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="" class="col-sm-2 control-label">장애 제목</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control"  value="190312 [escrow] xxx로 인한 주문/클레임 문제">
                    </div>
                  </div>                                     
     
                   
                
                  <div class="form-group">
                    <div class="date">
                    <label for="" class="col-sm-2 control-label">발생 일시</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control datetimepicker1"  id="start-date">                        
                    </div>
                    <div class="col-sm-1">  
                   <span class="input-group-addon-1">
                            <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div> 
                    </div>  

                       <div class="date">
                   <label for="" class="col-sm-2 control-label text-left">복구 일시</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control datetimepicker1"  id="end-date" >                        
                    </div> 
                    <div class="col-sm-1">  
                       <span class="input-group-addon-2">
                                <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div> 
                      </div>   
                           
                 </div>
                   

                  <div class="form-group">
                    <label for="" class="col-sm-2 control-label">담당자</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control"  readonly value="유정현" >                        
                    </div>
                      <div class="col-sm-1"></div>
      
                    <label for="" class="col-sm-2 control-label">담당팀</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control"  readonly value="주문개발팀">                        
                    </div>
                   
                  </div>                       
                     
                                      
                  <div class="form-group">
                    <label for="" class="col-sm-2 control-label">신고자</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control"   value="유정현" >                        
                    </div>
                      <div class="col-sm-1"></div>
      
                    <label for="" class="col-sm-2 control-label">장애등급</label>
                    <div class="col-sm-3">
                      <select class="form-control">
                          <option>보통</option>
                      </select>                     
                    </div>
                   
                  </div>     
                   
                          
                 <div class="form-group">
                    <label for="" class="col-sm-2 control-label">신고 내역</label>
                    <div class="col-sm-10">
                      <textarea  class="form-control" rows="5"></textarea>
                    </div>
                  </div> 
              
                   
                 <div class="form-group">
                    <label for="" class="col-sm-2 control-label">장애원인</label>
                    <div class="col-sm-10">
                      <textarea  class="form-control" rows="5"></textarea>
                    </div>
                  </div>                    
                   
                   
                 <div class="form-group">
                    <label for="" class="col-sm-2 control-label">장애범위</label>
                    <div class="col-sm-10">
                      <textarea  class="form-control" rows="5"></textarea>
                    </div>
                  </div>                    
     
                 <div class="form-group">
                    <label for="" class="col-sm-2 control-label">조치내용</label>
                    <div class="col-sm-10">
                      <textarea  class="form-control" rows="5"></textarea>
                    </div>
                  </div>  
                   
                 <div class="form-group">
                    <label for="" class="col-sm-2 control-label">향후방안</label>
                    <div class="col-sm-10">
                      <textarea  class="form-control" rows="5"></textarea>
                    </div>
                  </div>                     
                   

                   <div class="form-group"> 
                    <div class="col-sm-12 text-right">
                        <button class="btn btn-info" type="reset">초기화</button>
                        <button class="btn btn-primary" type="button">확인</button>
                        <button class="btn btn-warning" type="button" >수정</button>
                        <button class="btn btn-success" type="button">승인</button>
                    </div>   
                   </div>   
                </form>
                </div>
          </div><!-- end : num-3 --> 
              
         
              
              
              
              
              
          
          </div> 
           
      </div>

      
      
      
      
</section>      

      
      
<script>
$(function(){        
   myDataTime();

});   
    
function myDataTime(){
    $(".form-group-fault-input-2").css("font-size", "10px");
    $('.datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD a hh:mm:ss',
            locale: 'ko'        
    }); 
    
   $('.input-group-addon-1').on('click', function() {       
  	  $('#start-date').data('DateTimePicker').toggle();
   });
    
   $('.input-group-addon-2').on('click', function() {       
  	  $('#end-date').data('DateTimePicker').toggle();
   });
        
}
    
    
</script>

  
      
  </body>
</html>

index2.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>장애 리스트 관리 시스템</title>

    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">      
    <!--  datepicker3 CSS --> 
   <link href="assets/css/bootstrap-datetimepicker.css" rel="stylesheet"> 
      
    <!-- custoem CSS -->
    <link rel="stylesheet"  href="assets/css/fault_handling.css">  
         

      <!--http://canvasjs.com/  유료 차트-->
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

    <!-- js  -->
    <script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
 
    <!--  datepicker3 js -->        
    <script src="assets/js/moment-with-locales.js"   charset="utf-8"></script>  
    <script src="assets/js/bootstrap-datetimepicker.js"></script>
            
    <script src="assets/js/fault_handling.js" charset="UTF-8"></script>

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
<section class="fault-handling-section">
    
    
      <div class="row">  
          <!-- 사이즈 조절 class="col-xs-3 .col-md-2"  -->
          <div class="col-xs-3 col-sm-3 col-md-1"></div>
          <!-- 사이즈 조절 class="col-xs-12 .col-sm-6 .col-md-8"  -->
          <div class="col-xs-12 col-sm-10 col-md-10">
               <div class="fault-handling-title">
                 <h3 class="text-left">장애 리스트 관리 시스템</h3>
                 <div class="text-right">xxx님 ,반갑습니다.</div>   
               </div>
              
              
             <div class="fault-handling-nav-tab">
                  <ul class="nav nav-pills nav-justified">
                      <li role="presentation" ><a href="index.html">장애 등록/수정/승인</a></li>
                      <li role="presentation" class="active" ><a href="#">장애 통계 관리</a></li>
                  </ul>    
             </div>
                                        
              
             <div class="fault-handling-num-1"> <!-- start : num-1 -->
                  <div class="row">
                <form action=""  name="search-form" class="form-horizontal" >                  
                   <div class="col-xs-1"></div>
                                         
                    <div class="col-xs-3 fault-group-startdate">
                        <label class="num-label"><span class="num-label-span">담당 그룹팀</span>
                          <select class="form-control  form-group-fault-input-2">
                            <option></option>    
                          </select> 
                        </label>    
                    </div>   
                                
                    
                  <div class="col-xs-3 text-left fault-group-startdate date">
                        <label><span class="num-label-span">시작일</span> 
                          <input type="text" class="form-control  form-group-fault-input-2 datetimepicker1"  > 
                        <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                        </label>
                  </div>   
                         
                     <div class="col-xs-3 text-left fault-group-enddate date">
                         <label><span class="num-label-span">종료일</span> 
                          <input type="text" class="form-control date form-group-fault-input-2 datetimepicker1" > 
                          <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                          </span>
                        </label>

                    </div>   
                        
                        
                     <div class="col-xs-1 text-right fault-group-div" >
                        <input type="submit" class="btn btn-primary fault-group-btn " value="검색" >
                    </div>
   
                
               </form> 
                       </div> 
             </div>   <!-- end : num-1 -->
      
         
              
          <div class="fault-handling-num-5"> <!-- start : num-2 -->
             <div class="container-fluid">
                <div class="row">
<!--                    <div class="col-md-6">
                        <div id="pieChart" style="height: 360px; width: 100%;">
                        </div>
                    </div>-->
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <div id="columnChart" style="height: 360px; width: 100%;">
                        </div>
                    </div>
                    <div class="col-md-3"></div>
                </div>
            </div>          
          </div> <!-- end : num-2 -->
              
            <div class="fault-handling-num-3"> <!-- start : num-3 -->
              <div class="table-responsive">
                      <table class="table table-bordered  table-hover text-center ">
                        <thead>
                          <tr class="active">
                            <th class="text-center">장애 번호</th>
                            <th class="text-center">장애 등급</th>
                            <th class="text-center">장애 이름</th>
                            <th class="text-center">등록 일시</th>
                            <th class="text-center">수정 일시</th>
                            <th class="text-center">담당 팀</th>
                            <th class="text-center">담당 자</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>10101</td>
                            <td>보통</td>
                            <td>주문실패</td>
                            <td>2019-03-10 15:45</td>
                            <td></td>  
                            <td>주문개발</td>
                            <td>윤정현</td>
                          </tr> 
                        <tr>
                            <td>10103</td>
                            <td>보통</td>
                            <td>접속불가</td>
                            <td>2019-03-11 14:22</td>
                            <td>2019-03-13 14:22</td>  
                            <td>주문개발</td>
                            <td>윤정현</td>
                          </tr> 
          
                         <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>  
                            <td></td>
                            <td></td>
                          </tr> 
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>  
                            <td></td>
                            <td></td>
                          </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>  
                            <td></td>
                            <td></td>
                          </tr>                            
                        </tbody>
                        
                      </table>
                  
                  
                        <nav class="text-center">
                                <ul class="pagination">
                                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                                    <li><a href="#">&lsaquo;</a></li>
                                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                     <li><a href="#">&rsaquo;</a></li>
                                    <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                                 </ul>
                        </nav>  
                  
                 </div>              
            </div>   <!-- end : num-3 -->
            
              
          
              
              
          
          </div> 
           
      </div>

      
      
      
      
</section>      

      
  
   
<script>
/*var pieChartValues = [{
  y: 39.16,
  exploded: true,
  indexLabel: "Hello",
  color: "#1f77b4"
}, {
  y: 21.8,
  indexLabel: "Hi",
  color: "#ff7f0e"
}, {
  y: 21.45,
  indexLabel: "pk",
  color: " #ffbb78"
}, {
  y: 5.56,
  indexLabel: "one",
  color: "#d62728"
}, {
  y: 5.38,
  indexLabel: "two",
  color: "#98df8a"
}, {
  y: 3.73,
  indexLabel: "three",
  color: "#bcbd22"
}, {
  y: 2.92,
  indexLabel: "four",
  color: "#f7b6d2"
}];
renderPieChart(pieChartValues);

function renderPieChart(values) {

  var chart = new CanvasJS.Chart("pieChart", {
    backgroundColor: "white",
    colorSet: "colorSet2",

    title: {
      text: "Pie Chart",
      fontFamily: "Verdana",
      fontSize: 25,
      fontWeight: "normal",
    },
    animationEnabled: true,
    data: [{
      indexLabelFontSize: 15,
      indexLabelFontFamily: "Monospace",
      indexLabelFontColor: "darkgrey",
      indexLabelLineColor: "darkgrey",
      indexLabelPlacement: "outside",
      type: "pie",
      showInLegend: false,
      toolTipContent: "<strong>#percent%</strong>",
      dataPoints: values
    }]
  });
  chart.render();
}*/
var columnChartValues = [{
  y: 686.04,
  label: "빌딩개발",
  color: "#1f77b4"
}, {
  y: 381.84,
  label: "백엔드개발",
  color: "#ff7f0e"
}, {
  y: 375.76,
  label: "정산개발",
  color: " #ffbb78"
}, {
  y: 97.48,
  label: "주문",
  color: "#d62728"
}/*, {
  y: 94.2,
  label: "five",
  color: "#98df8a"
}, {
  y: 65.28,
  label: "Hi",
  color: "#bcbd22"
}, {
  y: 51.2,
  label: "Hello",
  color: "#f7b6d2"
}
*/                        
];
renderColumnChart(columnChartValues);

function renderColumnChart(values) {

  var chart = new CanvasJS.Chart("columnChart", {
    backgroundColor: "white",
    colorSet: "colorSet3",
    title: {
      text: "에스크로그룹 등급별 장애 관리 현황",
      fontFamily: "Verdana",
      fontSize: 25,
      fontWeight: "normal",
    },
    animationEnabled: true,
    legend: {
      verticalAlign: "bottom",
      horizontalAlign: "center"
    },
    theme: "theme2",
    data: [

      {
        indexLabelFontSize: 15,
        indexLabelFontFamily: "Monospace",
        indexLabelFontColor: "darkgrey",
        indexLabelLineColor: "darkgrey",
        indexLabelPlacement: "outside",
        type: "column",
        showInLegend: false,
        legendMarkerColor: "grey",
        dataPoints: values
      }
    ]
  });

  chart.render();
}
    
$(function(){
    $(".canvasjs-chart-credit").html("");

    myDataTime();

});
      
function myDataTime(){
    $(".form-group-fault-input-2").css("font-size", "10px");
    $('.datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD a hh:mm:ss',
            locale: 'ko'        
    }); 
}
</script>    


      
      
      
  </body>
</html>

fault_handling.js

var mobilecheck = function () {
     var check = false;
     (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
     return check;
 }


$(function(){     
     mobileCss();
});

   
function mobileCss(){
    if(mobilecheck()){

            $('.fault-group-2').attr('class', 'col-xs-12 fault-group-2');
            $('.fault-group-3').attr('class', 'col-xs-12 fault-group-3');
            $('.fault-group-startdate').attr('class', 'col-xs-12 text-left fault-group-startdate');
            $('.fault-group-enddate').attr('class', 'col-xs-12 text-left fault-group-enddate');
            $('.fault-group-div').attr('class', 'col-xs-12 text-center fault-group-div');


            $('.form-group-fault-input-0').css('width', '80%');
            $('.form-group-fault-input-1').css('width', '80%');
            $('.form-group-fault-input-2').css('width', '70%');

            $('.fault-group-div').attr('class', 'col-xs-12 text-center fault-group-div');
            $('.fault-group-btn').css('width', '90%');

           
          //모바일로 접속시
     }else{
        
          //PC로 접속시 
     } 
    
}

(function($) {	
    
	function mediaSize() { 
		if (window.matchMedia('(max-width: 768px)').matches) {	
	
            $('.fault-group-2').attr('class', 'col-xs-12 fault-group-2');
            $('.fault-group-3').attr('class', 'col-xs-12 fault-group-3');
            $('.fault-group-startdate').attr('class', 'col-xs-12 text-left fault-group-startdate');
            $('.fault-group-enddate').attr('class', 'col-xs-12 text-left fault-group-enddate');
            $('.fault-group-div').attr('class', 'col-xs-12 text-center fault-group-div');
          
            
            $('.form-group-fault-input-0').css('width', '80%');
            $('.form-group-fault-input-1').css('width', '80%');
            $('.form-group-fault-input-2').css('width', '70%');
            
            $('.fault-group-div').attr('class', 'col-xs-12 text-center fault-group-div');
            $('.fault-group-btn').css('width', '90%');
          
            
		} else {
            $('.fault-group-2').attr('class', 'col-xs-2 fault-group-2');
            $('.fault-group-3').attr('class', 'col-xs-3 fault-group-3');
            $('.fault-group-startdate').attr('class', 'col-xs-3 text-left fault-group-startdate');
            $('.fault-group-enddate').attr('class', 'col-xs-3 text-left fault-group-enddate');
            $('.fault-group-div').attr('class', 'col-xs-1 text-center fault-group-div');
            
              
            $('.form-group-fault-input-0').css('width', '55%');
            $('.form-group-fault-input-1').css('width', '60%');
            $('.form-group-fault-input-2').css('width', '60%');
            
            $('.fault-group-btn').css('width', '');
		}
	};
	
    mediaSize();
	window.addEventListener('resize', mediaSize, false);  
	
    
})(jQuery);