1

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>
Improve this question

3 Answers 3

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Ok, that's very insightful, and I understand it a bit more now. But I still can't get it working. Are you saying I could put that one dateFormat code anywhere in the main on page load function?
If you put $( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" }); in that function alongside the $("#to")... and $("#from")... calls (or in place of them, if you're not using them), then it will apply your .datepicker() method to any HTML element that has a class of selector.
No it won't. Calling $("selector").datepicker({ optionsObject }); twice for the same control does not just add options onto a previously instantiated datepicker. I'm not sure what it does, but I believe it's a gray area and should be avoided. Once you call .datepicker({}) on a selector, you have initialized it and thereafter you should use .datepicker('methodFromDocumentation', 'paramForMethod') to change values.
@Bikonja There was no mention of calling .datepicker() twice on the same element. I think when the OP mentioned those two jQuery calls, they were just samples from the jQuery UI documentation page. I didn't want to assume though, so I instructed the OP to either add to, or replace, the existing calls.
But that said, it's a good point that if you had <div id="to" class="selector"/>, then having all three would cause unexpected results.
|
1

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
});
Improve this answer

Comments

1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.