CODEWITHSUNDEEP
javascriptjquerydatepickerjquery-ui-datepickerbootstrap-datepicker
Nazeer Basha Shaik
Nazeer Basha Shaik

Reputation: 23

Bootstrap datepicker date range and default date

I am working with bootstrap datepicker and the requirement is like when the user clicks on the test box we need to display the date picker with the default date it must be point 1/1/1980. minDate and maxDate must be like 01/01/1900 and current date. can you tell me what went wrong in my code

<html>
<head>
    <script src="/MVCPractice/javascript/jquery-3.1.0.min.js"></script>
    <script src="/MVCPractice/javascript/bootstrap.min.js"></script>
    <script src="/MVCPractice/javascript/bootstrap-datepicker.js"></script>
    <link href="/MVCPractice/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/MVCPractice/css/datepicker.css" rel="stylesheet" />
    </head>
    <body>
             <h2>DatePicker</h2>
             <label for="txtDob"></label>
             <input type="text" id="txtDob" />

    </body>
    <script>
        $(document).ready(function () {
            $('#txtDob').datepicker(
                {
                    startDate: new Date(1990, 1, 1),
                    endDate: getDate(),
                    defaultDate: new Date(1980,1,1),
                }
                );
        });
    </script>
</html>

Upvotes: 2

Views: 3071

Answers (2)

ThinhLe
ThinhLe

Reputation: 409

Here you are.

$('#txtDob').datepicker({
    startDate: new Date(1990, 01, 01),
    endDate: new Date(),
    setDate: new Date(1980, 01, 01),
    autoclose: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.de.min.js"></script>

<form action="#" method="post">
  <h2>DatePicker</h2>
  <label for="txtDob"></label>
  <input type="text" id="txtDob" />
</form>

Upvotes: 0

user6815795
user6815795

Reputation:

new Date() creates new date object with date and time. You have to use startDate:'1990-01-01' and same for enddate

Upvotes: 0

Related Questions