Jquery calender is not working if the razor view is referenced to a view model instead of a model

Question

Hi I am facing a strange issue with Jquery.UI.combined package. I am using it to get a calendar for picking the dates in front end.

It is working very fine when I use it in a view where the view is connected directly with a model, but it does not work when the view is connected with a view model.

Consider the following example:

This is the controller

    public ActionResult New()
    {
        var pm_evt_cats = _context.pm_events_catgrs.ToList();
        var provinces = _context.prvncs.ToList();

        var vm = new PM_InsertEdit_ViewModel
        {
            pm_evt_catgrss = pm_evt_cats,
            prvncs = provinces,                
        };
        return View(vm);
    }

This is the view Model

 public class PM_InsertEdit_ViewModel
{
    public PM_Main_Repository pm_main_rep { get; set; }
    public List<PM_Event_Categories> pm_evt_catgrss { get; set; }

    public List<Provinces> prvncs { get; set; }
    public PM_InsertEdit_ViewModel()
    {
        pm_main_rep = new PM_Main_Repository();
        pm_evt_catgrss = new List<PM_Event_Categories>();
        prvncs = new List<Provinces>();

    }
}

And this is the View:

 @model Myproject.ViewModel.PM_InsertEdit_ViewModel
@{
ViewBag.Title = "New";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("Store","PM"))
{
<div class="form-group">
    @Html.LabelFor(a=> a.pm_main_rep.PM_Event_CategoriesId)
    @Html.DropDownListFor(a=>a.pm_main_rep.PM_Event_CategoriesId, new 
    SelectList(Model.pm_evt_catgrss, "Id","type_of_event"), "Select a category", new { @class="form-control"})
</div>
<div class="form-group">
    @Html.LabelFor(a => a.pm_main_rep.Estimated_Date)
    @Html.TextBoxFor(a => a.pm_main_rep.Estimated_Date, new { @class = "form-control" })
</div>
<div class="form-group">
    @Html.LabelFor(a => a.pm_main_rep.ProvincesId)
    @Html.DropDownListFor(a => a.pm_main_rep.ProvincesId, new SelectList(Model.prvncs, "Id","name_of_province"), "Select a Province", new { @class = "form-control" })
</div>

<button class="btn btn-primary">Save</button>

}

<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />

@section scripts{

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript">
$(function (){
    $('#Estimated_Date').datepicker({
        dateFormat: "dd/MM/yy",
        showOn: "both",
        buttonText : "Select"
    });
    });

</script>
 }

Now if I connect the above view directly to a model, instead of view model then the calendar shows up, but in terms of view model it is not working.

And based on my project requirements, I need to reference my razor view to a view model.

This is my Pm_main_repository

 public class PM_Main_Repository
{
    public int Id { get; set; }
    public PM_Event_Categories PM_Evt_Cat { get; set; }
    public int PM_Event_CategoriesId { get; set; }

    public DateTime Estimated_Date { get; set; }

    public Provinces provncs { get; set; }
    public int ProvincesId { get; set; }
}

Answer 1

As from the above comments.

You need to pass pm_main_rep to your View in your New action method like

var vm = new PM_InsertEdit_ViewModel
{
    pm_main_rep = new PM_Main_Repository(),     //<---
    pm_evt_catgrss = pm_evt_cats,
    prvncs = provinces,                
};

And id attribute for your input field where you are trying to bind datepicker is pm_main_rep_Estimated_Date and you bind datepicker to Estimated_Date . So change your script like.

<script type="text/javascript">

$(function (){
    $('#pm_main_rep_Estimated_Date').datepicker({
        dateFormat: "dd/MM/yy",
        showOn: "both",
        buttonText : "Select"
    });
});

</script>