Tu código es correcto. Solo pon el <script>
justo antes del </body>
.:
<!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">
<script>
$(document).ready(function(){
$("#fecha").change(function(){
var hoy= new Date();
var fecha=$('#fecha').val();
var fechaFormulario=Date.parse(fecha);
if (hoy <= fechaFormulario) {
alert("Fecha a partir de hoy");
} else {
alert("Fecha pasado");
}
});
});
</script>
</body>
</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>
Y yoYo te recomendaría controlarutilizar 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.
Aquí tienes el código funcional: https://codepen.io/anon/pen/dQddja