Home » Jquery » jquery – time and date validation in javascript-Exceptionshub

jquery – time and date validation in javascript-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have two inputs in boostrap and I require the user to select a date in the first input and validate it.

If the date selected is the current date then the second input (which is a clock in jquery) will show the current hour +1. But if the date selected is different front the current one then the clock will display the time normally.

I have had a lot of trouble trying to do is so if you can help me or give me some advice I’d appreciate it, thanks.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="timepicker/jquery.timepicker.min.css">
    <script src="timepicker/jquery.timepicker.min.js"></script>
    <script src="moment.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#hora').timepicker({});
        });
    </script>
</head>
<body>
    <div class="container">
        <form action="">
            <div class="row">
                <div class="col-sm">
                    <label class="bmd-label-floating">Date</label>
                    <input id="fecha" type="date" name="fecha" class="form- 
                      control" required onchange="validacion()">
                    <script>
                        function validacion() {
                            var fechaActual = moment().format("YYYY MM DD");
                            var fechaSeleccionada =
                                document.getElementById('fecha').value;
                            var diferencia =
                                fechaActual.diff(fechaSeleccionada);
                            console.log(fechaActual);
                            console.log(fechaSeleccionada);
                            console.log(diferencia);
                        }
                    </script>
                </div>
                <div id="recargar" class="col-sm">
                    <label>Time</label>
                    <input class="form-control" type="text" id="hora"
                           required>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

example

How to&Answer:

I have done a workaround for you to achieve what you have said

<input type="text" value="Enter date!" id="dte" class="datepicker">
<br/>
<br/>
<input type="text" id="time" value=" time!" >
$(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
$("input.datepicker").on("keyup change", function(){
var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()).getTime();

var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + '-' +
    ((''+month).length<2 ? '0' : '') + month + '-' +
    ((''+day).length<2 ? '0' : '') + day;

var selected = $("#dte").val();      
if(selected==output)
{
var today = new Date();
today.setHours(today.getHours()+1);
var dt = new Date();
var time = dt.getHours() +1;
var ee=time+":"+ dt.getMinutes() + ":" + dt.getSeconds();
$("#time").val(ee);
}
else
{
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
$("#time").val(time);
}      
});

Here is a working fiddle:https://jsfiddle.net/athulmathew/06y8w72x/35/

Note: This is just a workaround you should use it as per your needs!