jQuery date picker is not working properly in ASP.Net MVC4

Question

I need to implement jQuery date picker in my project. This is my script:

<script type="text/javascript">
    $(document).ready(function () {
        $("#datepicker").datepicker();
    });
</script>

I added these links in my HTML:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/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.2/jquery-ui.js"></script>

<label style="padding-left: 5px;">Date</label><input type="text" id="datepicker" />

But I can't get the dropdown window to show with that code. How can I solve this problem? When I looked into the view source of the page, there are some extra jquery scripts for the function like:

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/themes/base/jquery-ui-1.9.2.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/jtable/themes/standard/jtable_empty.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/application.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.9.2.js" type="text/javascript"></script>
    <script src="/Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <link href="/Scripts/jtable/themes/standard/jtable_empty.css" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/base/jquery-ui-1.9.2.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-2.2.0.js" type="text/javascript"></script>
    <script src="/Scripts/advancedSearch/AdvancedSearch.js" type="text/javascript"></script>
    <script src="/Scripts/advancedSearch/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="/Scripts/advancedSearch/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link href="/Scripts/advancedSearch/validationEngine.jquery.css" rel="stylesheet" type="text/css" />

ok the problem might be that other jQuery and this one are conflicting with each other you can check by commenting the other jQueries and running this one only for a while — NetStarter, Mar 25 '13 at 09:50
i created a link it is working fine see here http://jsfiddle.net/Vq7LP/1/ — PSR, Mar 25 '13 at 10:37
@NetStarter- You are right.Its the problem of conflicting. In the layout page I used @Scripts.Render("~/bundles/jquery").By deleting this its worked properly — Nithin Viswanathan, Mar 25 '13 at 10:40
@PSR there is not a problem with the jquery code the problem is with so many jQueries getting called at a time and getting conflicted — NetStarter, Mar 25 '13 at 10:40

score 2 · Accepted Answer · answered Mar 25 '13 at 10:42

2

Try to use noConflict() to avoid the conflicts.

Example:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

see here

answered Mar 25 '13 at 10:42

PSR

39,804
41
111
151

@Nithu ok tell me if i know the answer i will tell you the answer – PSR Mar 25 '13 at 11:39
@Nithu hi nithu can u tell me another one – PSR Mar 25 '13 at 11:42
@PSR-How can I set the width of the calender? – Nithin Viswanathan Mar 25 '13 at 11:45
I saw this link..But only the border is changed – Nithin Viswanathan Mar 25 '13 at 11:49
@Nithu sorry nithu i also dont have that much knowledge on this – PSR Mar 25 '13 at 11:49
@PSR-check this link http://stackoverflow.com/questions/15658841/how-to-enable-onpaste-only-for-alphabetic-letters – Nithin Viswanathan Mar 27 '13 at 12:47

score 1 · Answer 2 · answered Mar 25 '13 at 10:44

1

you can do following

Call your jQuery related script first

<script type="text/jscript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/jscript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

then

var jQueryVariable = jQuery.noConflict(true);

now use the jQueryVariable to call wherever you want to call the jQuery for date picker

answered Mar 25 '13 at 10:44

NetStarter

3,189
7
37
48

1

@NetStarter-check this http://stackoverflow.com/questions/15658841/how-to-enable-onpaste-only-for-alphabetic-letters – Nithin Viswanathan Mar 27 '13 at 12:47

jQuery date picker is not working properly in ASP.Net MVC4

2 Answers2