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


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.

    <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>
        $(document).ready(function () {
    <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()">
                        function validacion() {
                            var fechaActual = moment().format("YYYY MM DD");
                            var fechaSeleccionada =
                            var diferencia =
                <div id="recargar" class="col-sm">
                    <input class="form-control" type="text" id="hora"


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">
<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();      
var today = new Date();
var dt = new Date();
var time = dt.getHours() +1;
var ee=time+":"+ dt.getMinutes() + ":" + dt.getSeconds();
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

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!