ejmDatePicker

5 Jun 202319 minutes to read

It displays the date picker element within your web page and allows you to pick the date.

Custom Design for Html DatePicker control.

$(element).ejmDatePicker()

Example

<!-- Unobtrusive way of rendering -->
<input id="datepicker" data-role="ejmdatepicker" />

Requires

module:jQuery
module:ej.core
module:ej.unobtrusive
module:ej.mobile.core
module:ej.data
module:ej.touch
module:ej.mobile.menu
module:ej.mobile.navigationbar
module:ej.mobile.dialog
module:ej.mobile.button
module:ej.mobile.scrollpanel
module:ej.mobile.scrollbar

Members

cssClass `String`

Sets the root class for DatePicker theme. This cssClass API helps to use custom skinning option for DatePicker control. By defining the root class using this API, we need to include this root class in CSS.

Default Value:

””

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-cssclass="customclass" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" />
    <script>
        $(function () {	
            $("#datepicker").ejmDatePicker({ cssClass: "customclass" });
        });
    </script>

dateFormat `String`

Specifies the date format.

Default Value:

null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-dateformat="MMMM dd, yyyy" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" data-role="none" />

    <script>
        $(function () {
            $("#datepicker").ejmDatePicker({ dateFormat: "MMMM dd, yyyy" });
        });
    </script>

enabled `Boolean`

Specifies whether to enable or disable the control.

Default Value:

true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-enabled=false />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" data-role="none" />

    <script>
        $(function () {
            $("#datepicker").ejmDatePicker({ enabled: false });
        });
    </script>

enablePersistence `Boolean`

Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

Default Value:

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-enablepersistence=true />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" data-role="none" />
    <script>
        $(function () {
            $("#datepicker").ejmDatePicker({ enablePersistence: true });
        });
    </script>

locale `String`

Change the DatePicker format based on given culture.

Default Value:

“en-US”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-locale="en-US" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" data-role="none" />

    <script>
        $(function () {
            $("#datepicker").ejmDatePicker({ locale: "en-US" });
        });
    </script>

maxDate `String`

Specifies the maximum selectable date.

Default Value:

null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-maxdate="12/31/2030" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" data-role="none" />
    <script>
        $(function () {
            $("#datepicker").ejmDatePicker({ maxDate: "12/31/2030" });
        });
    </script>

minDate `String`

Specifies the minimum selectable date.

Default Value:

null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-mindate="01/01/2000" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" data-role="none" />

    <script>
        $(function () {
            $("#datepicker").ejmDatePicker({ minDate: "01/01/2000" });
        });
    </script>

renderMode `Enum`

Specifies the rendering mode of the control. SeeRenderMode

Default Value:

auto

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" type="date" data-role="ejmdatepicker" data-ej-rendermode="android" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" type="date" />

    <script>
        $(function () {
            $("#datepicker").ejmDatePicker({ renderMode: "android" });
        });
    </script>

value `String`

Specifies the value.

Default Value:

null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-value="04/23/2010" />

HTML

<!-- Obtrusive way of rendering -->
    <input id="datepicker" data-role="none" />
    <script>
        $(function () {
            $("#datepicker").ejmDatePicker({ value: "04/23/2010" });
        });
    </script>

Methods

disable()

To disable the datepicker

Example

HTML

<input id="datepicker" data-role="ejmdatepicker" />
    <script>
        // changes the DatePicker current state to disabled
        $(function () {
            $("#datepicker").ejmDatePicker("disable");
        });
    </script>

enable()

To enable the datepicker

Example

HTML

<input id="datepicker" data-role="ejmdatepicker" />
    <script>
        $(function () {
            // change the DatePicker current state to enabled
            $("#datepicker").ejmDatePicker("enable");
        });
    </script>

getValue()

Get the current value.

Example

HTML

<input id="datepicker" data-role="ejmdatepicker" />
    <script>
        // get the DatePicker current value
        $(function () {
            $("#datepicker").ejmDatePicker("getValue");
        });
    </script>

hide()

To hide the DatePicker control

Example

HTML

<input id="datepicker" data-role="ejmdatepicker" />
    <script>
        $(function () {
            $("#datepicker").ejmDatePicker("hide");
        });
    </script>

setCurrentDate()

Set the given date.

Example

HTML

<input id="datepicker" data-role="ejmdatepicker" />
    <script>
        // get the DatePicker current value
        $(function () {
            $("#datepicker").ejmDatePicker("setCurrentDate", "12/31/2000");
        });
    </script>

show()

To show the DatePicker control

Example

HTML

<input id="datepicker" data-role="ejmdatepicker" />
    <script>
        $(function () {
            $("#datepicker").ejmDatePicker("show");
        });
    </script>

Events

change

Event triggers when the value is changed while interaction.

Name

Type

Description

argument

Object

Event parameters from datepicker

Name	Type	Description
cancel	boolean	Set true when the event should be canceled, otherwise false.
model	object	Returns the DatePicker model
type	string	Returns the name of the event
value	string	return the DatePicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-change="change" />
    <script>
        function change() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="datepicker" data-role="none" />
    <script>
        //change event for DatePicker
        $("#datepicker").ejmDatePicker({
            change: function (args) {
                //handle the event
            }
        });
    </script>

close

Event triggers when the control is closed after interaction.

Name

Type

Description

argument

Object

Event parameters from DatePicker

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	object	Returns the datepicker model
type	string	Returns the name of the event
value	string	return the datepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-close="close" />
    <script>
        function close() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="datepicker" data-role="none" />
    <script>
        //close event for DatePicker
        $("#datepicker").ejmDatePicker({
            close: function (args) {
                //handle the event
            }
        });
    </script>

focusIn

Event triggers when the input element is focused.

Name

Type

Description

argument

Object

Event parameters from datepicker

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	object	Returns the datepicker model
type	string	Returns the name of the event
value	string	return the datepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-focusin="focusin" />
    <script>
        function focusin() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="datepicker" data-role="none" />
    <script>
        //focusIn event for DatePicker
        $("#datepicker").ejmDatePicker({
            focusIn: function (args) {
                //handle the event
            }
        });
    </script>

focusOut

Event triggers when the input element is focused out or blurred.

Name

Type

Description

argument

Object

Event parameters from datepicker

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	object	Returns the datepicker model
type	string	Returns the name of the event
value	string	return the datepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-focusout="focusout" />
    <script>
        function focusout() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="datepicker" data-role="none" />
    <script>
        //focusOut event for DatePicker
        $("#datepicker").ejmDatePicker({
            focusOut: function (args) {
                //handle the event
            }
        });
    </script>

load

Event triggers when the control is loaded.

Name

Type

Description

argument

Object

Event parameters from datepicker

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	object	Returns the datepicker model
type	string	Returns the name of the event
value	string	return the datepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-load="load" />
    <script>
        function load() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="datepicker" data-role="none" />
    <script>
        //load event for DatePicker
        $("#datepicker").ejmDatePicker({
            load: function (args) {
                //handle the event
            }
        });
    </script>

open

Event triggers when the control is opened for selection.

Name

Type

Description

argument

Object

Event parameters from datepicker

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	object	Returns the datepicker model
type	string	Returns the name of the event
value	string	return the datepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-open="open" />
    <script>
        function open() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="datepicker" data-role="none" />
    <script>
        //open event for DatePicker
        $("#datepicker").ejmDatePicker({
            open: function (args) {
                //handle the event
            }
        });
    </script>

select

Event triggers when date value is selected.

Name

Type

Description

argument

Object

Event parameters from datepicker

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
model	object	Returns the datepicker model
type	string	Returns the name of the event
value	string	return the datepicker value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <input id="datepicker" data-role="ejmdatepicker" data-ej-select="select" />
    <script>
        function select() {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<input id="datepicker" data-role="none" />
    <script>
        //select event for DatePicker
        $("#datepicker").ejmDatePicker({
            select: function (args) {
                //handle the event
            }
        });
    </script>

ejmDatePicker

Example

Requires

Members

cssClass String

Default Value:

Example

dateFormat String

Default Value:

Example

enabled Boolean

Default Value:

Example

enablePersistence Boolean

Default Value:

Example

locale String

Default Value:

Example

maxDate String

Default Value:

Example

minDate String

Default Value:

Example

renderMode Enum

Default Value:

Example

value String

Default Value:

Example

Methods

disable()

Example

enable()

Example

getValue()

Example

hide()

Example

setCurrentDate()

Example

show()

Example

Events

change

Example

close

Example

focusIn

Example

focusOut

Example

load

Example

open

Example

select

Example

cssClass `String`

dateFormat `String`

enabled `Boolean`

enablePersistence `Boolean`

locale `String`

maxDate `String`

minDate `String`

renderMode `Enum`

value `String`