Bootstrap 달력 datetimepicker (with python flask)

기능

- yyyy-mm-dd HH:mm:ss 형태로 날짜 데이터 입/출력

- python flask에서 get, post 형태로 날짜 데이터 처리

 

js

<!-- jQuery -->
<script src="/ path /plugins/jquery/jquery.min.js"></script>
<!-- Select2 -->
<script src="/ path /plugins/select2/js/select2.full.min.js"></script>
<!-- InputMask -->
<script src="/ path /plugins/moment/moment.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="/ path /plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>

css

<!-- Font Awesome -->
<link rel="stylesheet" href="/ path /plugins/fontawesome-free/css/all.min.css">
  
<!-- Select2 -->
<link rel="stylesheet" href="/ path /plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="/ path /plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="/ Path /plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

html

datetimepicker ID : search_start_time, search_end_time

datetime text ID : search_start_input, search_end_input

 

<!-- Start Time -->
<div class="form-group col-md-4">
  <div class="input-group">
	<div class="input-group date" id="search_start_time" data-target-input="nearest">
	  <span class="btn btn-warning iw-100">Start Time</span>
	  <input type="text" data-date-format='yyyy-mm-dd' class="form-control datetimepicker-input" id="search_start_input" name="search_start_input" data-target="#search_start_time"/>
	  <div class="input-group-append" data-target="#search_start_time" data-toggle="datetimepicker">
		  <div class="input-group-text"><i class="fa fa-calendar"></i></div>
		</div>
	</div>
  </div>
</div>

<!-- End Time -->
<div class="form-group col-md-4">
  <div class="input-group">
	<div class="input-group date" id="search_end_time" data-target-input="nearest">
	  <span class="btn btn-warning iw-100">End Time</span>
	  <input type="text" data-date-format='yyyy-mm-dd' class="form-control datetimepicker-input" id="search_end_input" name="search_end_input" data-target="#search_end_time"/>
	  <div class="input-group-append" data-target="#search_end_time" data-toggle="datetimepicker">
		  <div class="input-group-text"><i class="fa fa-calendar"></i></div>
		</div>
	</div>
  </div>
</div>

javascript

datetimepicker ID에 icon 및 format 적용

<script type="text/javascript">
    $(function () {
    
        //값 확인
        start_time = $('#search_start_input').val();
        end_time = $('#search_end_input').val();
    
        //Date and time picker
        $('#search_start_time').datetimepicker({ icons: { time: 'far fa-clock' }, format: 'yyyy-MM-DD HH:mm:ss' });
        $('#search_end_time').datetimepicker({ icons: { time: 'far fa-clock' }, format: 'yyyy-MM-DD HH:mm:ss' });
    });
</script>

python flask

datetime text ID로 값을 조회

#get 방식
@bts_blueprint.route('search/datetime_ex', methods=['GET'])
@login_required
def search_datetime_ex(name=''):
    
    #get 방식
    search_start_time = request.args.get('search_start_input')
    search_end_time = request.args.get('search_end_input')

    # 처리 로직
    var results = 0

    return results

#post 방식
@bts_blueprint.route('search/datetime_ex', methods=['POST'])
@login_required
def search_datetime_ex(name=''):

    search_start_time = request.form['search_start_input']
    search_end_time = request.form['search_end_input']
    
    # 처리 로직
    var results = 0
    
    return results