w3resource

jQuery UI: Pick a date from the datepicker and update the date in another textbox

jQuery UI Fundamental - I : Exercise-20

Initialize the datepicker. Now pick a date from the datepicker into a textbox and update the date (different format) in another textbox.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
 <title>Initialize the datepicker. Now pick a date from the datepicker into a  textbox and update the date in another textbox.</title>
</head>
<body>
<p>Pick a date:</p>   
<p><input type="text" id="datepicker1" /></p> 
<p>Updated Date (yyyy-mm-dd format):</p>  
<p><input type="text" id="datepicker2" /></p>   
</body>
</html>

JavaScript Code :

$( "#datepicker1" ).datepicker({
      altFormat: "yy-mm-dd",
      altField: "#datepicker2"
});

See the Pen jquery-ui-fundamental-exercise-20 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Create a simple jQuery UI Datepicker. Now pick a date and store it in a textbox.
Next: Create a simple jQuery UI Datepicker. Show the required date format after the date field.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.