CODEWITHSUNDEEP
javascriptjquery
ace
ace

Reputation: 148

Datepicker for birthday textfield

I created a datepicker on my form that has Birthday label on it and textbox, Now my problem is, Is there a way to prevent the user pick the current date today, for example the user can't choose today's date, tommorow or yesterday as his birthday. hope you can help me, Thanks :)

here is my sample code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>

<div class="md-form">
 <input type="text" id="datepicker1" class="form-control " placeholder="Birthday" style="margin-top:-30px" name="date1" required>

</div>

here is my sample javascript:

<script>
$('#datepicker1').datepicker({
   showOtherMonths: true
    });
</script>

i know this is not enough script, im beginner at javascript and jquery but hope you can help me.Im using Bootstrap jQuery DatePicker material design

Upvotes: 4

Views: 2802

Answers (3)

Tyler Roper
Tyler Roper

Reputation: 21672

The jQuery datepicker has a maxDate option that you can set.

If you pass it a number, that will set the maximum date to that number of days from today.

Can't choose today, nor any dates after:

$('#datepicker1').datepicker({
    showOtherMonths: true,
    maxDate: -1   //The maximum date is 1 day ago
});

Can't choose yesterday, nor any dates after:

$('#datepicker1').datepicker({
    showOtherMonths: true,
    maxDate: -2   //The maximum date is 2 days ago
});

Can't choose any dates within the past year, nor any dates after:

$('#datepicker1').datepicker({
    showOtherMonths: true,
    maxDate: '-1y' //The maximum date is 1 year ago
});

Upvotes: 3

Garry
Garry

Reputation: 342

Use this in your javascript

$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
});

use startDate to change values according to your need and here -3 means 3 days before and 'd' basically represents day

startDate: '-3d'

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

You can use maxDate for this purpose like:

maxDate: '-2d'  // here d is the no of days ago, you can pass any no of days that you want to restrict

Ex:

$(function() {
    $( "#datepicker" ).datepicker({
        dateFormat: "dd/mm/yy",
        maxDate: '-2d'
    });
});

Working Fiddle

Upvotes: 1

Related Questions