Open In App

How to set year in DatePicker ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.



Last Updated : 27 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads