I want to set editable a date time in Edit page. As you can in the image the other datas shown in the fields, date time value is not shown. Here is my code to show date time value :#Html.TextBoxFor(model => model.CommunicationTime, new { Value = Model.CommunicationTime, type = "date" })
I am sure of my date time value is not empty. What should I do?
Use jquery datepicker then change your TextBoxFor like below:
#Html.TextBoxFor(model => model.CommunicationTime, new {#id = "yourdatepicker", #Value = Model.CommunicationTime.Value.ToString("MM/dd/yyyy")})
<script>
$('#yourdatepicker').datepicker();
</script>
Do you want a date or datetime? As an HTML5 input type, datetime is only supported in Opera and Safari. Otherwise, you'd need to use jquery datepicker and a timepicker.
You should change type to datetime like this : type = "datetime"
#Html.TextBoxFor(model => model.CommunicationTime, new { Value = Model.CommunicationTime, type = "datetime" })
Related
I am using Html.TextBoxFor to set and display dates from Model. They work fine when setting the values, however when I retrieve values from the database, they do not display the dates:
Here is my HTML:
#Html.TextBoxFor(x=>x.effectiveDate, "Select Effective Date", new {#class="date form-control", id= "reqEffectiveDate" })
If I switch to #Html.EditorFor, the dates display, but the element no longer displays like the other "form-control" elements on the page, and clicking in the box no longer displays the datepicker:
EditorFor doesn't apply any CSS classes by default, unless you have defined a custom editor template.
You need to pass a collection of HTML attributes to the editor:
#Html.EditorFor(x => x.effectiveDate, new { htmlAttributes = new { #class = "date form-control", id = "reqEffectiveDate" } })
Can anyone suggest how to put date range validations in w2ui grid inline edit (Calendar should display date after start date)
Any hint or suggestions would be appreciated
Thanks
Kindly use following code to put date range validations in w2ui grid inline edit
onDblClick: function (event) {
var editable = w2ui['grid'].columns[event.column].editable
if (editable !== undefined) {
w2ui['grid'].columns[event.column].editable = { type: 'date', start: startdate };
w2ui['grid'].refresh();
}
}
here startdate is date from where you want to set your calender
My controller code:
ViewBag.ddlprincepal = new SelectList(objentity.ddlPrincipal(), "PrincipalID", "PrincipalName");
ViewBag.ddlprincepalselected = new SelectListItem { Text = inventoryDetailobj[0].PrincipalName, Value = (inventoryDetailobj[0].PrincipalID).ToString(),Selected=true };
My view the code:
#Html.DropDownList("ddlprincepal",ViewBag.ddlprincepal as SelectList ,ViewBag.ddlprincepalselected as string , new { #id = "ddlprincepal" })
Well you can do this by Jquery and it has only few lines of code. Since I don't know what text you are having before edit, I assume something such as Name.
We need to first select the dropdownlist and then on the edit button click, we need to send the text value into the dropdownlist as its value.
So the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$('.EditBtn').on('click',function(){
// this is the text value you show in label form (before edit)
var lblObj = $("#lblName");
// this is your dropdown while edit mode.
var dropdwn = $("#ddlprincepal");
dropdwn.val(lblObj.html()); // this will bring your text value into the dropdownlist while edit mode.
});
Hope this helps.
i have found the solustion
View//
#Html.DropDownListFor(model => model.PrincipalID, ViewBag.ddlprincepal as SelectList, "--select--", new { #id = "ddlprincepal" })
I'm a server side guy trying to teach myself a bit of CSS, Javascript, jQuery etc. I have written a little test project that loads up a model and displays the values in simple text boxes. Works OK, as you can see:
But of course, I want to display those dates appropriately. So let me change those input types to "date". Here's the Razor code:
#Html.TextBoxFor(m => m.Date, new { #type="date", #id="ondate" })
Well, that worked.... sort of. I mean, it now displays as a date picker... but it's no longer displaying the model's date!
What am I doing wrong?
The type="date" attribute renders the browsers HTML5 datepicker. In order for this to work correctly, the format needs to be yyyy-MM-dd (ISO format), so it needs to be
#Html.TextBoxFor(m => m.Date, "{0:yyyy-MM-dd}", new { #type="date" })
Alternatively you can set data attributes on the property
[DataType(DataType.DateTime)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime Date { get; set; }
and use
#Html.EditorFor(m => m.Date)
which adds the type="date" attribute and uses the correct format.
Side notes:
The HTML5 datepicker is only supported in recent versions of Chrome
Using EditorFor() (in MVC-4) will not allow you to set the id
attribute, but its not clear why you would need to change the
default id="Date" to id="ondate"
Try this:
<%= Html.TextBoxFor(m => m.Date, new { #type = "date", #id = "ondate", #value = Model.Date.ToString("mm/dd/yyyy") })%>
Assume that a model has a datetime datatype.
So in view there will be a blank field ask you to input datetime.
Is there a way to fill this HTML field with today's date/datetime as default value?
model.SomeDateField = DateTime.Now();
return View(model);
Simple
<%: Html.TextBox("date", DateTime.Now.ToShortDateString()) %>
Or use javascript to get the client's browser date. Better yet use jquery's datepicker for nice UI for selecting dates. With it you can also prepopulate the default date:
/**
Enable jquery UI datepickers
**/
$(document).ready(function () {
$(function () {
$(".date-select").datepicker({ dateFormat: 'dd.mm.yy' });
$(".date-select").datepicker($.datepicker.regional['sl']);
});
$(function () {
$("#someDateField").datepicker('setDate', new Date());
});
});
Wanted to add what I found that I needed for filling a datepicker with today's date that was being generated from the DateTime data type in HTML5 (via razor at the view in the value attribute) which is this:
#Html.TextBoxFor(model => model.YourDateInModel, new { #id = "YourDateId", #type = "date",
#Value = DateTime.Now.ToString("yyyy'-'MM'-'dd") })
Note that the ToString() format was necessary to get it to show the date in the datepicker field (it requires a database format).
Source: https://forums.asp.net/p/2154640/6320474.aspx?p=True&t=637376668781782563
Edit: This ended up leaving the database blank/null by itself, so I also had to set the model with the initial value of today's date (as mentioned above).
public DateTime YourDateInModel { get; set; } = DateTime.Now;
In my case I needed both. It may also be helpful to use something like:
$("#YourDateId").prop("disabled", true);
If you are using JQuery/Javascript to prevent changes to the field where applicable.