Date does not display from Model on HTML input type date












10















I am trying to display a date type input on my create and edit Razor Views... The date picker works fine but when editing I do get the value from the Model but the date picker does not display it...



View



<div class="form-group form-md-line-input">
@Html.TextBoxFor(model => model.InitialDate, new { @class = "form-control", type = "date" })
@Html.ValidationMessageFor(model => model.InitialDate)
@Html.LabelFor(model => model.InitialDate)
</div>


Model



public Nullable<System.DateTime> InitialDate { get; set; }


I have tried using the DataAnnotations but the same thing happens the date picker only allows me to select the date on the create but when editing it does not display the date from the model although when I looked at the HTML Code that is rendered, the value for the date is being set but the control does not display it.



HTML View



<input class="form-control" data-val="true" data-val-date="The field InitialDate must be a date." id="InitialDate" name="InitialDate" type="date" value="3/3/2015 12:00:00 AM">


I also removed the time from attribute value from the browser's developers tools to see if it works, but it didn't work either...



<input class="form-control" data-val="true" data-val-date="The field InitialDate must be a date." id="InitialDate" name="InitialDate" type="date" value="3/3/2015">


How can I Display the Date from the Model in the date picker? Any help will be appreciated...










share|improve this question























  • Are your generating the browsers HTML5 datepicker (or are you using a jquery plugin?)

    – user3559349
    Jun 28 '15 at 8:50











  • @StephenMuecke Browsers HTML5 datepicker...

    – Syed Farjad Zia Zaidi
    Jun 28 '15 at 8:53








  • 1





    Use @Html.TextBoxFor(model => model.InitialDate, "{0:yyyy-MM-dd}", new { ...}) (ISO format)

    – user3559349
    Jun 28 '15 at 8:54













  • Thanks a lot, You should post this as an answer so I can select it...

    – Syed Farjad Zia Zaidi
    Jun 28 '15 at 8:56
















10















I am trying to display a date type input on my create and edit Razor Views... The date picker works fine but when editing I do get the value from the Model but the date picker does not display it...



View



<div class="form-group form-md-line-input">
@Html.TextBoxFor(model => model.InitialDate, new { @class = "form-control", type = "date" })
@Html.ValidationMessageFor(model => model.InitialDate)
@Html.LabelFor(model => model.InitialDate)
</div>


Model



public Nullable<System.DateTime> InitialDate { get; set; }


I have tried using the DataAnnotations but the same thing happens the date picker only allows me to select the date on the create but when editing it does not display the date from the model although when I looked at the HTML Code that is rendered, the value for the date is being set but the control does not display it.



HTML View



<input class="form-control" data-val="true" data-val-date="The field InitialDate must be a date." id="InitialDate" name="InitialDate" type="date" value="3/3/2015 12:00:00 AM">


I also removed the time from attribute value from the browser's developers tools to see if it works, but it didn't work either...



<input class="form-control" data-val="true" data-val-date="The field InitialDate must be a date." id="InitialDate" name="InitialDate" type="date" value="3/3/2015">


How can I Display the Date from the Model in the date picker? Any help will be appreciated...










share|improve this question























  • Are your generating the browsers HTML5 datepicker (or are you using a jquery plugin?)

    – user3559349
    Jun 28 '15 at 8:50











  • @StephenMuecke Browsers HTML5 datepicker...

    – Syed Farjad Zia Zaidi
    Jun 28 '15 at 8:53








  • 1





    Use @Html.TextBoxFor(model => model.InitialDate, "{0:yyyy-MM-dd}", new { ...}) (ISO format)

    – user3559349
    Jun 28 '15 at 8:54













  • Thanks a lot, You should post this as an answer so I can select it...

    – Syed Farjad Zia Zaidi
    Jun 28 '15 at 8:56














10












10








10


1






I am trying to display a date type input on my create and edit Razor Views... The date picker works fine but when editing I do get the value from the Model but the date picker does not display it...



View



<div class="form-group form-md-line-input">
@Html.TextBoxFor(model => model.InitialDate, new { @class = "form-control", type = "date" })
@Html.ValidationMessageFor(model => model.InitialDate)
@Html.LabelFor(model => model.InitialDate)
</div>


Model



public Nullable<System.DateTime> InitialDate { get; set; }


I have tried using the DataAnnotations but the same thing happens the date picker only allows me to select the date on the create but when editing it does not display the date from the model although when I looked at the HTML Code that is rendered, the value for the date is being set but the control does not display it.



HTML View



<input class="form-control" data-val="true" data-val-date="The field InitialDate must be a date." id="InitialDate" name="InitialDate" type="date" value="3/3/2015 12:00:00 AM">


I also removed the time from attribute value from the browser's developers tools to see if it works, but it didn't work either...



<input class="form-control" data-val="true" data-val-date="The field InitialDate must be a date." id="InitialDate" name="InitialDate" type="date" value="3/3/2015">


How can I Display the Date from the Model in the date picker? Any help will be appreciated...










share|improve this question














I am trying to display a date type input on my create and edit Razor Views... The date picker works fine but when editing I do get the value from the Model but the date picker does not display it...



View



<div class="form-group form-md-line-input">
@Html.TextBoxFor(model => model.InitialDate, new { @class = "form-control", type = "date" })
@Html.ValidationMessageFor(model => model.InitialDate)
@Html.LabelFor(model => model.InitialDate)
</div>


Model



public Nullable<System.DateTime> InitialDate { get; set; }


I have tried using the DataAnnotations but the same thing happens the date picker only allows me to select the date on the create but when editing it does not display the date from the model although when I looked at the HTML Code that is rendered, the value for the date is being set but the control does not display it.



HTML View



<input class="form-control" data-val="true" data-val-date="The field InitialDate must be a date." id="InitialDate" name="InitialDate" type="date" value="3/3/2015 12:00:00 AM">


I also removed the time from attribute value from the browser's developers tools to see if it works, but it didn't work either...



<input class="form-control" data-val="true" data-val-date="The field InitialDate must be a date." id="InitialDate" name="InitialDate" type="date" value="3/3/2015">


How can I Display the Date from the Model in the date picker? Any help will be appreciated...







date razor asp.net-mvc-5






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jun 28 '15 at 8:48









Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi

2,51831742




2,51831742













  • Are your generating the browsers HTML5 datepicker (or are you using a jquery plugin?)

    – user3559349
    Jun 28 '15 at 8:50











  • @StephenMuecke Browsers HTML5 datepicker...

    – Syed Farjad Zia Zaidi
    Jun 28 '15 at 8:53








  • 1





    Use @Html.TextBoxFor(model => model.InitialDate, "{0:yyyy-MM-dd}", new { ...}) (ISO format)

    – user3559349
    Jun 28 '15 at 8:54













  • Thanks a lot, You should post this as an answer so I can select it...

    – Syed Farjad Zia Zaidi
    Jun 28 '15 at 8:56



















  • Are your generating the browsers HTML5 datepicker (or are you using a jquery plugin?)

    – user3559349
    Jun 28 '15 at 8:50











  • @StephenMuecke Browsers HTML5 datepicker...

    – Syed Farjad Zia Zaidi
    Jun 28 '15 at 8:53








  • 1





    Use @Html.TextBoxFor(model => model.InitialDate, "{0:yyyy-MM-dd}", new { ...}) (ISO format)

    – user3559349
    Jun 28 '15 at 8:54













  • Thanks a lot, You should post this as an answer so I can select it...

    – Syed Farjad Zia Zaidi
    Jun 28 '15 at 8:56

















Are your generating the browsers HTML5 datepicker (or are you using a jquery plugin?)

– user3559349
Jun 28 '15 at 8:50





Are your generating the browsers HTML5 datepicker (or are you using a jquery plugin?)

– user3559349
Jun 28 '15 at 8:50













@StephenMuecke Browsers HTML5 datepicker...

– Syed Farjad Zia Zaidi
Jun 28 '15 at 8:53







@StephenMuecke Browsers HTML5 datepicker...

– Syed Farjad Zia Zaidi
Jun 28 '15 at 8:53






1




1





Use @Html.TextBoxFor(model => model.InitialDate, "{0:yyyy-MM-dd}", new { ...}) (ISO format)

– user3559349
Jun 28 '15 at 8:54







Use @Html.TextBoxFor(model => model.InitialDate, "{0:yyyy-MM-dd}", new { ...}) (ISO format)

– user3559349
Jun 28 '15 at 8:54















Thanks a lot, You should post this as an answer so I can select it...

– Syed Farjad Zia Zaidi
Jun 28 '15 at 8:56





Thanks a lot, You should post this as an answer so I can select it...

– Syed Farjad Zia Zaidi
Jun 28 '15 at 8:56












1 Answer
1






active

oldest

votes


















27














If your using this to generate the browsers HTML5 datepicker implementation, the format of the date needs to be yyyy-MM-dd (ISO format). Using TextBoxFor() it needs to be



@Html.TextBoxFor(m => m.InitialDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })


Alternatively, add the following attributes to the property



[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> InitialDate { get; set; }


and in the view use



@Html.EditorFor(m => m.InitialDate)


Note this adds the type="date" attribute






share|improve this answer


























  • Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.

    – Aeroradish
    Dec 29 '15 at 16:53











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31097748%2fdate-does-not-display-from-model-on-html-input-type-date%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









27














If your using this to generate the browsers HTML5 datepicker implementation, the format of the date needs to be yyyy-MM-dd (ISO format). Using TextBoxFor() it needs to be



@Html.TextBoxFor(m => m.InitialDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })


Alternatively, add the following attributes to the property



[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> InitialDate { get; set; }


and in the view use



@Html.EditorFor(m => m.InitialDate)


Note this adds the type="date" attribute






share|improve this answer


























  • Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.

    – Aeroradish
    Dec 29 '15 at 16:53
















27














If your using this to generate the browsers HTML5 datepicker implementation, the format of the date needs to be yyyy-MM-dd (ISO format). Using TextBoxFor() it needs to be



@Html.TextBoxFor(m => m.InitialDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })


Alternatively, add the following attributes to the property



[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> InitialDate { get; set; }


and in the view use



@Html.EditorFor(m => m.InitialDate)


Note this adds the type="date" attribute






share|improve this answer


























  • Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.

    – Aeroradish
    Dec 29 '15 at 16:53














27












27








27







If your using this to generate the browsers HTML5 datepicker implementation, the format of the date needs to be yyyy-MM-dd (ISO format). Using TextBoxFor() it needs to be



@Html.TextBoxFor(m => m.InitialDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })


Alternatively, add the following attributes to the property



[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> InitialDate { get; set; }


and in the view use



@Html.EditorFor(m => m.InitialDate)


Note this adds the type="date" attribute






share|improve this answer















If your using this to generate the browsers HTML5 datepicker implementation, the format of the date needs to be yyyy-MM-dd (ISO format). Using TextBoxFor() it needs to be



@Html.TextBoxFor(m => m.InitialDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })


Alternatively, add the following attributes to the property



[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> InitialDate { get; set; }


and in the view use



@Html.EditorFor(m => m.InitialDate)


Note this adds the type="date" attribute







share|improve this answer














share|improve this answer



share|improve this answer








edited Dec 31 '15 at 4:02

























answered Jun 28 '15 at 9:02







user3559349




















  • Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.

    – Aeroradish
    Dec 29 '15 at 16:53



















  • Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.

    – Aeroradish
    Dec 29 '15 at 16:53

















Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.

– Aeroradish
Dec 29 '15 at 16:53





Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.

– Aeroradish
Dec 29 '15 at 16:53


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31097748%2fdate-does-not-display-from-model-on-html-input-type-date%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

SQL update select statement

'app-layout' is not a known element: how to share Component with different Modules