Q193894

by jun68ykt

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
開始時刻：<input class="timepicker start" />
〜
終了時刻：<input class="timepicker end" />

CSS

.timepicker { width: 80px; font-size: 14pt; }

JavaScript

$(function(){
    
    $(".timepicker").timepicker({
        timeFormat: 'HH:mm',
        interval: 15,
        minTime: '08:30',
        maxTime: '19:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true,

        change: function() {
            const start = moment($('.start').val(), 'HH:mm');         
            const end = moment($('.end').val(), 'HH:mm');           
            if (start.isValid() && (!end.isValid() || start.isSameOrAfter(end)) ) {
                $('.end').val(start.add(15, 'minutes').format('HH:mm'));
            } else if (end.isValid() && (!start.isValid() || start.isSameOrAfter(end)) ) {
                $('.start').val(end.subtract(15, 'minutes').format('HH:mm')); 
            }
        }
    });
  

});