Skip to content
Related Articles

Related Articles

How to set year in DatePicker ?

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 27 Oct, 2021
Improve Article
Save Article

In this article, we are going to learn about the Datepicker in jQuery. In many forms, you can select the date and year from the calendar. Datepicker is a standard form of the input field that is used to select the date and year by just seeing the calendar. It is an interactive calendar in a specified overlay. 

When you click on any date that is mentioned in the calendar then the feedback will appear on the input text. 

Methods Used – The datepicker() method is used to create an overlay of an interactive calendar.

Approach – 

  • First, you need to create an HTML file and import the jQuery library.
  • After that, you have to write code in the script tag with the datepicker method.
  • The main task is done and it is up to you whether you want to apply CSS to your application or not.

 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <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>
  
    <style>
        body {
            background-color: lightgreen;
            text-align: center;
        }
  
        div {
            background-color: lightgreen;
            margin-left: 85px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
    <div id="datepicker"></div>
  
    <script>
        $("#datepicker").datepicker();
    </script>
</body>
  
</html>

Output:

Explanation: In the above example, we have seen how to create a calendar with just a few lines of code. If you want to select the year then you just have to click on the next arrow button in the calendar.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!