Binding bootstrap-datepicker to specific Datetime format

Question

I have problem with Date format in editing mode. Date is stored as dd/MM/yyyy HH:mm:ss. The date I want to bind in bootstrapdatetime picker should have format MM/dd/yyyy, but viewmodel has the format of DateTime as dd/MM/yyyy and sending same to the edit view.
I tried to change the format by changing CurrentCulture, CurrentUICulture and Parsing etc. But no success.
CurrentCulture of Web-App is set as "pt-BR" but I preffer always "en-US" culture for datepicker, even application culture is set to "pt-BR" or to any other culture.

Model:

[Column(TypeName = "datetime2")]
public DateTime? StartsOn { get; set; }

ViewModel:

public DateTime? StartsOn { get; set; }

Controller:

CultureInfo provider = CultureInfo.CreateSpecificCulture("en-US");
string dateString1="";  
string lang="pt-BR";

dateString1 = entityVM.StartsOn.ToString();
var StartsOn = (DateTime.ParseExact(dateString1, "dd/MM/yyyy HH:mm:ss", provider)
                    .ToString("MM/dd/yyyy", provider));

var outputCulture = CultureInfo.CreateSpecificCulture("en-US");
var inputCulture = CultureInfo.CreateSpecificCulture(lang);

//Just for date format change to en-US culture, and then reset it to application culture
Thread.CurrentThread.CurrentCulture = outputCulture;
Thread.CurrentThread.CurrentUICulture = outputCulture;

//entityVM.StartsOn = (DateTime.ParseExact(StartsOn, "MM/dd/yyyy", outputCulture)); //ok, Format changed here

//Reset culture to pt-BR (application culture)
Thread.CurrentThread.CurrentCulture = inputCulture; // Problem! Format again changed here.
Thread.CurrentThread.CurrentUICulture = inputCulture;

Here is the view:

<div class='input-group date' data-provide="datepicker">
                        @Html.TextBox("StartsOn", Model.StartsOn, new { @class = "form-control", @id = "datetimepicker1", @type = "text", @required = true })
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
</div> 

<script type="text/javascript">
            $(document).ready(function () {
                $('.datepicker').datepicker();

            });
</script>

The problem is that I always get dd/MM/yyyy instead of MM/dd/yyyy. How can it be converted to MM/dd/yyyy ?

Answer 1

You need to specify date format for the datepicker:

$('.datepicker').datepicker({
        dateFormat: 'mm/dd/yy'
    });

Answer 2

Is the datepicker showing properly? You are using the datepicker using .datepicker but I can't see any class mentioned as datepicker . Did you mean its showing different format populating it from model?

Answer 3

Your viewmodel is correct and NOT dd/MM/yyyy. dd/MM/yyyy, MM/dd/yyyy ... are all "display" formats only. Underlying value is DateTime? and is independent of the display format. With jquery ui datepicker the default display format (dateFormat) is already "mm/dd/yy". With bootstrap datepicker it is format: "mm/dd/yyyy" (and it is again the default).

I think your problem is that, you are converting a datetime value to a string and then parsing back to a datetime. I have no idea why you are doing that. If you would do that why don't you also make to ToString("dd/MM/yyyy HH:mm:ss")?

dateString1 = entityVM.StartsOn.ToString("dd/MM/yyyy HH:mm:ss");
var StartsOn = (DateTime.ParseExact(dateString1, "dd/MM/yyyy HH:mm:ss", provider)
        .ToString("MM/dd/yyyy", provider));

IMHO this is a totally unnecessary conversion. It should simply be:

var StartsOn = entityVM.StartsOn;
//or:
var StartsOn = (DateTime)entityVM.StartsOn;