Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to set year in DatePicker ?

  • Last Updated : 27 Oct, 2021

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
Recommended Articles
Page :

Start Your Coding Journey Now!