Razor Web Application, Date picker not displaying initial value

1 Answer 12 Views
Date/Time Pickers
Keith
Top achievements
Rank 1
Keith asked on 14 Oct 2021, 07:41 PM

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();
                    });

1 Answer, 1 is accepted

Sort by
0
Accepted
Aleksandar
Telerik team
answered on 18 Oct 2021, 08:51 AM

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:

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 = "kevin@mymail.com"
                },
                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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Date/Time Pickers
Asked by
Keith
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Share this question
or