We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to get value from datepicker into the page model in a RazorPage?

My question is How can I get selected date data from <ejs-calendar> into my page model to post to the next page?

There is something basic I´m missing since I´m new to RazorPages.

I have tried different variations without luck
  • <ejs-calendar id="IndexPageModel_PickUpDate" name="IndexPageModel.PickUpDate"></ejs-calendar>
  • <ejs-calendar id="IndexPageModel_PickUpDate"  asp-for="IndexPageModel.PickUpDate"></ejs-calendar>
  • etc.

Here is my code that works.

-- cshtml
@page
@model IndexModel

<form method="post" name="Index" id="Index">
    <label asp-for="IndexPageModel.PickUpDate" class="control-label"></label>
    <input asp-for="IndexPageModel.PickUpDate" class="form-control" />  (this is the line I'm trying to swap out for your ejs control)
    <span asp-validation-for="IndexPageModel.PickUpDate" class="text-danger"></span>
   
    <div class="form-group">
          <input type="submit" value="Next step" class="btn btn-primary" asp- />
      </div>
</form>

-- cshtml.cs
    public class IndexModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public IndexPageModel IndexPageModel { get; set; }

        public IActionResult OnPost()
        {
            if (!ModelState.IsValid) return Page();

            return RedirectToPage("./NextPage", IndexPageModel);
        }
    }

-- cs
    public class IndexPageModel
    {
        [Display(Name = "Pickup date")]
        [DataType(DataType.Date)]
        [Required(ErrorMessage = "You need to fill this out")]
        public DateTime PickUpDate { get; set; }
    }


5 Replies

AB Ashokkumar Balasubramanian Syncfusion Team April 15, 2019 11:28 AM UTC

Hi Robert Leifsson, 
 
For your information, the calendar control is not a form control. So, we can’t obtain the selected value in form post from the code behind by using for extension. Also, Calendar component will render in div element which by default has no value attribute which is used to set or post the selected value from view to controller.  
However, we have prepared a solution from which you can obtain the selected value in code behind. Please, find the code sample below which will help you on obtaining the calendar value in code behind.  
[index.cshmtl] 
@model CoreEJ2.Controllers.HomeController.DateRange 
<form id="form1" method="post"> 
    <ejs-calendar id="calendar" value="Model.value" change="onChange"> 
        <input type="hidden" id="hide" name="value" /> 
    </ejs-calendar> 
    <button>Submit</button> 
</form> 
 
 
<script> 
 
    function onChange(args) { 
        Values(args); 
    } 
    function Values(args) { 
        var  option = document.getElementById("hide"); 
        option.value = ""; 
        var calendar = (args.type === undefined) ? args : args.type; 
        if (calendar.value) { 
            option.value = calendar.value.toDateString(); 
        } 
            document.getElementById('form1').appendChild(option); 
    } 
</script> 
 
[HomeController.cs] 
public class DateRange 
{ 
    public DateTime? value { get; set; } 
} 
DateRange Instance = new DateRange(); 
public IActionResult Index() 
{             
    Instance.value =  DateTime.Now; 
    return View(Instance); 
} 
         
[HttpPost] 
public IActionResult Index(string val) 
{ 
    //request to get the post data from the form post from value  
    string value = Request.Form["value"]; 
    //converting string value to DateTime object  
    Instance.value = Convert.ToDateTime(value); 
    return View(Instance); 
} 
 
 
We have demonstrated this requirement in below sample, please find it. 
 
Please let us know, if you need any further assistance on this. 
 
Regards, 
Ashokkumar B. 



RL Robert Leifsson April 16, 2019 09:21 PM UTC

Thanks for the answer. One quick question

I changed this to <ejs-datetimepicker> and am having problem getting the localization right.

How can I change the default date value from mmddyy to ddmmyy? Just setting my localization globally to is-IS would be greate.

Hope you can help.


AB Ashokkumar Balasubramanian Syncfusion Team April 17, 2019 10:31 AM UTC

Hi Robert Leifsson, 
 
Our DataTimePicker component, we have provided the format property for specify the date format displayed in UI. You can use this property to change the format as like ddmmyy. By default, the format is based on the culture. 
 
 
If you set localization is “is-Is” culture, corresponding culture specific format will be applied in DateTimePicker component. 
 
Please follow the below UG document to install the cldr-data package then follow the step by step procedure to apply the globalization for DateTimePicker component. 
 
 
<ejs-datetimepicker id="datetimepicker"></ejs-datetimepicker> 
 
<script> 
    document.addEventListener('DOMContentLoaded', function () { 
        datetimepicker = document.getElementById('datetimepicker').ej2_instances[0]; 
        var L10n = ej.base.L10n; 
        L10n.load({ 
            'is': { 
                'datetimepicker': { 
                    placeholder: 'Veldu dagsetningu tímans', 
                    today: 'í dag' 
                } 
            } 
        }); 
        datetimepicker.locale = 'is'; 
        loadCultureFiles('is'); 
        
    }); 
 
    function loadCultureFiles(name) { 
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
        if (name === 'ar') { 
            files.push('numberingSystems.json'); 
        } 
        var loader = ej.base.loadCldr; 
        var loadCulture = function (prop) { 
            var val, ajax; 
            if (name === 'ar' && prop === files.length - 1) { 
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false); 
            } else { 
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 
            } 
            ajax.onSuccess = function (value) { 
                val = value; 
            }; 
            ajax.send(); 
            loader(JSON.parse(val)); 
        }; 
        for (var prop = 0; prop < files.length; prop++) { 
            loadCulture(prop); 
        } 
    } 
 
</script> 
 
Sample Link: 
 
 
Please let us know, if you need any further assistance on this. 
 
Regards, 
Ashokkumar B. 



RL Robert Leifsson April 18, 2019 12:48 PM UTC

Thank you so much for your help. This will really help me get quickly up and running with Syncfusion.

But I have a small problems with how this all works.

I created a small GitHub repo with (which you can take freely and use/change and use as how ever you like).

But my issues are
  1. If I choose some day and time and then click another input the value in the picker will show something like "4.20.2019 un20efine20" (undefined)
  2. I can't find out how to use both the placeholder text (for the first time I come to the page) and a selected date when I go back to that page for the second time.
  3. And if I use value="Model.IndexPageModel.SomeAwesomeDate" in the picker the culture js does not kick in.
I really appreciate the help

UPDATE: I did a update to the GitHub project to reflect what I have been learning in RazorPages. I hope that does not mess anything up for somebody that is answering this for me :-)


AB Ashokkumar Balasubramanian Syncfusion Team April 23, 2019 12:11 PM UTC

Hi Robert, 
 
While run the provided sample, we could not reproduce the reported issue at our end. So, we have prepared and attached the video demonstration. Can you please check the provided video and share any video demonstration to show case the issue faced at your end and also share the Syncfusion product version that will help us to check and provide the exact solution? 
 
Please find the video from the below link. 
 
 
Also, DateTimePikcer is a form control and you can get the values in the form post as like in the below demo sample. 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashok. 


Loader.
Live Chat Icon For mobile
Up arrow icon