有没有办法制作第二个输入字段？

Question

有没有办法制作第二个输入字段，以便第一个时间值在一个输入字段中，第二个时间值在另一个输入字段中？我正在尝试将时间发布到数据库中，因此我需要在单独的字段中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />

<div class='amount-time-sch'>

<label for="amount-time">Time</label>
<input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/>
<div id="slider-time"></div><br>
</div>

<script>jQuery(function() {
    jQuery('#slider-time').slider({
        range: true,
        min: 0,
        max: 1000,
        step: 15,
        values: [ 600, 1200 ],
        slide: function( event, ui ) {
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) hours1= '0' + hours;
            if(minutes1.length < 10) minutes1 = '0' + minutes;

            if(minutes1 == 0) minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) hours2= '0' + hours;
            if(minutes2.length < 10) minutes2 = '0' + minutes;

            if(minutes2 == 0) minutes2 = '00';

            jQuery('#amount-time').val(hours1+':'+minutes1+''+hours2+':'+minutes2 );
        }
    });
});

</script>

Answer 1

是的，您可以让您的 jQuery 将值写入两个具有唯一 ID 的不同输入。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />

<div class='amount-time-sch'>

<label for="amount-time">Time</label>
<!-- <input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/> -->
<input type="text" name="start-time" id="start-time" value="10:00">
<input type="text" name="end-time" id="end-time" value="20:00">
<div id="slider-time"></div><br>
</div>

<script>jQuery(function() {
    jQuery('#slider-time').slider({
        range: true,
        min: 0,
        max: 1000,
        step: 15,
        values: [ 600, 1200 ],
        slide: function( event, ui ) {
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) hours1= '0' + hours;
            if(minutes1.length < 10) minutes1 = '0' + minutes;

            if(minutes1 == 0) minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) hours2= '0' + hours;
            if(minutes2.length < 10) minutes2 = '0' + minutes;

            if(minutes2 == 0) minutes2 = '00';

            jQuery('#start-time').val(hours1+':'+minutes1);
            jQuery('#end-time').val(hours2+':'+minutes2);
        }
    });
});
</script>

Answer 2

我建议为每个时间值使用 html 时间输入。这是一个假设的例子：

<form action="#" onsubmit="sendTimes(event)">
  <label for="first-time">first time</label>
  <input type="time" name="first-time" id="first-time"><br>
  <label for="second-time">second time</label>
  <input type="time" name="second-time" id="second-time"><br>
  <input type="submit" value="submit">
</form>

<script type="text/javascript">
  function sendTimes(event) {
    // keep browser from refreshing
    event.preventDefault();
    const formData = new FormData();
    // get the values of the times
    const firstTime = $("#first-time").val();
    const secondTime = $("#second-time").val();
    // add the times to the form data to POST
    formData.append("first-time", firstTime);
    formData.append("second-time", secondTime);
    // insert logic here for sending the form data to PHP
  }
</script>

如果用户将时间值留空，则时间值将为空字符串。否则，它们将是“hh:mm”形式的 24 小时时间。在服务器端，您可以在将 PHP 中的每个时间值保存到数据库之前对其进行验证。