Search results

How To

The following section explains how the DatePicker can be easily customizable in various aspects.

Disabled State

To disable the DatePicker, use its enable property.

The following example demonstrates the DatePicker in a disabled state.

tagHelper
<ejs-datepicker id="datepicker" enabled="false"></ejs-datepicker>

Set the placeholder

The following example demonstrates how to set placholder in the DatePicker component.

Using placeholder you can display a short hint in the input element.

tagHelper
<ejs-datepicker id="datepicker" placeholder="Enter date"></ejs-datepicker>

Set the readonly

The following example demonstrates how to set readonly in DatePicker component. You can achieve this by using readonly property.

tagHelper
read.cs
<ejs-datepicker id="datepicker" readonly="true"  value="@ViewBag.value"  placeholder="Enter date"></ejs-datepicker>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class HomeController: Controller
    {
        // GET: /<controller>/
        public IActionResult sample()
        {
             ViewBag.value = new DateTime(DateTime.Now.Year,DateTime.Now.Month,14);
             return View();
        }
    }
}

Prevent the popup close

To prevent the DatePicker popup from closing, use the preventDefault method from the PreventableEventArgs.

The following example demonstrates how to prevent the popup from closing.

tagHelper
popupclose.cs
<ejs-datepicker id="datepicker" close="onClose" placeholder="Choose a Date"></ejs-datepicker>

<script>
   document.addEventListener('DOMContentLoaded', function () {
     var datepickerObject = document.getElementById("datepicker").ej2_instances[0];
       datepickerObject.show();
    });
    function onClose (args) {
        // prevent the popup close
        args.preventDefault();
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class HomeController: Controller
    {
        // GET: /<controller>/
        public IActionResult sample()
        {
             ViewBag.value = new DateTime(DateTime.Now.Year,DateTime.Now.Month,14);
             return View();
        }
    }
}

Focus the DatePicker

You can focus the DatePicker element by using the focusIn method.

The following example demonstrates how to focus the input element.

tagHelper
<ejs-datepicker id="datepicker"  placeholder="Enter date"></ejs-datepicker>

<script>
      document.addEventListener('DOMContentLoaded', function () {
      var datepickerObject = document.getElementById("datepicker").ej2_instances[0];
      document.getElementsByTagName('button')[0].onclick = function () {
      datepickerObject.focusIn();
}
</script>

Blur the DatePicker

You can blur the DatePicker element by using the focusOut method.

The following example demonstrates how to blur the input element.

tagHelper
<ejs-datepicker id="datepicker"  placeholder="Enter date"></ejs-datepicker>

<script>
      document.addEventListener('DOMContentLoaded', function () {
      var datepickerObject = document.getElementById("datepicker").ej2_instances[0];
      datepickerObject.element.focus();
      document.getElementsByTagName('button')[0].onclick = function () {
      datepickerObject.focusOut();
    }
}
</script>

Client side validation

To achieve the client side validation in a DatePicker component by using Essential JavaScript 2 FormValidator. It provides an option to customize the feedback error messages to the corresponding fields to take action to resolve the issue.

In this below example, the required field validation is implemented by mapping the name attribute value to the rules property. It will validate the DatePicker component and display the validation message when the textbox value is empty during form post back or focus out.

tagHelper
validation.cs
<form id="form-element" class="form-vertical">
            <div class="form-group">
                <div class="col-sm-3 control-label">Required</div>
                <div class="col-sm-6">
                   <ejs-datepicker id="datevalue" value="@ViewBag.value" ></ejs-datepicker>
                </div>
            </div>
        </form>
<script>
document.addEventListener('DOMContentLoaded', function () {
	var options = {
		rules: {
			//must specify the name attribute value in rules section
			'datevalue': { required: true }
		},
		customPlacement: (inputElement, errorElement) => {
			//to place the error message in custom position
			//inputElement - target element where the error text will be appended
			//errorElement - error text which will be displayed.
			inputElement.parentElement.parentElement.appendChild(errorElement);
		}
	};
	var formObject = new ej.inputs.FormValidator('#form-element', options);
});

</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class HomeController: Controller
    {
        // GET: /<controller>/
        public IActionResult sample()
        {
             ViewBag.value = new DateTime(DateTime.Now.Year,DateTime.Now.Month,14);
             return View();
        }
    }
}