Date does not display from Model on HTML input type date
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
asked Jun 28 '15 at 8:48
Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi
2,53831843
add a comment |
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
asked Jun 28 '15 at 8:48
Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi
2,53831843
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
add a comment |
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
asked Jun 28 '15 at 8:48
Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi
2,53831843
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
date razor asp.net-mvc-5
asked Jun 28 '15 at 8:48
Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi
2,53831843
asked Jun 28 '15 at 8:48
Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi
2,53831843
asked Jun 28 '15 at 8:48
Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi
2,53831843
asked Jun 28 '15 at 8:48
Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi
2,53831843
asked Jun 28 '15 at 8:48
Syed Farjad Zia ZaidiSyed Farjad Zia Zaidi
2,53831843
2,53831843
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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
Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.
– Aeroradish
Dec 29 '15 at 16:53
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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
Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.
– Aeroradish
Dec 29 '15 at 16:53
add a comment |
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
Good answer. One minor correction: ApplyInEditMode should be ApplyFormatInEditMode, at least on VS 2013 running Framework 4.
– Aeroradish
Dec 29 '15 at 16:53
add a comment |
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
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
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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