CODEWITHSUNDEEP
javascriptjquery
eshellborn
eshellborn

Reputation: 11261

Jquery UI Datepicker how to

I'm sort of in the process of learning javascript, and I've got a fair handle on it so far. Anyways, I built a page that has a date entry field, and I need a little calendar to pop up to choose dates from. The jquery UI datepicker (http://jqueryui.com/datepicker) looks really good, the only problem is that I know nothing about jquery. I can copy and paste the code in, but beyond that, I don't know very much. I need the calendar to choose a range of dates (like at http://jqueryui.com/datepicker/#date-range). I can use the source code there to put that in, but the problem is that I also need it to be in ISO 8601 format (like yyyy-mm-dd). The website says that to do that I use the following code: 

$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });

Ok, great, where do I put that? This is the source code from the website, where would I put it in there? 

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>
<body>

<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />


</body>
</html>

Upvotes: 1

Views: 1081

Answers (3)

Bikonja
Bikonja

Reputation: 899

In Javascript you will often encounter syntax like this - initializing a control with an anonymous object (represtented by the outermost curly braces in the following part).

$( "#from" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#to" ).datepicker( "option", "minDate", selectedDate );
  }
});

Within the anonymous object (curly braces), you can add whatever property you like, but you'll want to check the documentation for which properties the specific control reads. In this case, defaultDate, changeMonth, numberOfMonths and onClose are properties. You would want to add another one, called dateFormat as you've already discovered. The syntax of anonymous objects is

{
    property1Name: 'property string value',
    property2Name: 5, // int value
    property3Name: 'third value'
}

so you just have to add a comma and the dateFormat from the first example you posted to your intialization objects for your datepickers.

Upvotes: 1

Thomas Kelley
Thomas Kelley

Reputation: 10302

This part:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

...tells the browser to load the jQuery and jQuery UI libraries before even starting to load/render the page contents.

This:

<script>
$(function() {

});
</script>

...is a jQuery function that executes once the page is done loading.

This:

$( "#from" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#to" ).datepicker( "option", "minDate", selectedDate );
  }
});

and this:

$( "#to" ).datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  numberOfMonths: 3,
  onClose: function( selectedDate ) {
    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
  }
});

are jQuery calls that are part of that "on page load" function I mentioned above. They effectively run the .datepicker() method twice -- once on elements with an ID of "from", and once on elements with an ID of "to" (with slightly different options).

So if you need to have something happen on the page load, you'll need to put that call (the one you mentioned in your post) into the "on load" function as well.

Upvotes: 2

Jon
Jon

Reputation: 1234

Start by reading the jQuery documentation and specifically, the document ready documentation. The most basic aspect of jQuery is that you cannot safely manipulate the DOM until it is ready. To start, try:

$(document).ready(function () {
     // your datepicker code
});

Upvotes: 1

Related Questions