Working with Datetime & date picker

Question

I want to test the data picket on my asp.net mvc web application.

1.So I created the following test model:-

public class TestClass
    {
        [DataType(DataType.Date)]
        public DateTime D { get; set; }
    }

2.I added the following script:-

  $(function () {
    $(".datefield").datepicker();
});

3.And on my view I have the folliwng :-

@model MvcApplication6.Models.TestClass


@Html.EditorFor(item=>item.D)

Now the calender will be displayed well, but I have these two problems:-

1.If inside the action method I specify the data time to equal today date as follow:-

 public ActionResult Index()
            {
                TestClass t = new TestClass();
               t.D = DateTime.Now.Date;

                return View(t);
            }

Then the calender it will switch the day & month, so 12 june become 6 december as follow:-

2.If I remove the dataitme to be equal to today date I will get the following default value:-

01/01/0001

3.If I specify the datetime to allow null, and i do not specify any defualt value I will get the following exception

[DataType(DataType.Date)]
        public DateTime? D { get; set; }

The model item passed into the dictionary is null, but this dictionary requires a non-null model item of type 'System.DateTime'.

So can anyone advice on what is causing these three problems ? Thanks

EDIT Ok i changed my property to be String instead of date-time , as follow:-

[DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public string CreateDate { get; set; }

But this did not solve the data validation , and still i can not enter date such as 26/06/2014 !! so i try to remove the [DataType(DataType.Date)] so my property becomes:-

    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public string CreateDate { get; set; }

but in this way the date picker will not be populated,, since the date picker is defined to get populated on fields of type date,, i think i am missing something , in my understanding to the way things should work ??

Answer 1

The main problem is localization. The datepicker widget takes by default the localization set by your browser, which I'm guessing is set to "English US" and has the date format as "MM/DD/YYYY". The documentation specifies that the default date format of the widget is "mm/dd/yy". Please note that the date format of the jQuery DatePicker is different from that used by the .Net Framework. Change the constructor:

$(function () {
    $(".datefield").datepicker({ dateFormat: "dd/mm/yy" });
});

The problem however will shift to the jQuery Validation plugin, which might not understand what's happening. You can get around by either writing your own validation method and overwriting the default one, or using strings instead of actual dates.

---

EDIT (addressing your edit):
Please checkout this fidlle. I'm not doing anything special to it. There's just an input element with a specific value "13/06/2014" (June 13th 2014). When you click inside the input, the jQuery Datepicker pops-up and has the correct date selected.

You now have a string property in your model. You don't need to have any other data annotations that refer to DateTime objects. Razor will create an input element for your property and set the value inside. That's it. The only thing that you need to do, is to convert the actual DateTime object, loaded from the database, with the appropriate format:

public ActionResult DisplayMyData()
{
    MyModelType model = new MyModelType();
    DateTime createDateDBObject = //get the date from your database

    model.CreateDate = createDateDBObject.ToString("dd/MM/yyyy");
    //or, for setting the current date
    //model.CreateDate = DateTime.Now.ToString("dd/MM/yyyy");

    return View(model);  
}

This next fiddle shows you how to make your input as readonly. This means that the user cannot directly type in a date. They must use the Datepicker instead. Which in turn means that you will always have the correct date format ("dd/MM/yyyy") returned to the controller.

---

EDIT no. 2 (addressing the template) I'm actually glad you created your own template for DateTime. This is what I always do and requires little effort for solving a relatively big problem. In our (your) case, this makes things even simpler. What you need to do is to tell the Razor engine to use the template you wrote for the DateTime objects. For this, just add a DataType attribute to every property that represents a "string date":

[DataType("your_template_name")]
public string CreateDate { get; set; }

Additionally, if in your template you set @model DateTime please change to @model string. If you intend to use classes as selectors for jQuery ($(".datefield")) make sure that your template sets the class on every input.

Answer 2

1) Problem

cause :your browser/JQUI take by default dd/mm/yy and you are passing mm/dd/yy format .

there fore this problem occured Solution

public ActionResult Index()
            {
                TestClass t = new TestClass();
               t.D = DateTime.Now.ToString("MM/dd/yyyy");

                return View(t);
            }

OR same as @andri

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

2)If I remove the dataitme to be equal to today date I will get the following default value:

cause :You take date time as datatype .therefore you cant assign any value then it will take by default 01/01/0001

Solution Assign value ,same as 1 solution

3)cause you give date time datatype there fore it needed any value as date time format

Answer 3

You can change date to desired formats in action results as per below:

public ActionResult Index()
            {     
TestClass t = new TestClass();
            string dt = DateTime.Now.ToString("MM/dd/yyyy");
            t.D = DateTime.ParseExact(dt, "d/MM/yyyy", null, System.Globalization.DateTimeStyles.None);
            return View(t);
}