jqueryconflictjquery-ui-datepicker

Conflict occuring in Jquery datepicker with other existing Jquery code


I am a beginner nearing completion of my project. I have added this datepicker from JqueryUI as my requirement is that only "Sunday" should be disabled and date should be restricted from tomorrow to next 10 days. I tried using other datepickers but none worked. Then I tried implementing it with a part of the code and figured out that when I commented this line

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

The datepicker worked just fine! but without the above line my page won't function properly. The rest of my date picker code is as follows.

 <link rel="stylesheet" href="css/jquery-dp.css" />
 <script src="js/jquery-dp-1.js"></script>
 <script src="js/jquery-dp-2.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 <script>
     $(function() {
         $( "#datepicker" ).datepicker({ minDate: +1, 
         dateFormat:"yy-mm-dd",
     maxDate: "+0M +10D",
     beforeShowDay: function(date) {
                 var day = date.getDay();
                 return [(day != 0), ''];
             }
 });
});
</script>

So now what should I do to make sure my page runs smoothly along with the datepicker. Thank you in advance.


Solution

  • Try using this in your JQuery script.

    $.noConflict();  //Not to conflict with other scripts
    jQuery(document).ready(function($) {
    
    $( "#datepicker" ).datepicker({ minDate: +1, 
                    dateFormat:"yy-mm-dd",
                    maxDate: "+0M +10D",
                    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 0), ''];
    }
    });
    
    });