Date picker MVC 5

http://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine

https://www.nuget.org/packages/Bootstrap.Datepicker

Install-Package Bootstrap.Datepicker




http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4

In Solution Explorer, expand the Views folder, expand the Shared folder, and then right-click the Views\Shared\EditorTemplates folder.
Click Add, and then click View. The Add View dialog box is displayed.
In the View name box, type "Date".  (http://www.aubrett.com/InformationTechnology/WebDevelopment/MVC/DatePickerMVC5.aspx, the view name part is not clear)
Select the Create as a partial view check box. Make sure that the Use a layout or master page and Create a strongly-typed view check boxes are not selected.

Click Add. The Views\Shared\EditorTemplates\Date.cshtml template is created.

below is copied from the reference web pages in case the website not available.

@model Nullable<DateTime>

@{

    DateTime dt = DateTime.Now;

    if (Model != null)

    {

       dt  = (System.DateTime) Model;

    }

    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "form-control datecontrol", type = "date"  })

}

move to our data model. In the case of a user registration form, this is likely going to be found in the "RegisterViewModel" class of "~/Models/AccountViewModels". We want to be sure that the data annotation is set to a type of DateTime as follows:

[Display(Name="Birth Date")]

 [Required]

[DataType(DataType.DateTime)]

public DateTime BirthDate { get; set; }

we move to the "Register.cshtml" view located under "~/Views/Account". The Birthdate field may or may not contain a textbox control. Let's change that just a bit to look like this:
<div class="form-group">

 @Html.LabelFor(m => m.BirthDate, new { @class = "col-md-2 control-label" })

   <div class="col-md-10"> @Html.EditorFor(m => m.BirthDate)

  </div>

  </div>

Now, we will add a script to our "~/Scripts" directory and name it "DatePickerReady.js". Inside this script file, place the following code:
 if (!Modernizr.inputtypes.date) {

    $(function () {

        $(".datecontrol").datepicker();

    });

}

Finally, we will add these javascript files to our "BundleConfig.cs" file located in "~/App_Start". Note that this is how we are getting these scripts loaded in this example. This method will make them global to the project. If only rarely using a datepicker component, you may want to load them only for individual views.

Change the default bootstrap and css bundles to look like this:
 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

                      "~/Scripts/bootstrap.js",

                      "~/Scripts/respond.js",

                      "~/Scripts/bootstrap-datepicker.js",

                      "~/Scripts/DatePickerReady.js"

                      ));



 bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/bootstrap-datepicker3.css",

                      "~/Content/site.css"

                      ));