Returned DatePicker Value in Wrong Format

Question

I'm using Twitter Bootstrap Datepicker https://github.com/eternicode/bootstrap-datepicker within my MVC 5 application. It's hooked up to a textbox within a View called Selector

View Selector

@model STAR.UI.ViewModels.ReportSelectorViewModel

<script>
    $(document).ready(function () {
        $('.datepicker').datepicker({
            autoclose: true,
            format: "dd/mm/yyyy",
            daysOfWeekDisabled: "5,6"
        });
    });
</script>

@Html.TextBoxFor(m => m.StartDate, new { @class = "datepicker" })

When the user selects a date it displays in the textbox in a UK date format dd/mm/yyyy. This is correct. The user can then hit a submit button which displays data on another page. Within that page there is a back button which returns the user back to the Selector View where they can select another date. However, I'd also like when the user hits the back button that their current date selection is also passed back into the textbox.

Back Button

@Html.ActionLink("<<< Go Back", "Selector", "Reports", new { startDate = Model.StartDate }, new { @class = "btn btn-outline btn-primary" })

The back button passes the selected StartDate back to the Selector Action within my Controller and I then assign this value to the ViewModel, and the ViewModel is then passed back to the Selector View.

Selector Action (in Controller)

public ActionResult Selector(DateTime? startDate)
{
  ReportSelectorViewModel model = new ReportSelectorViewModel();
  model.StartDate = startDate;
  return View(model);
}

The StartDate property in the ReportSelectorViewModel is of type DateTime?

The problem is that when the date is returned to the textbox, it is in the format of mm/dd/yyyy instead of the UK format I need, which is dd/mm/yyyy.

I've tried putting this code above the StartDate property in the ReportSelectorViewModel, but it doesn't help

[DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime? StartDate { get; set; }

Can anyone please help with this?

Thanks.

UPDATE

My Html rendered code for the StartDate

<div class="form-group">
<input class="datepicker" data-val="true" data-val-date="The field StartDate must be a date." data-val-required="Please select a Start Date" id="StartDate" name="StartDate" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span>
</div>

the action Selector is a post or get method? – theLaw Nov 05 '14 at 14:07 — theLaw, Nov 05 '14 at 14:07

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

The simplest way to fix your issue is to set your server global culture to UK. Just config your web.config file with this:

<configuration>
    <system.web>
        <globalization uiCulture="en-GB" culture="en-GB" />
    </system.web>
</configuration>

But this settings will be applied to all other users. The best way is to use user culture settings, take a look here and work with dates in UTC format.

edited May 23 '17 at 12:31

Community

1
1

answered Nov 05 '14 at 13:23

Pavel

526
2
5

Thanks for the suggestion, but this hasn't fixed my problem. – tcode Nov 05 '14 at 13:35

score 0 · Accepted Answer · answered Nov 05 '14 at 14:10

0

Folks

This solved my problem, changing the Html.TextBoxFor declaration to this

@Html.TextBoxFor(model => model.StartDate, new { Value = Model.StartDate.HasValue ? Model.StartDate.Value.ToString("dd/MM/yyyy") : string.Empty, @class = "datepicker" })

answered Nov 05 '14 at 14:10

tcode

5,055
19
65
124

Returned DatePicker Value in Wrong Format

2 Answers2

Linked