Search code examples
jqueryasp.net-mvctwitter-bootstrapjquery-ui-datepickerjquerydatetimepicker

jquery datetime picture showing incorrect dates


I am using jquery datetimepicker like this:

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

and when in the textbox if there is no value, it defaults to todays date and if there is a value , the datetime picker goes to 1899 as shown in the image below: enter image description here

I am using a viewmodel to bind which is below:

public class AppointmentViewModel
{
    public long? UserId { get; set; }
    public long Id { get; set; }
    public string AppointmentInstructorName { get; set; }

    [DisplayFormat(ApplyFormatInEditMode =true, DataFormatString ="{0:dd/MMM/yyyy h:mm tt}")]
    public DateTime? LessonDateTime { get; set; }

    public string AppointmentLessonAddress { get; set; }


}

view:

 @{ViewBag.PageTitle = "Edit an Appointment";}
 <script type="text/javascript">
 $(document).ready(function () {
    $("#LessonDateTime").datetimepicker(
    );
});
</script>
 @using (Html.BeginForm())
{
@Html.AntiForgeryToken()

@Html.Hidden("userId", Model.UserId)
<div class="row">
    <div class="col-md-8">
        <div class="panel">

            <div class="panel-heading tabbable" tabindex="0"><h1>Edit Appointment Details</h1></div>

            <div class="panel-body">

                <div class="form-group row">
                    <div class="col-sm-6">
                        @Html.LabelFor(model => model.AppointmentInstructorName, "Instructor Name", htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.AppointmentInstructorName, new { htmlAttributes = new { @class = "form-control" } })
                    </div>

                </div>
                <div class="form-group row">
                    <div class="col-sm-6">

                        @Html.LabelFor(model => model.LessonDateTime, "Lesson Date and Time", htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.LessonDateTime, new { htmlAttributes = new { @class = "form-control" } })
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6">
                        @Html.LabelFor(model => model.AppointmentLessonAddress, "Address (if different)", htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.AppointmentLessonAddress, new { htmlAttributes = new { @class = "form-control" } })
                    </div>



                </div>
                <div class="form-group row">
                    <div class="col-sm-6">
                        <input type="submit" class="btn btn-primary form-control" value="Submit" />
                        </div>
                    </div>
                </div>




        </div>
    </div>


</div>



}

Solution

  • adding useCurrent:false worked for me

    $(function () {
            $('#LessonDateTime').datetimepicker({
                useCurrent: false                   
            });
        });