ejmDatePicker

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

  • html
  • <!-- 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>