Override default date of JqueryUi datepicker - c#

I have a datepicker on a page as
#Html.TextBoxFor(m => m.ProposedLaunchDate, new { #class = "dateselector", #style = "float:left;" })
(This is using the Javascripts from JQueryui.com)
In my model the variable to hold the date is a string (for specific reasons), as
public string ProposedLaunchDate { get; set; }
On saving I can save my selected date well.
However on redisplaying , in the model I get the value I saved,but on the form the date-picker is taking today's date (and not displaying the value in my model)
Why so ?
How can I correct this ?

By default, jQuery datepicker will show currentDate as selected. Inorder to set our custom date to datepicker, you have use the option called setDate provided by datepicker.
$(".dateselector").datepicker('setDate', '04/11/2014');
|
Make sure about the dateFormat__________|

Related

Nullable Datetime in .NET CORE MVC

I have a view which is used for "Create" and "Update" a database model. The database model has a property which is a DateTime? (nullable). Now I am trying to use this nullable datetime in an ASP.NET Core MVC view which looks like the following:
#Html.TextBoxFor(model => model.MyNullableDate,"{0:dd.MM.yyyy}", new { placeholder = "dd.MM.yyyy", #class = "form-control form-control-sm", type = "date" })
This works very well for the "Create" process. If a date is set, it is written correctly into the database. But now I want to update the already existing database value model.MyNullableDate.
I read the value from the database and pass the value again to the view. The property MyNullableDate is set correctly and I saw in the debugger that the correct date is written into it.
But in the view, nothing is shown... it's only an empty textbox without the passed in value of MyNullableDate.
The property looks like this:
[DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}")]
[DataType(DataType.Date)]
public DateTime? MyNullableDate{ get; set; }
What am I doing wrong? How can I show the value of MyNullableDate in the TextBoxFor?
This is related to the date format rather than the nullability.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
The displayed date format will differ from the actual value — the
displayed date is formatted based on the locale of the user's browser,
but the parsed value is always formatted yyyy-mm-dd.
When I passed the format as below, the date displayed :)
#Html.TextBoxFor(
expression: model => model.MyNullableDate,
format: "{0:yyyy-MM-dd}",
htmlAttributes: new
{
placeholder = "dd.MM.yyyy",
#class = "form-control form-control-sm",
type = "date"
})

Why storing the date like dd-MMM-yyyy is getting converted to dd-MM-yyyy?

I have a very different kind of problem.
I have deployed my mvc application to live server.
It has date time format like this '01/07/2019'.
I have a textbox which is populated from jquery datetimepicker. It populates like this 27/Jul/2019 but in sql table it stores like 2019-07-17 00:00:00.000
and after binding the data from database to textboxfor, it appears like this 27-07-2019.
And upon saving it throws error for all the dates that are greater than 12 as a day e.g. 13/07/2019 but for 13/Jul/2019 it works good.
how to tackle this?
#Html.EditorFor(model => model.InspectionReport.InspectionDate, new { htmlAttributes = new { #class = "form-control input-sm pull-right text-box single-line" } })
jquery:
$("#InspectionReport_InspectionDate").datepicker({ dateFormat: 'dd/M/yy' });
class:
[Required]
[Display(Name = "Inspection Date")]
[DisplayFormat(DataFormatString = "{0: dd-MMM-yyyy}")]
public DateTime InspectionDate { get; set; }
In a date field of data type DateTime(2), a date value is stored as a value with no format.
Thus, to display the value, apply the format you wish, or a default format will be applied.
Try this,
#Html.TextBoxFor(model => model.InspectionReport.InspectionDate, "{0:dd-MMM-yyyy}", htmlAttributes: new { #type="date" })

Get values to time span type using TimePicker and razor in ASP.NET MVC

I have a model that contains attribute of type TimeSpan:
public TimeSpan Time { get; set; }
I want the user to enter values using a form to get the time span. I'm using timepicker lib and razor #Html.EditorFor.
The problem is that the attribute Time always gets the default values. I searched for this problem and some people talked about changing the time format but I didn't know how to do it
The html looks like this
#Html.EditorFor(b => b.Time, new { htmlAttributes = new { #id = "time", #class = "form-control timepicker", #required = "" } })
when running the input looks like this:
html timepicker lib
How can I use the timepicker and razor in a simple way to get values for time span?

Time field receiving value from database, yet not showing

A form I'm working on uses DateTime values to represent a time property (TimeStart). I've got a viewmodel (CourseSectionSessionViewModel) with a corresponding editor template.
The viewmodel:
public class CourseSectionSessionViewModel
{
[Display(Name = "Start Time")]
[DataType(DataType.Time)]
[DisplayFormat(DataFormatString = "{0:hh:mm tt}", ApplyFormatInEditMode = true)]
public DateTime TimeStart { get; set; }
}
The editor template:
<tr>
<td>#Html.EditorFor(model => model.TimeStart, new { htmlAttributes = new { #class = "form-control", #data_val = "false" } })</td>
</tr>
Both above have extraneous items excluded for brevity.
This results in the following image, which shows the fields, and the inspector indicates the fields have been populated (and debugging with Visual Studio confirms the actual data are coming from the DB), yet the visual looks like a default value.
The actual value seems to be getting added to the form field, yet the field is not evidently showing the value. Any suggestions?
The format is 'HH:mm', 'HH:mm:ss' or 'HH:mm:ss.SSS' where HH is 00-23, mm is 00-59, ss is 00-59
Don't Pass 10:30 AM. Instead Pass value as 10:30 only

auto-mapping of element in view to model from type dateTime

I have value of text box with some date time format (the default that DatePicker supplies - for example - 01/23/2014).
<input type="text" name="OrderDate" value="" id="OrderDate" class="datepicker field field119 datepicker-init" />
I have correlative Property in the model class with the same name and ID as the element in the view.
public DateTime OrderDate { get; set; }
at this point everything is matched and once submit I get the right value in my controller.
Now - I'd like to change the default DatePicker format -
for example:
$(".datepicker").datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy'
});
and I fail to "explain" the model proprty how to serlizae the text box value - instead I get the default DateTime and not my time.
the question : how to change the text box date format that the DateTime property will know how to serialize that?
Ok, here is how you get this working.
Firstly jQuery UI formats the date you need using dd/mm/y, so you need to change your javascript to this:
$(".datepicker").datepicker({
minDate: 0,
dateFormat: 'dd/mm/y'
});
See jsFiddle here:
http://jsfiddle.net/hutchonoid/Fa8Xx/1376/
Then you need to format the model date in the view, you can do this like so:
#Html.TextBoxFor(m => m.OrderDate, String.Format("{0:dd/M/yy}", Model.OrderDate),
new { #class = "datepicker field field119 datepicker-init" })
This works nicely with model binding to when posting the date back to the server.

Categories