Jquery UI Datepicker

Date Published: 08/05/2020Published By: JaiSchool

The datepicker() is a widget/method in Jquery UI. It displays a customized calendar to choose a date from. There are a lot of options, you can use to customize the calendar like changing the date format, disable previous dates from a particular date, etc.

The HTML documentation for date picker is simple, you just have to create an input field having type="text". And an id or class value to select and apply the datepicker() method in Jquery UI.

Example-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Datepicker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#date::placeholder{
  text-align:center;
  font-size:16px;
}
</style>
</head>
<body>

  <input type="text" placeholder="mm/dd/yy" id="date" />


<script>
  $(document).ready(function(){
    $("#date").datepicker();
  });

</script>
</body>
</html>

You can use the #date::placeholder selector to apply CSS properties in the input's placeholder like the text size, padding, etc.

Options of datapicker() method

PropertyValue
dateFormatdd/mm/yy
dd mm yy
dd-mm-yy
d/m/y
"DD, dd MM yy" (Saturday, 15 February 2020)
minDatenew Date(yy/mm/dd) or
Index number from the current date
maxDatenew Date(yy/mm/dd) or
Index number from the current date
altFieldSelect alternative input field
altFormatalternative field date format

dateFormat Option

This options lets you set format of the date. You can define dateFormat option's value like-

  • dd/mm/yy (output- 07/05/2020) Or dd mm yy (output- 07 05 2020) Or dd-mm-yy (output- 07-05-2020), etc.
  • d/m/y (Output- 7/5/20)
  • DD, dd MM yy (Output- Thursday, 07 May 2020)

DD is for the day. For example - Sunday, Thursday, etc.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Datepicker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#date::placeholder{
  text-align:center;
  font-size:16px;
}
</style>
</head>
<body>

  <input type="text" placeholder="mm/dd/yy" id="date" />

<script>
  $(document).ready(function(){
    $("#date").datepicker({
      dateFormat:"DD, dd MM yy",
    });
  });

</script>
</body>
</html>

minDate Option

This property is used to disables the dates before from current date.

Use positive numeric value to disable upcoming dates and negative numeric value for past dates.

  • minDate:0 (disables the dates before)
  • minDate:2 (disables upcoming two after the current date and all past dates).
  • minDate:-2 (You can also select two dates before from the current date.)
<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Datepicker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#date::placeholder{
  text-align:center;
  font-size:16px;
}
</style>
</head>
<body>

  <input type="text" placeholder="mm/dd/yy" id="date" />


<script>
  $(document).ready(function(){
    $("#date").datepicker({
      dateFormat:"DD, dd MM yy",
      minDate:2,
    });
  });

</script>
</body>
</html>

Or You can use new Date() method for custom dates. Define yy/mm/dd format as a string in its argument. Leave it blank to return the current date.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Datepicker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#date::placeholder{
  text-align:center;
  font-size:16px;
}
</style>
</head>
<body>

  <input type="text" placeholder="mm/dd/yy" id="date" />


<script>
  $(document).ready(function(){
    $("#date").datepicker({
      dateFormat:"DD, dd MM yy",
      minDate:new Date("2020/02/15"),
    });
  });

</script>
</body>
</html>

maxDate Option

Disable dates after, defined in the maxDate option

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Datepicker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#date::placeholder{
  text-align:center;
  font-size:16px;
}
</style>
</head>
<body>

  <input type="text" placeholder="mm/dd/yy" id="date" />


<script>
  $(document).ready(function(){
    $("#date").datepicker({
      dateFormat:"DD, dd MM yy",
      minDate:new Date("2020/02/15"),
      maxDate:new Date("2020/02/20"),
    });
  });

</script>
</body>
</html>

altField Option

By using altField option, you can display selected dates from the calendar in another input field. Make another input field's id value as altField value.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Datepicker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#date::placeholder{
  text-align:center;
  font-size:16px;
}
</style>
</head>
<body>

  <input type="text" placeholder="mm/dd/yy" id="date" />

  <input type="text" class="another-field">


<script>
  $(document).ready(function(){
    $("#date").datepicker({
      dateFormat:"DD, dd MM yy",
      altField:".another-field",
    });
  });

</script>
</body>
</html>

altFormat Option

Defines the date format to the alternative input field. Use this if you have used altField option.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Datepicker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#date::placeholder{
  text-align:center;
  font-size:16px;
}
</style>
</head>
<body>

  <input type="text" placeholder="mm/dd/yy" id="date" />

  <input type="text" class="another-field">


<script>
  $(document).ready(function(){
    $("#date").datepicker({
      dateFormat:"DD, dd MM yy",
      altField:".another-field",
      altFormat:"dd/mm/yy",
    });
  });

</script>
</body>
</html>

Publish A Comment

Leave a Reply

Your email address will not be published.