We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

DateTimePickerFor Edit mode doesn't show real date, always show now date

Hi,

I have a short experience with this control DateTimePickerFor.
We have a Edit mode view in MVC 5 and this is our code:

View:
            @Html.EJ().DateTimePickerFor(model => model.OrderDate, (Syncfusion.JavaScript.Models.DateTimePickerProperties)ViewData["datetime"])

Controller
: In method GET Edit (id) and POST Edit (Bind(Includ...
            DateTimePickerProperties dtp = new DateTimePickerProperties();
            dtp.DateTimeFormat = "dd/MM/yyyy h:mm tt";
            dtp.Width = "180px";
            ViewData["datetime"] = dtp;


DateTimePickerFor always shows the now date, it doesn't show the real date that exist behind in the model.OrderDate, also for data with empty dates shows as default now date.

For DatePickerFor control, it works fine with this c# code in controller:
            DatePickerProperties datemodel = new DatePickerProperties();
            datemodel.DateFormat = "dd/MM/yyyy";
            datemodel.ShowRoundedCorner = true;
            datemodel.DisplayDefaultDate = false;
            ViewData["date"] = datemodel;

We don't find documentation about this, where is the problem? How does it write DateTimePickerFor with model property correctly?

Thanks


11 Replies

SS Saranya Sivakumar Syncfusion Team April 30, 2015 12:17 PM UTC

Hi Jesus,

Thanks for using Syncfusion products.

We would like to let you know that, we have to set the value for the DateTimePicker in the Model page as shown in the following code snippet.

<code>

[model]

public DateTime dt = new DateTime(2015, 05, 01, 01, 01, 10);

public DateTime OrderDate

{

get

{

return dt;

}

set

{

OrderDate = dt;

}

}

</code>

After setting the value in the model we have to return it in the controller page as like below.

<code>

public ActionResult DateTimePickerFeatures()

{

DateTimePickerProperties dtp = new DateTimePickerProperties();

dtp.DateTimeFormat = "dd/MM/yyyy h:mm tt";

dtp.Width = "180px";

ViewData["datetime"] = dtp;

return View(new DTModel());

}

</code>

If we doesn’t return the Model to the view as shown in the above code snippet, then the model value will not be passed to the View page. For your convenience we have prepared the sample with the shared code snippet, please download the same from the following location.

http://www.syncfusion.com/uploads/user/forum/118973/DTPFor1050697354.zip

Also if you would like to empty the DateTimePicker then you can set the value in the Model as “null” as shown in the below code snippet.

<code>

[model]

public class DTModel

{

public DateTime? dt = null;

public DateTime? OrderDate

{

get

{

return dt;

}

set

{

OrderDate = dt;

}

}

}

</code>

Please let us know if you have further concern.

Regards,

Saranya.S



JM Jesús Mostajo May 4, 2015 04:45 PM UTC

Thanks Saranya for your response..

For create method, we don't have problems.
We can add a register, datetimepicker controls shows a empty value for datetime? property (although after verification process form, when reload the page, the datetimepickers show actual date).

Our real issue, is in edit mode. When Edit mode is loaded, all datetimepicker controls show the actual date, although each field has its value from database.


SS Saranya Sivakumar Syncfusion Team May 6, 2015 10:02 AM UTC

Hi Jesus,

Thanks for your update.

We have analyzed your scenario with Grid cell edit type sample and unable to reproduce the issue in our end. We have prepared the sample by assigning value to the DateTimePicker present in the Grid in the controller section as shown in the following code snippet.

<code>

order.Add(new Orders(code + 1, "TOMSP", i + 0, 2.3 * i, "Münster", "Toms Spezialitäten", new DateTime(1991, 05, 15), "Germany", "44087", false));

order.Add(new Orders(code + 2, "HANAR", i + 2, 3.3 * i, "Rio de Janeiro", "Hanari Carnes", new DateTime(1990, 04, 04), "Brazil", "05454-876", true));

order.Add(new Orders(code + 3, "VICTE", i + 1, 4.3 * i, "Lyon", "Victuailles en stock", new DateTime(1957, 11, 30), "France", "69004", true));

order.Add(new Orders(code + 4, "VINET", i + 3, 5.3 * i, "Reims", "Vins et alcools Chevalier", new DateTime(1930, 10, 22), "France", "51100", true));

order.Add(new Orders(code + 5, "SUPRD", i + 4, 6.3 * i, "Charleroi", "Suprêmes délices", new DateTime(1953, 02, 18), "Belgium", "B-6000", false));

</code>

Now these dates will be set to the DateTimePicker present in the Grid cell edit type control. For your convenience we have prepared the sample with Grid cell edit type and it can be downloaded from the following link location.

http://www.syncfusion.com/downloads/support/forum/118978/GridSampleWithDTPicker1915733178.zip

Run the attached sample you can the date displayed as “Nov 30th 1957” as we have passed to the View page as shown in the below screenshot.


Also as said in our previous update inorder to set the DateTimePicker value as empty then you can set the value as shown below.

<code>

[model]

public class DTModel

{

public DateTime? dt = null;

public DateTime? OrderDate

{

get

{

return dt;

}

set

{

OrderDate = dt;

}

}

}

</code>


Please check with the sample if still you face the problem then please revert us by modifying the sample according to your scenario. Also if possible please share us the screenshot or video clip of issue and your entire sample in order to reproduce the issue in our end. This would be helpful for us to serve you better.

Please let us know if you have further concern.

Regards,

Saranya.S



SG Sakthi G Syncfusion Team May 6, 2015 11:49 AM UTC

From: Jesús Mostajo [mailto:jmostajo@virtualrouting.es]
Sent: Wednesday, May 06, 2015 7:45 AM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 118973, DateTimePickerFor Edit mode doesn't show real date, always show now date, has been updated.


Thank you very much for your response.

Sorry I review your code, is good but it behaves different in our project.
I attach some images for clarify this issue. I centered the problem in MVC 5 Edit mode

From debug mode IE (Original date data is: 04/05/2015) Spanish date format :



From DOM Explorer mode IE (Change to current datetime: 06/05/2015) Spanish date format :



Code from View:

<div class="col-xs-6 col-sm-6 col-md-6 form-group">

@Html.LabelFor(model => model.OrderDate, htmlAttributes: new { @class = "control-label col-md-4" })

<div class="col-md-6">

@Html.EJ().DateTimePickerFor(model => model.OrderDate).DateTimeFormat("dd/MM/yyyy hh:mm:ss").Width("180").ShowRoundedCorner()

@Html.ValidationMessageFor(model => model.OrderDate, "", new { @class = "text-danger" })

</div>
</div>

Code from controller:

public ActionResult Edit(int? id)

{

if (id == null)

{

return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

Order order = db.Order.Find(id);

if (order == null)

{

return HttpNotFound();

}


return View(order);
}

Best regards

Jesús Mostajo. Operaciones.




KC Kasithangam C Syncfusion Team May 7, 2015 11:12 AM UTC

Hi Jesus,

We are able to reproduce the issue(“The datetimepicker control displays only the current date even access the value from Database”).A support incident to track the status of this issue has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know if you have further concern.


Regards,

Kasithangam



EG egor February 14, 2016 03:22 PM UTC

Hi Kasithangam,

This bug still reproduced.
I found a workaround:

@{
    ViewBag.Title = "Edit";
    var stringDate = Model.Date.ToString();
}

    @Html.HiddenFor(model => model.Date)
                <input id="DateTime" type="text"/>
                <script>
                    $("#DateTime").ejDateTimePicker({
                        dateTimeFormat: "d.M.yyyy h:mm:ss",
                        value: "@stringDate",
                        close: OnDateTimeChange,
                    });

                    function OnDateTimeChange(args) {
                        if (args)
                        {
                            $("#Date").val(args.value);
                        }
                    }
                </script>
 @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })

I found if we use Html.EJ().DateTimePickerFor, we get a control at generated HTML page:

<input data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="23.02.2016 1:30:00" data-ej-timepopupwidth="105" data-ej-showroundedcorner="true" data-ej-width="180" data-ej-value="23/2/2016 1:30 AM" data-ej-datetimeformat="dd/MM/yyyy hh:mm:ss" data-ej-buttontext-timenow="TimeNow" data-ej-timedrilldown-showmeridian="false" data-role="ejdatetimepicker" />

And on my mind mistake is at wrong field "data-ej-value". 

Is there any progress to fix it?

Thank you.

Best regards,
Egor.


GS Gobalakrishnan S Syncfusion Team February 15, 2016 01:14 PM UTC

Hi Egor,

We are able to reproduce the issue (“The datetimepicker control displays only the current date”). A support incident to track the status of this issue has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Please let us know if you have further concern.

Regards,

Gobalakrishnan S



EG egor February 15, 2016 04:40 PM UTC

Hi Gobalakrishnan,

Thank you for quick responce. Will waiting for fix. 
Thanks all of you for your hard work.

Best regards,
Egor.


GS Gobalakrishnan S Syncfusion Team February 16, 2016 10:47 AM UTC

Hi Egor,
 
Thanks for your update.
Please let me know ,if you have any further queries.
 
Regards,
Gobalakrishnan S


HN Hugo Nugra replied to Gobalakrishnan S February 7, 2017 04:32 PM UTC

Hi Egor,
 
Thanks for your update.
Please let me know ,if you have any further queries.
 
Regards,
Gobalakrishnan S

The problem persits.  I think that the control considers the TIME ZONE


FP Francis Paul Antony Raj Syncfusion Team February 8, 2017 11:48 PM UTC

Hi Hugo, 
 
Thanks for contacting Syncfusion Support. 
 
The issue reported in this forum has been already fixed. 
 
Query: the control considers the TIME ZONE 
 
Could you please provide more information regarding this issue. We suspect that your issue is DateTimePicker changes the time value when the application hosted in different Time zones. As per our source, we have converted the received client time value to UTC (Coordinated Universal Time) before sending it to the server to overcome the time zone discrepancies across the world.  
So, to receive the same date as selected by the user, it requires converting the received time which is in UTC to the local time zone by adjusting the time zone offset. This is depicted in the code provided below.   
 
        // time offset time as TimeSpan object 
        var offsetTime = TimeZoneInfo.Local.GetUtcOffset(DateTime.UtcNow).Ticks; 
 
        // time offset in minutes 
        var localtime_minutes = TimeSpan.FromTicks(offsetTime).TotalMinutes; 
 
        // add the offsetTime to the datetime recieved as UTC 
        ViewData["date"] = data.date.AddMinutes(localtime_minutes); 
 
If we misunderstood your query, could please share the code example or application to reproduce the issue at our end. 
 
Regards, 
Francis Paul A. 


Loader.
Live Chat Icon For mobile
Up arrow icon