Tu código es correcto. Solo pon el `<script>` justo antes del `</body>`: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <input type="datetime-local" id="fecha"> <p id="msg"></p> <script> $(document).ready(function(){ $("#fecha").focus(function(){ $('#msg').html(''); }); $("#fecha").blur(function(){ var hoy = new Date(); var fecha = $('#fecha').val(); var fechaFormulario = Date.parse(fecha); if (hoy <= fechaFormulario) { $('#msg').html("Fecha a partir de hoy"); } else { $('#msg').html("Fecha pasado"); } }); }); </script> </body> </html> <!-- end snippet --> Yo te recomendaría utilizar el evento `blur` en vez de `change`. De esta manera no te saltará el código antes de terminar de rellenar la fecha y la hora completamente.