how to disable previous date in html?

0
()

how to disable previous date in html – Using min attribute and Using minDate property Actually the logic behind this is bootstrap date picker or date time picker provides an option for start date.

how to disable previous date in html?

In this article, i will learn How to disable previous dates in the date picker using JQuery. In this example i will see how to disable the previous date selection in HTML date picker.

Free Live Chat for Any Issue

how to disable previous date in html input type date?

JS Code

$(function(){
    var currentDt = new Date();
    
    var month = currentDt.getMonth() + 1;
    var day = currentDt.getDate();
    var year = currentDt.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();
    
    var maxDate = year + '-' + month + '-' + day;
    alert(maxDate);
    $('#txtDate').attr('min', maxDate);
});

JQuery code : Using min attribute

<script language="javascript">
    var currentDt = new Date();
    var dd = String(currentDt.getDate()).padStart(2, '0');
    var mm = String(currentDt.getMonth() + 1).padStart(2, '0');
    var yyyy = currentDt.getFullYear();

    currentDt = yyyy + '-' + mm + '-' + dd;
    $('#set_bdate').attr('min',currentDt);
</script>

Full Source code

<html>
    <head>
    <title>How to disable previous dates in date picker using JQuery - Pakainfo.com</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="set_bdate" type="date">
    <script language="javascript">
        var currentDt = new Date();
        var dd = String(currentDt.getDate()).padStart(2, '0');
        var mm = String(currentDt.getMonth() + 1).padStart(2, '0');
        var yyyy = currentDt.getFullYear();

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

Don’t Miss : How To Disable Previous Date In Bootstrap Datepicker?

Read Also:  calculate age from date of birth - How to Calculate Age from Date of Birth in PHP?

Using minDate property

<script language="javascript">
    $(document).ready(function () {
        $("#set_bdate").datepicker({
            minDate: 0
        });
    });
</script>

example

<html>
    <head>
    <title>How to disable previous dates in date picker using JQuery - www.pakainfo.com</title>
    <link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
    type="text/css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
    <h2>How to disable previous dates in date picker using JQuery</h2>
    Date : <input id="set_bdate" type="text">
    <script language="javascript">
        $(document).ready(function () {
            $("#set_bdate").datepicker({
                minDate: 0
            });
        });
    </script>
</body>
</html>

Download

I hope you get an idea about how to disable previous date in html.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  add months to date - How to Add Months to Date in PHP?

How useful was this post?

Click on a star to rate it!