CODEWITHSUNDEEP
jqueryasp.net.netasp.net-mvc-3datepicker
Teambit
Teambit

Reputation: 325

Datepicker does not insert a date

I've run into a tricky problem it seems. I've got two input text fields that i've turned into datepickers. However when i pick a date the date does not transfer into the textfield. The calendar shows perfectly.

The project is in MVC 3 and has been programmed by some former employees. I've been looking through the code for the last couple of days now, and i've tried to change the version of jQuery. The project is running v. 1.5.1 by default. I've tried v. 1.6.4 v. 1.7.2 and v. 1.10.1, version 1.7.2 seems to be the latest valid version as the rest of the project also depend on jQuery. Later version seems to be creating some incompatibility.

Seems i've run into a wall here, and i'm hoping some of you out there can shine a little light for me.

Code defining the elements in my view:

<div style="margin-top: 10px">
    <label><input id="enable-Periode" type="checkbox" @(Model.StartDate.HasValue || Model.EndDate.HasValue ? "checked=checked" : "") onclick="archiveMetaDataPlacement.enabledPeriod(this);" />Benyt periode</label>

    <div style="margin: 10px 0 20px 0">
        <label>Periode <input type="text" size="11" id="StartDate" name="StartDate" class="datepicker" value="@(Model.StartDate.HasValue ? Model.StartDate.Value.ToShortDateString() :  "")" /></label> - 
        <label>Periode <input type="text" size="11" id="EndDate" name="EndDate" class="datepicker" value="@(Model.EndDate.HasValue ? Model.EndDate.Value.ToShortDateString() : "")" /></label>
    </div>
...
<script>
    $(".datepicker").datepicker();
</script>

The jQuery scripts is importet in the coherent "masterlayout":

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Core.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Redmond/jquery-ui-1.8.14.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/buttons-and-hovermenu.css")" rel="stylesheet" type="text/css" />

<!--[if IE 7]>
    <link href="/Content/user/ie7fix.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/Scripts/json/json2.js"></script>
<![endif]-->
<script type="text/javascript" src="/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.14.custom.min.js"></script>
<script src="/Scripts/jquery-ui-i18n.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/admin/iportal.js"></script>
<script type="text/javascript" src="/global/globalization"></script>

@RenderSection("head", required: false)

Upvotes: 0

Views: 1305

Answers (4)

Khodadad
Khodadad

Reputation: 126

Sorry, I'm late to the party but I am sure if anyone have same problem this will help. Ok, here in your case, this problem happens when you use tow or more than one inputs with same IDs, so there the Datepicker can't recognize where to put the date in.

Upvotes: 0

Scott Wright
Scott Wright

Reputation: 186

I had the same problem and read Mark's answer. I went to look for other DOM elements with the same ID as the input I was trying to inject with the date. I found the input element in some test markup that was being used for design purposes. I deleted the other input and the DatePicker began to work normally.

Upvotes: 0

Teambit
Teambit

Reputation: 325

Thx for the help guys. However the problem is solved. Seems my old colleague had left some testmethods in the parentview, instantiating the same partialview which contained the same elements. Thereby messing up the datepickers.

Upvotes: 1

chetanya gehlot
chetanya gehlot

Reputation: 564

try with including this js versions 

<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>

Upvotes: 0

Related Questions