Razor Web Application, Date picker not displaying initial value

[Keith]

How do you get the date picker to display the initial value when it is in a wizard?

This code is from the demo and not inside a wizard so it works:

<div class="demo-section k-content">
        <h4>Show e-mails from:</h4>
        @(Html.Kendo().DatePicker()
              .Name("datepicker")
              .Value("10/10/2011")
              .HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
        )  
</div>

In the following code it is in a wizard and it does not display the initial value. 

 s.Add<Contract>()
                .Title("Email details")
                .Form(f => f
                    .Validatable(v =>
                    {
                        v.ValidateOnBlur(true);
                        v.ValidationSummary(vs => vs.Enable(false));
                    })
                    .FormData(Model.Contractor.Contracts)
                    .Items(items =>
                    {
                        items.Add()
                          .Field(p => p.StartDate)
                          .Label(l => l.Text("Start Date"))
                          .Editor(e =>
                          {
                              e.DatePicker()
                                   .Name("Startdatepicker")
                                   .Value("10/20/2011")
                                   .HtmlAttributes(new { style = "width: 100%", title = "datepicker" });
                          });                      
                    })
                    )
                    .Buttons(b =>
                    {
                        b.Previous();
                        b.Next();
                    });

[Aleksandar]

Hello Keith,

When using the Wizard the DatePicker is bound to the model passed for the Wizard. If the Model property has value it will be bound to the DatePicker. ou can refer to the Wizard Demos available here:

• Wizard Overview Demo
• Wizard Form Integration Demo (contains a DateTime Property with a DatePicker as editor)

In RazorPages scenario you can do the following, for example:

[BindProperty]
        public UserModel UserViewModel { get; set; }


        public void OnGet()
        {

            UserViewModel = new UserModel()
            {
                AccountDetails = new Account()
                {
                    Username = "kev123",
                    Email = "[e-mail]"
                },
                PersonalDetails = new Person()
                {
                    FullName = "Kevin Carter",
                    Country = "Norway",
                    DateOfBirth = DateTime.Now.AddYears(-25)
                }
            };
        }

        public IActionResult OnPost()
        {
            var model = Request.Form;

            if (!ModelState.IsValid)
            {
                return Page();
            }

            return RedirectToPage("Success");
        }


        public class UserModel
        {
            public Account AccountDetails { get; set; }
            public Person PersonalDetails { get; set; }
        }


        public class Account
        {
            [Required]
            public string Username { get; set; }

            [Required]
            public string Email { get; set; }

            [Required]
            public string Password { get; set; }
        }

        public class Person
        {
            [Required]
            public string FullName { get; set; }

            [Required]
            public string Country { get; set; }
            public DateTime? DateOfBirth { get; set; }
            public string About { get; set; }
        }

For the DateTime property you can configure the DatePicker and add the desired configuration the following way:

        s.Add<IndexModel.UserModel>()
            .Title("Personal details")
            .Form(f => f
                .Validatable(v =>
                {
                    v.ValidateOnBlur(true);
                    v.ValidationSummary(vs => vs.Enable(false));
                })
                .FormData(Model.UserViewModel)
                .Items(items =>
                {
                    items.Add().Field(p => p.PersonalDetails.FullName).Label(l => l.Text("Full Name:"));
                    items.Add().Field(p => p.PersonalDetails.DateOfBirth)
                        .Label(l=>l.Text("Date of Birth"))
                        .Editor(e => e.DatePicker()
                            .Animation(a => a.Open(effect => effect
                                .SlideIn(SlideDirection.Down)
                                .Duration(500)))
                            .Format("dd MMMM yyyy")
                            .Max(DateTime.Now));
                    items.Add()
                        .Field(p => p.PersonalDetails.Country)
                        .Label(label => label.Text("Country:"))
                        .Editor(e =>
                        {
                            e.AutoComplete()
                            .DataTextField("Text")
                            .BindTo(new List<SelectListItem>() {
                                new SelectListItem() {
                                    Text = "France",
                                },
                                new SelectListItem() {
                                    Text = "Germany",
                                },
                                new SelectListItem() {
                                    Text = "Italy",
                                },
                                new SelectListItem() {
                                    Text = "Netherlands",
                                },
                                new SelectListItem() {
                                    Text = "Norway",
                                },
                                new SelectListItem() {
                                    Text = "Spain",
                                }
                            });
                        });
                    items.Add()
                        .Field(p => p.PersonalDetails.About)
                        .Label(l => l.Text("About:").Optional(true));
                })
            )
            .Buttons(b =>
            {
                b.Previous();
                b.Next();
            });

In this scenario the Form component is integrated in the Wizard, so you can refer to the Form Items configuration documentation for further details.

I hope the above clarifies how to bind the DatePicker to the model property and it's value.

Regards,
Aleksandar
Progress Telerik