Bootstrap DateTimepicker 예제

이 기사에서는 예를 들어 부트스트랩 날짜 시간 선택기를 구현하는 방법을 살펴보겠습니다. 부트스트랩 4 날짜 시간 선택기는 html, php 또는 모든 laravel 파일에서 날짜와 시간을 표시하는 데 사용됩니다.

부트스트랩 4 datetimepicker, jquery 날짜 시간 선택기, 날짜 시간 선택기 부트스트랩, 부트스트랩 5 datetimepicker 예제, 날짜 시간 선택기 jquery를 살펴보겠습니다.

여기서는 jquery, css 및 js와 부트스트랩 datetime-picker css 및 js를 이 날짜 시간 선택기 예제에 사용할 것입니다. jquery datepicker 시간은 사용자에게 많은 사용자 정의 기능을 제공합니다.

우선 헤드 섹션에 JS와 CSS를 추가해야 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Read Also : Laravel 8 Mobile Number OTP Authentication using Firebase


이제 부트스트랩 DateTime 선택기를 추가합니다. 따라서 파일에 아래 코드를 추가하십시오.

<div class="container">
  <br><br><br>
  <div class='col-sm-6'>
      <div class="form-group">
        <label for="">Date and Time</label>
          <div class='input-group date' id='datetime'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
              </span>
          </div>
      </div>
  </div>
</div>

<script>
$(function () {
  $('#datetime').datetimepicker();
});
</script>

현재 날짜를 선택하기 위해 비활성화하려면 아래 코드를 추가하십시오.

<script type="text/javascript">
    $(function () {
        $('#example').datetimepicker({
          useCurrent: false,
        });
    });
</script>

Read Also : Laravel Accessor and Mutator Example


최소 날짜를 설정하려면 아래 기능이 유용합니다.

<script type="text/javascript">
    $(function () {
      $('#mindate').datetimepicker({
          minDate : new Date(),
      });
    });
</script>

또한 요구 사항에 따라 날짜 형식을 변경할 수 있습니다.

<script type="text/javascript">
    $(function () {
      $('#dateformat').datetimepicker({
         format:'Y-M-d'
      });
    });
</script>

다음을 좋아할 수도 있습니다.

Read Also : Laravel Signature Pad Example

Read Also : Laravel 8 Autocomplete Search from Database

Read Also : Laravel 8 Socialite Login with Facebook Account

Read Also : How To Integrate Stripe Payment Gateway In Laravel 8