Bootstrap4+jQuery에서 캘린더를 사용해 보세요!

17182 단어 HTMLjQueryCSSbootstrap4HTML5
아무도! 디자인 엔지니어의 Masa입니다.


무엇을 위해 공유합니까?



초보자가 자주 할 수 있을 때까지의 뒤를 남겨서, 나중에 학습하는 사람이 어떤 길을 따라가야 하는지 알 수 있도록 하기 위해 씁니다!
의문이 해소되거나, 불안이 조금이라도 줄어들면, 왼쪽의 좋아하는 버튼을 확실히 부탁합니다!

움직이기 위한 전제 조건



bootstrap4와 jQuery와 moment.js와 tempusdominus bootstrap4의 합계 4개의 라이브러리를 html내에 기술해 줄 필요가 있다.

html
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
</head>

bootstrap4의 CDN은 여기
h tps : // 깜박임 t. jp. 오 rg / 보오 tst 등 p4 / 갓찐 g-s rd d / 인 t 로즈 c 치온

jquery의 CDN은 여기
htps : // 여기. j 쿠에 ry. 코m/

moment.js의 CDN은 여기
htps // cd js. 코 m/ぃb 라리에 s/모멘 t. js/2.22.2

tempusdominus bootstrap4의 CDN은 여기
htps : /// m 뿌 s 도미누 s. 기주 b. 이오 / 보오 tst 등 p-4 / 인 s 팻 g /
↑이 사이트를 충실하게 재현하면 캘린더를 부분적으로 이용할 수 있습니다.
예를 들어, 날짜만, 시간만, 날짜+시간 등 다양한 부품이 준비되어 있어 매우 편리하기 때문에

자, 캘린더를 사용하세요!



통째로 index.html 파일에도 복사하면 사용할 수 있습니다.
일단 움직여보고 싶어! 라고 하는 사람은 코피페로 부디!
(bootstrap의 그리드 디자인을 사용하고 있으므로 그 근처는 양해를)

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ToDoアプリ</title>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />

  <style type="text/css">
  .datepicker-days th.dow:first-child,
  .datepicker-days td:first-child {
    color: #f00;
  }
  .datepicker-days th.dow:last-child,
  .datepicker-days td:last-child {
    color: #00f;
  }
  </style>
</head>
<body>

  <div class="container-fluid text-center">
    <div class="row">
      <div class="col-md-3">
      </div>
      <div class="col-md-6"> <!-- new todo -->
        <form>
          <div class="container">
            <label class="control-label">Deadline</label>
            <div class="form-group">
              <div class="input-group date" id="datetimepicker4" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
                <div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
                  <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
              </div>
            </div>
            <script type="text/javascript">
            $(function () {
              $('#datetimepicker4').datetimepicker({
                format: 'L'
              });
            });
            </script>
          </div>

          <div class="container">
            <div class="form-group">
              <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3"/>
                <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
                  <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
                </div>
              </div>
            </div>

            <script type="text/javascript">
            $(function () {
              $('#datetimepicker3').datetimepicker({
                format: 'LT'
              });
            });
            </script>

          </div>

        </form>

      </div> <!-- close new todo  -->
      <div class="col-md-3">
      </div>

    </div>   <!--close row-->
  </div>    <!--close container-->

</body>
</html>

마지막으로



기사에서는 슬랙과 쓰고 있습니다만,
상당히 지팡이에 빠져 1시간 정도 「움직이는 응!」라고 방 안에서 말하고 있었습니다.

의문이 해소되거나 불안이 조금이라도 줄어들면
왼쪽의 좋아하는 버튼을 꽉 부탁드립니다!
그럼 드론!

처녀작:에로 진단 메이커(공동 제작:Kei)
htps : // 에로 신단. 어리석은 p. 코m/

Ed.D ~ Eros Driven Development ~
htps : // s 처짐. ㅇㅜㅜㅜㅜ 코 m / 엣 d 칭찬 파게 / 인 t 로즈 c 치오 넷 d / 어서 x. HTML

참고문헌



tempusdominus bootstrap4의 존재를 가르쳐 주셨습니다.
또한 캘린더 아이콘이 잘 표시되지 않는 문제를 해결하는 팁을 받았습니다.
htps : // 코 m / 야쥬 / ms / 2c 베 5에 5914c5 베 08820
Rails x Bootstrap4 x nested_attributes 양식 디자인 패턴
Python Bottle Hello World Bootstrap4

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage