| layout | title | description | platform | control | documentation | api |
|---|---|---|---|---|---|---|
post |
Customization in JavaScript DatePicker | Syncfusion |
Learn here about Customization with Syncfusion Essential JavaScript DatePicker control, its elements, and more. |
js |
DatePicker |
ug |
/api/js/ejdatepicker |
DatePicker provides more flexible way to customize the below listed properties.
By default DatePicker has standard height and width (height: ‘30px’ and width: ’143px’). You can change this height and width by using height and width property respectively.
{% highlight javascript %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
height: '50px', // sets height as 50 pixel
width: '300px'// sets width as 300 pixel
});
});
{% endhighlight %}
Mostly dimension plays a vital role in web application to get responsive layout in all devices. DatePicker is a form control and you can make it as responsive by specifying its width as “100%".
{% highlight javascript %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
width: '100%'// sets width as 100 percentage
});
});
{% endhighlight %}
You can show or hide the footer of DatePicker calendar by using showFooter property.
{% highlight javascript %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
showFooter: false // hides the footer in DatePicker calendar
});
});
{% endhighlight %}
N> Footer contains the today button to quickly navigate to the current date. By turning off it, you have to select current date by manually.
DatePicker textbox contains a button to open the DatePicker calendar. You can hide this DatePicker calendar button using showPopupButton value as false.
By hiding this button, you can open the DatePicker by focusing the input textbox element itself.
{% highlight javascript %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
showPopupButton: false // hides the DatePicker calendar button
});
});
{% endhighlight %}
You can show or hide the other month days from DatePicker calendar by using showOtherMonths property.
{% highlight javascript %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
showOtherMonths: false // hides the days of other months in DatePicker calendar
});
});
{% endhighlight %}
DatePicker allows you to highlight the special dates in DatePicker calendar by using specialDates property. It receives the array of JSON data, in which the data should contain the date value, icon CSS class and tooltip as field values with any names.
{% highlight javascript %}
var data = [{ specialdate: "28/06/2015", customClass: "birthday", tooltip: "xxx birthday" }]
{% endhighlight %}
And you can map those above field names to DatePicker by using fields property, which holds following members.
| Members | Description |
|---|---|
|
date |
It specifies the mapping field of special date |
|
iconClass |
It specifies the mapping field of icon CSS class. |
|
tooltip |
It specifies the mapping field of tool tip text. |
// assign special date values in local variable data
var data = [{ specialdate: "28/06/2015", customClass: "birthday", tooltip: "xxx birthday" }]
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
specialDates: data, // date values in data variable assigned to specialDates
fields: { date: "specialDate", iconCSS: "customClass", tooltip: "toolTip" }
// mapping special date fields
});
});
{% endhighlight %}
You can displays DatePicker calendar along with DatePicker input field in Right to Left direction.You can utilize this option by make use of enableRTL property.
{% highlight javascript %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
enableRTL : true //DatePicker input field in Right to Left direction.
});
});
{% endhighlight %}
HighlightSection is used to highlight currently selected date’s month/week/workdays. See below to get available HighlightSection options.You can utilize this option by make use of highlightSection property.
{% highlight javascript %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
highlightSection: "week" // hides the days of other months in DatePicker calendar
});
});
{% endhighlight %}
highlightWeekend is used to Weekend dates will be highlighted when this property is set to true. See below to get available highlightWeekend options.You can utilize this option by make use of highlightWeekend property.
{% highlight javascript %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
highlightWeekend:true // highlight the weekend in DatePicker calendar
});
});
{% endhighlight %}
You can make use of showRoundedCorner property in order to add rounded borders to the input and popup elements. By default, in DatePicker this will be disabled state we can enable this by setting true to this API.
// creates DatePicker and setting rounded corner dynamically
{% highlight html %}
$("#datepicker").ejDatePicker();
dateObj = $("#datepicker").ejDatePicker("instance");
dateObj.option("showRoundedCorner", true);
{% endhighlight %}
You can make use of ShowDisableRanges property its used to allow show/hide the disabled date ranges
{% highlight html %}
$(function () {
// creates DatePicker from input
$("#datePicker").ejDatePicker({
showDisabledRange: false // hides the disable ranges in DatePicker calendar
});
});
{% endhighlight %}