A date picker for ionic framework applications

How do you want to change the format? I mean what kind of format you are planning about?

For example: dd.mm.yyyy, also it will be nice to have another week format support like “M”, “T”, “W”, “T”, “F”, “S”, “S”

The week support is already there. You can have a look at the github repo for the latest version. And displaying the date on the button is completely independent of this component. Use can use date filter of angular to display the date in the format you wish.

Ok, thankx, ill try :slight_smile: And great plugin )

Edit: I understand how to chage button date-format, but what about picker itself?

Hi Rajesh… Firstly thank you for this plugin… Just a small question. I am trying to use 2 date boxes in my project (for start date and end date) and want my end date to start from start date. I tried using start date scope variable as a ‘from’ in end date object but still its starting from today’s date no matter whichever future start date I select.

$scope.startDateObject = {
titleLabel: ‘Title’, //Optional
todayLabel: ‘Today’, //Optional
closeLabel: ‘Close’, //Optional
setLabel: ‘Set’, //Optional
setButtonType : ‘button-assertive’, //Optional
todayButtonType : ‘button-assertive’, //Optional
closeButtonType : ‘button-assertive’, //Optional
inputDate: new Date(), //Optional
mondayFirst: true, //Optional
// disabledDates: disabledDates, //Optional
//weekDaysList: weekDaysList, //Optional
//monthList: monthList, //Optional
templateType: ‘popup’, //Optional
showTodayButton: ‘true’, //Optional
modalHeaderColor: ‘bar-positive’, //Optional
modalFooterColor: ‘bar-positive’, //Optional
from: new Date(), //Optional
//to: new Date(2018, 8, 25), //Optional
callback: function (val) { //Mandatory
if (typeof(val) === ‘undefined’) {
console.log(‘No date selected’);
} else {
console.log('Selected date is : ', val);
$scope.startDateObject.inputDate = val;
}
}
};

$scope.endDateObject = {
  titleLabel: 'End Date',  //Optional
  todayLabel: 'Today',  //Optional
  closeLabel: 'Close',  //Optional
  setLabel: 'Set',  //Optional
  setButtonType : 'button-assertive',  //Optional
  todayButtonType : 'button-assertive',  //Optional
  closeButtonType : 'button-assertive',  //Optional
  inputDate: $scope.startDateObject.inputDate,    //Optional
  mondayFirst: true,    //Optional
  //disabledDates: disabledDates, //Optional
  //weekDaysList: weekDaysList,   //Optional
  //monthList: monthList, //Optional
  templateType: 'popup', //Optional
  showTodayButton: 'true', //Optional
  modalHeaderColor: 'bar-positive', //Optional
  modalFooterColor: 'bar-positive', //Optional
  from: $scope.startDateObject.inputDate,   //Optional
  //to: new Date(2018, 8, 25),    //Optional
  callback: function (val) {    //Mandatory
    if (typeof(val) === 'undefined') {
        console.log('No date selected');
     } else {
    console.log('Selected date is : ', val);
    $scope.endDateObject.inputDate = val;
    }
  }
} 

What am I missing ??

Hi Rajesh, I am having a few problems with closeOnSelect option. that options doesn’t work well, I have been modifying the code of directive but when I do click on the button to open a modal, the watcher of date detect a change and close the modal automatically.

Thanks…

Muchas gracias es un excelente trabajo!!!

The closeOnSelect is not yet available in the last release. This feature will be available in the next release. Planning to make some more changes in the current functionality and UI.

Have you been able to get around this problem?

I’m also trying to use two datepickers, one as a “Start Date” and the second one as “End Date”, and I’d like the End Date datepicker’s “inputDate” and “from” attributes change with respect to the selected Start Date (e.g. the End Date should never be set to an earlier date than Start Date).

Edit: I just noticed this has been discussed in Issues at the date picker’s github e.g. here and can be simply resolved by using the Master version of the component, not the latest tagged release (v0.9.0). For anyone wondering how to do this, I used the latest commit on Master:
bower install --save https://github.com/rajeshwarpatlolla/ionic-datepicker.git#fada1dc1386843cdb6bac768a8823edae46d28f9

Please check the new version v1.0.0. This new version has lots of features and lots of bug fixes.

A new version has been released with few bug fixes. Please take a look at the new version v1.1.0

Hi Rajesh,
I’m newbie with ionic and angularJS.
I have followed your document, but when I inject ionicDatePicker in the controller
it error:

Error: [$injector:unpr] Unknown provider: ionicDatePickerProvider <- ionicDatePicker <- merchantProfileCtrl

merchantProfileCtrl is my controller

How can I fix it ?
THanks in advanced

You need to add the ionic-datepicker.bundle.min.js file of this plugin in to the index.html. Also please cross check the steps i mentioned in the documentation.

Hi, @rajeshwarpatlolla I tried using your datepicker. It works perfectly on the browser preview. But when I test it on a device my app just wont start. It shows the splash screen and then a white screen. The debug log says:

‘Error: [$injector:unpr] Unknown provider: ionicDatePickerProvider’

I have followed the steps from your github page here but I couldnt find anything on why it doesnt work.

Im running Ionic 1.3.0

Also, is there a way to change the color of the header or footer?

Thanks in advance.

I think you might be missing some dependency injection. Please cross check the steps mentioned at github repo.

I found my error, thanks!

Thanks for this amazing date picker

I want to ask if there is a way to put this date picker in specific area instead of his default behavior to control the all screen?

(Maybe delimit the ion-nav-view area?)

@yossibbc, Where exactly you want to place this component?

Here:

You can clone this repo and customise it, so that it fits this particular need. Or else you can use the modal of this component.