How to create a date range in jquery UI datepicker without calling datepicker again inside the main datepicker function?

Question

I have a weird problem with jquery UI datepicker when choosing range. Before the question, I am working on code written by lots of other people. They have included jquery Tools and UI in optimized order so all the functions work. All except jquery UI. The reason I mentioned is, I cant update the versions or switch around the order of the libraries because it breaks all the other codes :( (But I did make sure jquery, js, jquery UI is not included twice anywhere)

That said, the problem is this - I want to have two dates where the 'to' date should be later than the 'from' date. This should be easy with the following code from jquery site:

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

The issue is the code breaks when I choose the date at the lines where I have commented as 'BREAKS!'. It is simply not detecting the 2nd datepicker inside the main datepicker function and giving me error - SCRIPT438: Object doesn't support property or method 'datepicker'

So I read the following post and decided to do stuff the following way. This works but obviously I dont have the range functionality now.

$(document).ready(function(){

$('#from').datepicker({
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            showButtonPanel: true,
    onSelect: function(dateText, inst) { 
    $('[name=wmFrom]').val(dateText); //need this part for the search filters
    }

});
 $('#to').datepicker({
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            showButtonPanel: true,
    onSelect: function(dateText, inst){ 
    $('[name=wmTo]').val(dateText); //need this part for the search filters
    }       
});
});

Ok now, I am still learning js and jquery. Can any one help me implement a range functionality for this without calling/initializing datepicker inside datepicker. I know this problem probably means there is probably some issue with versions or compatibility of the libraries. But like I said I am really cant get rid of them or change much in this. Any idea/help will be very much appreciated..

MORE INFO-

This is frustrating because someone who worked before me have done things this way and any change I make break different functions. This is an internal application so cant give a link :(.

This is what I am talking about - First there is a header php which is included in the top of the problem file I am working on. This header has the link to jquery library. After including the header.php there are links to queryLoader.js, jquery.easing.1.3.js. Then There is a bunch of code which has scripts and the body html (this is where the html inputs associated with the datepicker are). Then they link /full/jquery.tools.min.js , jquery.effects.core.js, jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.datepicker, query.ui.tooltip.js , jquery-ui.css. After this, there are more scripts which use functions like $.tools.validator.fn and serializeObject().

If I assume its loading jquery lib twice and change the /full/jquery.tools.min.js to /tiny/jquery.tools.min.js or /all/jquery.tools.min.js I get the following error: Object doesn't support this property or method on lines with functions such as serializeObject(). I get this when the page loads itself.

If I add the /jquery.tools.min.js after all the UI class links, I get: Object doesn't support property or method 'datepicker' at the point of datepicker initialization on the input. I get this when the page loads itself.

Who should I do :(

score 1 · Answer 1 · answered Mar 01 '17 at 10:09

I try to help you after 4+ years :)

$(document).ready(function(){
  //datapickerer creation... $('#to').datepicker({...

  $("#to").on( "change", function() { 
            $("#from").datepicker("option", "maxDate", getDate( this ));
  });
  $("#from").on( "change", function() { 
            $("#to").datepicker("option", "minDate", getDate( this ));
  });
});

score 0 · Answer 2 · answered Dec 23 '12 at 14:27

0

A common headache with jQuery tools is they have versions that include full jQuery.js in their plugin file. This can cause problems if jQuery tools gets loaded after other plugins. It is a terrible practice for a plugin to include full jQuery library in their file... but the jQuery tools team thinks it's great. Check the version you are using as a start.

Essentially the problem can boil down to user not realizing jQuery is being loaded twice. Loading jQuery on top of another versio that already has plugins registered will wipe out those plugins.

Use a browser console to check for errors thrown to help you troubleshoot

answered Dec 23 '12 at 14:27

charlietfl

170,828
13
121
150

I did make sure the jquery lib is not included twice... Also got the error 'SCRIPT438: Object doesn't support property or method 'datepicker'' through the console... Any other ideas? – pinklotus Dec 24 '12 at 07:42
did you look inside the jQuery tools file? Does it have jQuery itself included in credits and code? Post a link to live page if possible. Sounds like 2 versions loading , or wrong script order – charlietfl Dec 24 '12 at 08:11
Please look at my question and read the part under MORE INFO. – pinklotus Dec 24 '12 at 10:38

How to create a date range in jquery UI datepicker without calling datepicker again inside the main datepicker function?

2 Answers2