datepicker jquery code example

Example 1: jquery datepicker

$( "#datepicker" ).datepicker();

Example 2: datepicker using jquery

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

Example 3: datetimepicker jquery

############### JS ##############  
1. npm i jquery-datetimepicker

2. Include inside js file

import "jquery-datetimepicker";

$('#datetimepicker').datetimepicker();

############## CSS ###################

3. Include inside css/scss file

@import "jquery-datetimepicker/build/jquery.datetimepicker.min.css";

Example 4: jquery datepicker

<!doctype html>
<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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
 
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

Example 5: download datepicker js

$('#datepicker').datepicker('show');

Example 6: date picker

Some date pickers allow you to type. In this case we can 
just use sendKeys method to enter the date we want.

If that does not work, we need to write our logic 
for this using java and selenium. 
1. Click on the field to trigger the date picker
2. Get the displayed date on the date picker and calculate
how many times you need to click left/right
to go to the right month/year. 
3. Once we go to the correct month/year, select the date.

Tags:

Misc Example

Recent Posts