Hello Readers,

Today's post is about add datepicker in Cordova application. We have an date picker plugin which supports Android,iOS and windows platform.

Install following plugin through CLI :

$ cordova plugin add cordova-plugin-datepicker

To use this plugin functionality Cordova version should be more than 3.0, Android version should be more than 2.3 and iOS version should be more than 6.0.

Example:

index.html

<ion-view view-title="Date picker">
    <ion-content class="has-header">
        <div class="row">
            <div class="col col-50">
                <button class="button button-block button-balanced"
                               ng-click="show()">
                       Calender
                </button>
            </div>
        </div>
    </ion-content>
</ion-view>

controller.js

$scope.show = function()
{
    var options = {
        date: new Date(),
        mode: 'date'
    };

    function onSuccess(date) {
        alert('Selected date: ' + date);
    }

    function onError(error) {
        alert('Error: ' + error);
    }

    datePicker.show(options, onSuccess, onError);
}

In the above code we are using date and more parameter in options. We can add more parameters in options are as follows:

• mode : This works in Android, iOS and windows. It defines the mode of datepicker i.e mode is a string type parameter.

For example: Its default type is date and for iOS and Windows it can be date, time and datetime.

• date : date is a string type parameter and works on Android, iOS and windows.

For example: We can define a date in string format and by default it is new date().

• minDate : We can define minimum date with this parameter and minDate is a date object for iOS and for Android it is timestamp in milliseconds. So when we are using it in Android we need to get time in milliseconds.
• maxDate : It shows maximum date and it can be date or empty string. It works on Android, iOS and windows.

• titleText : It works on Android and provides a label for the title. It uses set date or set time. Which should be a string.

These are some parameters in options for more details click here .

Hope this will help you. :)