Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to use date picker in jquery?

Date picker

File name : index.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

How to disable previous dates in the date picker using JQuery

File name :

<html>
<head>
<title>How to disable previous dates in date picker using JQuery - ittutorial.in</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<h1>How to disable previous dates in date picker using JQuery</h1>
Date : <input id="date_picker" type="date">
<script language="javascript">
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();

today = yyyy + '-' + mm + '-' + dd;
$('#date_picker').attr('min',today);
</script>
</body>
</html>

DEMO :-

File name : index.php

How to disable previous dates in date picker using JQuery - ittutorial.in

How to disable previous dates in date picker using JQuery

Date :

Previous date disable :-

File name : index.php

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#dob").datepicker({
minDate: 0
});
});
</script>

<input type="text" id="dob" name="dob" />

Previous date disable :-

File name : index.php


Custom Datepicker

<input type="text" class="form-control datepicker" name="dob" id="dob" value="<?php echo set_value('dob'); ?>" autocomplete="off" style="background-color: #fff;" required readonly />

<script>
$(document).ready(function () {
$(".datepicker").attr("placeholder", "dd-mm-yyyy");
$('.datepicker').datepicker({
onSelect:function (){ ageCalculate(); },
/*autoclose: true,*/
todayHighlight: true,
changeMonth:true,
changeYear:true,
yearRange:'-51:c+nn',
dateFormat: 'dd-mm-yy'
});


});
</script>
<script>
function ageCalculate() {
var user_input = document.getElementById("dob").value;
var userinput = user_input.split("-").reverse().join("-");

//var userinput = "1984-01-01";


var dob = new Date(userinput);
var yyyy = dob.getFullYear();
if(userinput==null || userinput=='') {
document.getElementById("lblError").innerHTML = "Please Select Date of Birth!";
return false;
} else {
// var todate = new Date();
//var todate = new Date('2023/05/12');
var todate = new Date('2023-05-12');

// calculate month difference from current date in time
// var month_diff = Date.now() - dob.getTime();
var month_diff = todate - dob.getTime();
//convert the calculated difference in date format
var age_dt = new Date(month_diff);
// var month = d.getUTCMonth() + 1; // Since getUTCMonth() returns month from 0-11 not 1-12
var month = age_dt.getUTCMonth();
var day = age_dt.getUTCDate(); // +1 means current date included
//extract year from date
var year = age_dt.getUTCFullYear();
//now calculate the age of the user
var age = Math.abs(year - 1970);
lblError.innerHTML = "Date Of Birth is Not Eligible.";

if( ((yyyy % 4 != 0) && (yyyy % 100 == 0)) || (yyyy % 400 != 0) )
{
var day = age_dt.getUTCDate()-1;

if(age >=50 && day > 0)
{
var nullstr = "";
$("#dob").val(nullstr);
document.getElementById("dobtext").value = age+ " Y " +month+ " M " +day+ " D";
document.getElementById("dob").focus();
return false;
}


if(age <= 20 && (month <= 11 && day <=30))
{
var nullstr = "";
$("#dob").val(nullstr);
document.getElementById("dobtext").value = age+ " Y " +month+ " M " +day+ " D";
document.getElementById("dob").focus();
return false;
}
}



lblError.innerHTML = "";
// document.getElementById("dobtext").innerHTML = "Age : " + age + " years. ";
// return document.getElementById("dobtext").value = "Y : " +age +","+ " M : "+month +","+ " D : "+day;
// ((yyyy % 4 == 0) && (yyyy % 100 != 0)) || (yyyy % 400 == 0);


if( ((yyyy % 4 == 0) && (yyyy % 100 != 0)) || (yyyy % 400 == 0) )
{


if(month == 11 && (day == 31))
{
age = age+1;
month = 0;
day = 0;
return document.getElementById("dobtext").value = age+ " Y";
}
else if(month >= 0 && (day >= 1)){
return document.getElementById("dobtext").value = age+ " Y " +month+ " M " +day+ " D";
}
else{
return document.getElementById("dobtext").value = age+ " Y " +month+ " M " +day+ " D";
}
}
else{
var day = age_dt.getUTCDate()-1;
if(month == 0 && (day == 0))
{
return document.getElementById("dobtext").value = age+ " Y";
}
else{
return document.getElementById("dobtext").value = age+ " Y " +month+ " M " +day+ " D";
}




}


/* if(((yyyy % 4 == 0) && (yyyy % 100 != 0)) || (yyyy % 400 == 0))
{
dobage = new Date(dob);
var todate = new Date('2023-05-12');
var age123 = Math.floor((todate-dobage) / (366.25 * 24 * 60 * 60 * 1000));
$('#dobtext').val(age123+' Y');

}
else{
dobage = new Date(dob);
var todate = new Date('2023-05-12');
var age123 = Math.floor((todate-dobage) / (365.25 * 24 * 60 * 60 * 1000));
$('#dobtext').val(age123+' Y');

}*/

}
}
</script>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link