Conflict occuring in Jquery datepicker with other existing Jquery code

Question

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.

A tip and a possible solution: try to put the <script> tags before the </body> tag and the stylesheets inside the <head> tag . Also, make sure that jQuery is being loaded first before it loads the DatePicker by putting it above the datepicker.js script tag. — AJ Naidas
– AJ Naidas, Commented Apr 26, 2013 at 10:33

iCode · Accepted Answer · 2013-04-26 10:36:45Z

6

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), ''];
}
});

});

answered Apr 26, 2013 at 10:36

iCode

9,28222 gold badges62 silver badges95 bronze badges

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

2 Comments

Ndroid21 Over a year ago

It is executing without a conflict, but can you provide explanation?

mountriv99 Over a year ago

noConflict is a jQuery function api.jquery.com/jquery.noconflict, your datepicker is possibly conflicting with another datepicker, perhaps bootstrap?

AshokSolanki · Accepted Answer · 2023-12-07 18:58:25Z

1

Just arrange both the files in proper sequence and my problem is solved.

1 ) jquery-ui.min.js 2 ) bootstrap-datepicker/bootstrap-datepicker.js

edited Dec 7, 2023 at 18:58

answered Dec 7, 2023 at 18:58

AshokSolanki

92 bronze badges

1 Comment

Lajos Arpad Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Conflict occuring in Jquery datepicker with other existing Jquery code

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related