Problem with DatePicker

Aug 18, 2011 at 8:25 PM

Hi,

When I use the datepicker, when the page where is the datepicker opens,
the datepicker appears at the
left bottom of the page. Does anyone know why and how it prevented?
Thanks in advance.

Coordinator
Aug 18, 2011 at 11:14 PM

Please post the code of your view. What do you mean with DatePicker, DateTimeInpu? or TypedTextBox with the calendar option?

Aug 19, 2011 at 8:21 AM
Edited Aug 19, 2011 at 8:28 AM

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        <%: Html.Label("Add", "Add new coupon")%>
    </h2>
    <% using (Html.BeginForm())
       { %>
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>
            <%: Html.Label("Coupon", "Coupon")%>
        </legend>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Name) %>
        </div>
        <div class="editor-field">
            <div class="name-field">
                <%: Html.EditorFor(model => model.Name) %>
            </div>
            <%: Html.ValidationMessageFor(model => model.Name) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Image) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Image) %>
            <%: Html.ValidationMessageFor(model => model.Image) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Value) %>
        </div>
        <div class="editor-field">
            <div class="value-display">
                <div class="value-field">
                    <%: Html.EditorFor(model => model.Value) %>
                </div>
                <%: Html.ValidationMessageFor(model => model.Value) %>
                &nbsp;
                <div class="moneySymbol-label">
                    <%: Html.Label("MoneySymbol", Html.GetMoneySymbol((char)Session["MoneySymbol"]))%>
                </div>
            </div>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Description) %>
        </div>
        <div class="editor-field">
            <div class="description-field">
                <%: Html.EditorFor(model => model.Description) %>
            </div>
            <%: Html.ValidationMessageFor(model => model.Description) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.StartDate) %>
        </div>
        <div class="editor-field">
            <div class="calendar-field">
                <% var StartDateCalendar = Html.DateTimeFor(model => model.StartDate, DateTime.Today, dateInCalendar: true);  %>
                <%: StartDateCalendar.DateCalendar(
                    inLine: false,
                    calendarOptions: new CalendarOptions
                    {
                         ChangeYear=true,
                         ChangeMonth=true
                    })
                %>
            </div>
            <%: Html.ValidationMessageFor(model => model.StartDate) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.EndDate) %>
        </div>
        <div class="editor-field">
            <div class="calendar-field">
                <% var EndDateCalendar = Html.DateTimeFor(model => model.EndDate, DateTime.Today, dateInCalendar: true);  %>
                <%: EndDateCalendar.DateCalendar(
                    inLine: false,
                    calendarOptions: new CalendarOptions
                    {
                         ChangeYear=true,
                         ChangeMonth=true
                    })
                %>
            </div>
            <%: Html.ValidationMessageFor(model => model.EndDate) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.ZoneID) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.ZoneID) %>
            <%: Html.ValidationMessageFor(model => model.ZoneID) %>
        </div>
        <p>
            <input type="submit" value="Add new coupon" />
        </p>
    </fieldset>
    <% } %>
    <div>
        <%: Html.ActionLink("Back to Home", "Index") %>
    </div>
</asp:Content>

When the page open, the calendar open to and it should normaly open when you click on the field StartDate and EndDate

Coordinator
Aug 19, 2011 at 2:11 PM
Edited Aug 19, 2011 at 2:43 PM

Your code appears correct, and the calndar is working for us. Thus, probably the issue is due to some wrong javascript reference. Do the following

1) Be sure you are using the last release (1.3 sp1) of the Mvc Controls Toolkit.

2) Be sure you are using the last jquery, jqueryUI, and jQuery.validate scripts

3) Verify you called all needed scripts(see here ), in the right order (see the example code that comes with the binaries)

 

if the above doesn't solve:

1) Verify if there is som other javascript error that prevens js execution in the remainder of the page (see if other js after the calndar works).

2) Try removing any Range attribute from the DateTime Properties and see if this solve. If yes, the Range attribute might be hill-defined-

 

 

If you are not able to solve, pls send me a self contained project with NO DATABASE showing your issue, throug the contact form of my Blog: http://www.dotnet-programming.com/contact.aspx 

Sep 20, 2012 at 2:57 PM

Is  stoppanijerome's issue fixed? I am struggling with the same problem. I believe I have the latest scripts and can't seem to find the problem.

Coordinator
Sep 20, 2012 at 4:53 PM

There was no following up in the discussion and from that time none had a similar issue so probably the errors was due to an error in the page not a to a bug. 

Can you please show your code and the javascript headers of the page?

 

Sep 21, 2012 at 7:32 AM

It does seem to work inline but I'm still experiencing the problem not inline..

javascript headers (I also checked whether they are loaded or not):

 <script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.23.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.datepicker-nl-BE.js" type="text/javascript"></script>
<script src="../../Scripts/MVCControlToolkit.Controls-2.2.5.min.js" type="text/javascript"></script>

View:

<h2>CreateAction</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>AgreedAction</legend>

        <div class="editor-label">
            Action Type
        </div>
        <div class="editor-field">
            @Html.DropDownList("ActionType_ID")
            @Html.ValidationMessageFor(model => model.ActionType_ID)
        </div>

        <div class="editor-label">
            Action Status
        </div>
        <div class="editor-field">
            @Html.DropDownList("Status_ID")
            @Html.ValidationMessageFor(model => model.Status_ID)
        </div>
        <div class="editor-label">
            Team member
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.UserByID, (IEnumerable<SelectListItem>)ViewBag.TeamMembers)
            @Html.ValidationMessageFor(model => model.UserForID)
        </div>
        <div class="editor-label">
            Action Direction
        </div>
        <div class="editor-field">

        @foreach(var direction in (IEnumerable<SelectListItem>)ViewBag.ActionDirection)
        {
            @Html.RadioButton("ActionDirectionbool",direction.Value,direction.Selected=true)<label>@direction.Text</label><br />
        }
             @*Model binding requires all the "compulsory" fields, in order to havec a valid modelstate
             Therefore, we assume a value for the required fields UserByID (the team member id) and UserForID (the unit manager id). 
             These will potentially be reviewed server side, according to the chose radiobutton.*@    
         @Html.Hidden("UserForID",TFUTv2.Infrastructure.Identify.currentUser.UserID)  
            
        </div>
        
        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ActionContent)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ActionContent)
            @Html.ValidationMessageFor(model => model.ActionContent)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DateRegistered)
        </div>
        <div class="editor-field">
            @{Model.DateRegistered = DateTime.Now;}
            @Html.HiddenFor(model => model.DateRegistered)
            @Html.DisplayFor(model => model.DateRegistered)
            @Html.ValidationMessageFor(model => model.DateRegistered)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DueDate)
        </div>
        <div class="editor-field">
            <div class="datePicker">
                @{Model.DueDate = DateTime.Now.AddHours(24);}
                @{var DTd = Html.DateTimeFor(model => model.DueDate, dateInCalendar : true);}
                @DTd.DateCalendar(calendarOptions: new CalendarOptions{ ChangeMonth = true, ChangeYear = true},inLine: true)
                <div class="time">
                    @DTd.Time()
                </div>
                @Html.ValidationMessageFor(model => model.DueDate)
            </div>
        </div>

                @Html.HiddenFor(model => model.DateAccomplished)
                @Html.ValidationMessageFor(model => model.DateAccomplished)

        <div class="editor-label">
            @Html.LabelFor(model => model.AttachedDoc_URL)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.AttachedDoc_URL)
            @Html.ValidationMessageFor(model => model.AttachedDoc_URL)
        </div>


        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

It is probably a coding problem since I am quite new at this but everything else seems to work fine (model binding etc). Also, after I focus on the text field it acts like it's supposed to.. 

Coordinator
Sep 21, 2012 at 3:54 PM

I dont see any evident error. For sure the problem is with some javascript that go crazy for some reason.

First suspect: <script src="../../Scripts/jquery.ui.datepicker-nl-BE.js" type="text/javascript"></script

This file might be broken. Localization files for some cultures are broken(often they are provided by users themselves). Try with the en-us culture to see if the problem disappears.

Another reason the DateInput should go crazy, if when one put some max-min constraints trough the DateRangeAttribute and the constraints are inconsistent. So if you have one try removing it. 

Another possibility, is that you are loading the page through ajax, with some wrong timing. The Mvc Controls Toolkit internal features based on ajax (such as client blocks) collects all js in the page and run them with the right timing.

 

See if you are in one of the above situations. If not please send a self contained solution showing the problem to me through the contact form of my blog: http://www.dotnet-programming.com/contact.aspx, I cant exclude there is a bug. The dateinput control si very complex and delicate .