Jak zaakceptować tylko przyszły lub aktualny czas w typie wejściowym = "czas"?

Mam pole input z type="time". Jak sprawić, by to pole akceptowało tylko bieżący lub przyszły czas?Jak zaakceptować tylko przyszły lub aktualny czas w typie wejściowym = "czas"?

Jeśli użytkownik wprowadzi niewłaściwy czas, powinien zostać wyświetlony komunikat z prośbą o ponowne wprowadzenie czasu. Przyszłość oznacza tutaj upto 2 dni.

Tutaj właśnie wyświetlam aktualny czas za pomocą jquery.

function validDate(){ 
 
    var today = new Date().toISOString().split('T')[0]; 
 
    document.getElementsByName("date")[0].setAttribute('min', today); 
 
} 
 

 
$(function() { 
 
    $('input[type="time"][value="now"]').each(function() { 
 
    var d = new Date(), 
 
     h = d.getHours(), 
 
     m = d.getMinutes(); 
 
    if (h < 10) h = '0' + h; 
 
    if (m < 10) m = '0' + m; 
 
    $(this).attr({ 
 
     'value': h + ':' + m 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body onload="validDate()"> 
 
    <div class="form-group"> 
 
     <p>Date<span>*</span></p> 
 
     <input type="date" name="date" id="date" class="form-control input-sm " required /> 
 
    </div> 
 
    <div> 
 
     <p>Time <span>*</span></p> 
 
     <input type="time" value="now" name="time" id="time" class="form-control input-sm " required /> 
 
    </div> 
 
</body>

Źródło

2017-07-10 coder7777

W jaki sposób powinieneś to sprawdzić, jeśli wartość czasu może wynosić nawet dwa dni w przyszłości? Jeśli wprowadzę "00: 01", to jak powinieneś wiedzieć, czy mam na myśli północ, która dziś minęła, czy jutro północ? Twoja logika tutaj do sprawdzania poprawności jest wadliwa. –

Czy wiesz, że '$ (document) .ready (function() {});' and '$ (function() {});' to to samo? Więc w zasadzie robisz '$ (document) .ready (function() {$ (document) .ready (function() {});});'. Wiem, że to nie jest związane z twoim pytaniem, ale zauważyłem to w twoim kodzie, więc musiałem skomentować to :) – vi5ion

https://stackoverflow.com/questions/21499843/javascript-validate-date-input-soits -jeśli-albo-bieżący-albo-przyszły –

Tutaj podam proste rozwiązanie. Jeśli obie wartości są mniejsze od wartości bieżącej, ostrzeże użytkownika.

$(document).ready(function(){ 
      $("#time").on("focusout",function(e){ 
       var currentTime = new Date(); 
       var userTime = $("#time").val().split(":"); 
       if(currentTime.getHours() > parseInt(userTime[0])){ 
        alert("To old value"); 
        $(this).focus();     
       } 
       if(currentTime.getHours() <= parseInt(userTime[0])){ 
        if(currentTime.getMinutes() > parseInt(userTime[1])){ 
         alert("To old value"); 
        $(this).focus(); 
        } 
       } 
      }); 
     });

Źródło

2017-07-10 12:48:30

Można tworzyć niestandardowe AddDays() funkcję dostać dwa dni później i może hide() lub show() komunikat o błędzie według wybranej wartości daty. Możesz zaimplementować w następujący sposób.

function validDate(){ 
 
    var today = new Date().toISOString().split('T')[0]; 
 
    document.getElementsByName("date")[0].setAttribute('min', today); 
 
} 
 
$(function() { 
 
    $('input[type="time"][value="now"]').each(function() { 
 
    var d = new Date(), 
 
     h = d.getHours(), 
 
     m = d.getMinutes(); 
 
    if (h < 10) h = '0' + h; 
 
    if (m < 10) m = '0' + m; 
 
    $(this).attr({ 
 
     'value': h + ':' + m 
 
    }); 
 
    }); 
 
}); 
 

 
// Your custom day addition function 
 
function addDays (date, days) { 
 
    const result = new Date(date) 
 
    result.setDate(result.getDate() + days) 
 
    return result 
 
} 
 

 
$("#date").on("change",function(e){ 
 
    var val = new Date($(this).val()); // selected value 
 
    var current = new Date(); // current date 
 
    var futuredate = addDays(current,2) // two days later 
 

 
    if(val.getTime() <= futuredate.getTime()) 
 
    { 
 
     $("#error").hide(); 
 
    } 
 
    else 
 
    { 
 
     $("#error").show(); 
 
     $(this).val(null); // makes input default 
 
    }  
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body onload="validDate()"> 
 
    <div class="form-group"> 
 
     <p>Date<span>*</span></p> 
 
     <input type="date" name="date" id="date" class="form-control input-sm " required /> 
 
     <span id="error" style="display:none; color:red">Please select a date within two days</span> 
 
    </div> 
 
    <div> 
 
     <p>Time <span>*</span></p> 
 
     <input type="time" value="now" name="time" id="time" class="form-control input-sm " required /> 
 
    </div> 
 
</body>

Źródło

2017-07-10 12:42:33 hasan

Jak zaakceptować tylko przyszły lub aktualny czas w typie wejściowym = "czas"?

Odpowiedz

Powiązane problemy