minDate() and maxDate() property of jquery datepicker plugin not working

Question

I have tried so many means I've seen on how to use the minDate() and maxDate() property of jquery datepicker plugin to restrict a user from picking a range of date values but none ever worked. Even the sample code that was working on the jQuery UI plugin official page on how to do it, I tried it but it didn't work. Please need assistance on how to achieve this if there is another plugin to link before it works or...

$(document).ready(function () {
    $("#enrolldateprim").datepicker({
        minDate: new Date(2009, 10 - 1, 25),
        maxDate: "now",
        buttonText: "Select date",
        dateFormat: 'yy-mm-dd'
    });
})

I will appreciate any help. Thanks a lot. Wisdom

please provide a fiddle or runnable code so that we can fix the issue.. :-) — Ritwika Das, May 12 '17 at 09:11
also add a link to the datepicker page you are using, there are hundreds of `jquery datepicker plugins` — john Smith, May 12 '17 at 09:21
Possible duplicate of [jQuery DatePicker Min Max dates](http://stackoverflow.com/questions/14646008/jquery-datepicker-min-max-dates) — John, May 12 '17 at 09:45

39ecneret · Answer 1 · 2017-08-17T08:33:29.763

If you are using the jquery-ui datepicker widget, then take a look at the code below.

By the way, buttonText should be used in conjunction with the showOn option set to "button" or "both", so I add the showOn option.

$(function(){
    $( "#datepicker" ).datepicker({
          minDate: new Date(2016, 10 - 1, 25), 
          maxDate: "now",
          buttonText: "Select date",
          dateFormat : 'yy-mm-dd',
          showOn: "both"
    });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

</body>

score 0 · Answer 2 · answered May 12 '17 at 09:42

Check example below:

$(document).ready(function () {
    $("#enrolldateprim").datepicker({
        minDate: new Date(2017, 5-1 , 5), // months count starts from 0
        maxDate: "now",
        buttonText: "Select date",
        dateFormat: 'yy-mm-dd',
        showOn: "both"
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<input id="enrolldateprim">

You can find library sources in a code snippet.

Morganis · Answer 3 · 2017-05-12T10:08:57.977

You can download the dependencies from: http://jqueryui.com/download/ And JQuery itself from: https://jquery.com/download/

Just go to the first link and scroll down until you see download button. Select your preferred theme and press download. Unzip the zip file and look (within my code) at the links (href) and the scripts (src) to see what to include to make it work.

Of course you don't need to include the styling (CSS) but it comes with the zip file if you wish to use it.

The Code:

<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="jquery-ui-1.12.1.custom/jquery-ui.css"> 
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.structure.css">
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.css">
    <script src="jquery-3.1.1.js"></script>
    <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
    <script>
      $( function() {
        $("#datepicker").datepicker(
            {
                minDate: new Date(2009, 10 - 1, 25),
                maxDate: "now",
                buttonText: "Select date",
                dateFormat: 'yy-mm-dd',
                showOn: "both"
            });
      } );
    </script>
</head>
<body>
    <h3>My DateTimePicker</h3>
    <p>Pick date:
        <input type="text" id="datepicker">
    </p>
</body>
</html>

PS:

$(function() {
  // Handler for .ready() called. (This is shorter)
});

Does the same as:

$( document ).ready(function() {   
  // Handler for .ready() called. (This is longer)
});

minDate() and maxDate() property of jquery datepicker plugin not working

3 Answers3