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

[Jesús Mostajo]

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

[Saranya Sivakumar]

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

[Jesús Mostajo]

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.

[Saranya Sivakumar]

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 30^th 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

[Sakthi G]

From: Jesús Mostajo [mailto:[email protected]]
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.

[Kasithangam C]

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

[egor]

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.

[Gobalakrishnan S]

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

[egor]

Hi Gobalakrishnan,

Thank you for quick responce. Will waiting for fix. 

Thanks all of you for your hard work.

Best regards,

Egor.

[Gobalakrishnan S]

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

[Hugo Nugra]

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

[Francis Paul Antony Raj]

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.