Thanks for this :)
Just wanted to inquire if there are any plans of selecting a year?
e.g. to set birth date (think 20, 30, 40 years back)

Hi,

I have two problems :

I am not able to disable today's date in the datepicker:

$scope.disabledDates = [
     new Date()
];

Today's date can still be picked.

2. Because I do not want users to be able to select today's date, is there a way to remove the "today" button with a directive ?

Thank you for your help !

It would be nice to be able to also input time.

ios is selected not work

Hey,

I have a problem setting dates:

1. open datepicker. Todays date is set (e.g. 2015-07-20)
2. change month (e.g. april)
3. change day (e.g. 10)
4. change year (e.g. 1988)

Month and day will be set correctly, but the year still is 2015. I also tested it with your demo and different variations. I have to set the day last, then it works.

Do we have option to limit future date selection. For example user can only select future date for next month not after that?

When you select the year in iOS, nothing happens. You need to tap outside the select component to get the year select reflect in the picked date.

Also, when you select the Today button, the date gets picked in the calendar, but not in the selected date, which, for me, was the expected behaviour:

Otherwise, great component :-)

Great directive. The ability to use a date for disablePreviousDates and disableFutureDates instead of a boolean so you could use two calendar directives and build a valid range. Would allow the start date directive to use end date directive date as disableFutureDates, and end date directive to use the start date directive to as disablePreviousDates. All sync'ed from a parent controller declaratively using controller $scoped members, so just need ability to set as a date.

In some regions, Monday is the first day of the week. So, it would be nice to be able to customize the view to start from the Monday.

Was wondering how you'd suggest opening the timepicker modal after a user is done setting their date from the datepicker modal.

As discussed
http://forum.ionicframework.com/t/looking-for-a-responsive-date-picker-with-multi-date-selection/12143

Default ionic popup window width is too small

Thanks

Hello,
I'm using your great date picker (in popup mode).
I think there are 2 bugs I discovered.

1. If not specifying "inputDate" at the creation of the object - Setting the inputDate of the control later at "run time" - somewhere in the controller code (view beforeEnter for instance) does not do any effect - it stays on "today" (both in the SelectedDateFull and in the calendar) - I took a look at the code - I think the following lines:

   //Setting the input date for the date picker
   if (scope.inputObj.inputDate) {
   scope.ipDate = scope.inputObj.inputDate;
   } else {
   scope.ipDate = new Date();
   }
   scope.selectedDateFull = scope.ipDate;

should be moved to the "click" event - to be set just before the view pops up.

1. Even if setting the InputDate at the object creation - the selectedDateFull gets updated - but the calendar still stands on today.

I'll appreciate your fixes - or tell me if I'm doing anything wrong.

Thanks,
Eddy

Hi,

It would be better to integrate with build tools like Webpack if the dist directory contained a single ionic-datepicker.bundle.js instead of multiple *.js files.

Thanks,

Hi, your date picker had been very useful to my development, but I have a little issue.

I set the value of the datepicker from a timestamp that i get from a service. The datepicker set the date, but when I want to change the model value I get this on javascript console:

 e.setHours is not a function

This is my code

 var mydate=$scope.orden.fecha_tope; // formated 2012-02-02
 $scope.orden.currentDate=Date.parse(mydate.replace(/-/g,"/")); //Update the model of the datepicker

Template:

        <ionic-datepicker idate="orden.currentDate" disablepreviousdates="true"  callback="datePickerCallback">
         <button class="button button-block button-positive" type="button"> {{ orden.currentDate | date:'dd - MMMM - yyyy' }} </button>
           </ionic-datepicker>

What can I do to fix this?

Thanks a lot!

Hi, thanks your great work.
And I find bug when open ionic-datepicker, then widows history back, the ionicPopup still shown. How can I close ionic-datepicker programmlly?

Hi all,

I have the following issue with the datepicker:

Once I selected a month or a year from the select boxes and then change the months via the buttons (prevMonth and nextMonth) then the select boxes will not update to the selected month or year any longer.

Can anyone confirm this? Or know a possible solution for this?

Regards
Michael

Implement a opposite of "disablepreviousdates" for future dates, say "disablefuturedates" to disable future dates, useful for date of birth scenarios.

It seems as though there is an issue with disabling a date - where when you try tapping on this disabled date, the :hover style (which is a light blue colour) is applied to the cell, regardless of whether or not this cell is selectable. Maybe this is a feature, but the concern is this may confuse a user, letting them think this cell is selected.

To replicate, use modal version of datepicker, disable a date or date range, open up an app in iOS (simulator or device) and select this disabled date - you will see the light blue selected style applied, and it will persist until you click on another cell.

Hi,

Disabled dates conditions:

1. fromDate == null -> disabledDates < sysDate (in fromDate)
2. fromDate != null -> disabledDates <= fromDate (in toDate)

If the user clicks on the empty cells rapidly, the dates on top will be set to empty dates.

Hi

I am a fan of this component, a feature request would be to enable just the month selection, and hide weekdays and monthdays.

Maybe just with variables called :disableWeekdays and disableMonthDays: maybe just in this way :

How do i set idate attribute after an ajax request (and after the template gets loaded)?
If I have something like

MyService
.getSomeData()
.then(function(response)) {
$scope.datepickerdate = response.date;
}

in my controller and

<ionic-datepicker idate="datepickerdate" ...

in my template, this datepickerdate is never set, because the idate attribute is "loaded" together withe the controller. In other words, I needed to set this attribute with a date that comes from my backend app.

for example

<ionic-datepicker ng-model="vm.currentDate" >
    <button class="button button-block button-positive"> {{ vm.currentDate | date:'dd - MMMM - yyyy' }} </button>
</ionic-datepicker>

Hi Rajesh, great job! I found an issue though and I am able to reproduce this on your demo. Using the 2nd one where future dates are disabled.

1. Select January from the month select.
2. Click Prev month to go to December 2014.
3. Change the month select to January.
4. It seems the monthChanged event doesn't fire so the view doesn't update.
5. In the code, it still think it's December 2014 because click the Next month will go to January 2015 instead of February 2014 as expected.

How I can change color from "Positive" to "Assertive" like for button or background? I think you should add an option for this

Help!
I keep getting this error.

in javascript:

$scope.startDatePickerObject = {
            titleLabel: 'Select Date', //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
            templateType: 'modal', //Optional
            modalHeaderColor: 'bar-energized', //Optional
            modalFooterColor: 'bar-energized', //Optional
            from: new Date(2012, 8, 2), //Optional
            to: new Date(2018, 8, 25), //Optional
            callback: function(val) { //Mandatory
                 startDatePickerCallback(val);
            }
        };

        var startDatePickerCallback = function(val) {
            if (typeof(val) === 'undefined') {
                console.log('No date selected');
            } else {
                $scope.startDatePickerObject.inputDate = val;
            }
        };

In html:

<ionic-datepicker input-obj="startDatePickerObject">
                        <button class="button button-block button-energized" id="dateButton">
                            {{startDatePickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
                    </ionic-datepicker>

Great Job Rajesh.

Just wanted to point out that my pages are loading bit slower after updating my code to the latest version.

Great work Rajesh. This is beautiful. I did have an issue though.

I restricted the years on the datepicker to only be this year in my own file(so it didnt get overwritten with any updates)...

var app = angular.module('ionic-datepicker');

app.service('DatepickerService', function () {

var date = new Date();
var current_year = date.getFullYear();
this.monthsList = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
this.yearsList = [current_year];
});

When this happens I can click past the end of 2015 but no year shows up. Attached is a picture of what I mean

Also is there a way to load this from an unminified source? Its virtually impossible to debug it any other way.

Hello I can't install this plugin. bower show me next error

http://i.imgur.com/BQCwyYb.png

Hello,

I am working on order booking application in which restaurant is close on monday so I have disable the every button on monday in calender. Please check it.

Thanks in Advance.

can you please help me in how to set up a range of selected dates in datepicker?
and how can i change the minimum selection date to today , so that user don't select the previous date

Hi !

Today when i do open the calendar the actual day is selected and it shows in gray background, and i know i need to tap into the actual day to select it.

If i did not choose a day and close the calendar, this error message is fired: "Please select a day" . Can we in turn modify this behaviour? if the user opens the calendar and select no day at all, the actual day will be the selected day ?

Hi, first thanks for your work. I have some suggestions.

To me, it is more useful to be able to set start and end date, not only disable previous or future dates. For instance, I would like to enable user to choose any date from tomorrow to one year in the future.

Another suggestion is to enable adding and opening a date picker dialog without adding a button that displays the date. I've solved this by hidding a button and initiating onClick event with jquery but I guess it is not a proper angular approach.

Hi!

Is it possible to let's say disable any Tuesday, Wednesday and Friday?
So the datepicker will only accept Mondays, Thursdays, Saturdays and Sundays?

Hi,

First of all, thanks a lot for your great work !

I found a problem with the weekDaysList. I use you DatePicker to create several events, and each time I set a new date the weekDays are shifting one day to the left.

The first time I use it the list goes from Monday to Sunday (I set mondayFirst to true), the second from Tuesday to Monday, the next one from Wednesday to Tuesday etc.

The dates in the calendar stay in the good columns, only the letters above are shifting (so the second day I have the Tuesday letter above the Monday column).

I don't have this issue with the default weekDaysList, only when I customized it. I encounter this on both device and ionic serve.

Do you have an idea of where it could come from ? I'll work on it and keep you updated if I find something.

Thanks.

I have follow the instruction to install ionic-datepicker, but when I try to click the datepicker, the following error was thrown on my browser javascript console

Error: [$parse:ueoe] Unexpected end of expression: dateSelected(dayList
http://errors.angularjs.org/1.3.13/$parse/ueoe?p0=dateSelected(dayList
    at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:8762:12)
    at Parser.consume (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20747:13)
    at Parser.functionCall (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:21022:10)
    at Parser.primary (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20694:24)
    at Parser.unary (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20970:19)
    at Parser.multiplicative (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20953:21)
    at Parser.additive (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20944:21)
    at Parser.relational (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20935:21)
    at Parser.equality (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20926:21)
    at Parser.logicalAND (http://localhost:8100/lib/ionic/release/js/ionic.bundle.js:20917:21) <div class="date_cell ng-binding" ng-click="dateSelected(dayList[$parent.$index * numColumns + $index])" ng-class="{'pointer_events_none':(disablePreviousDates &amp;&amp; previousDayEpoch >(anonymous function)

Any idea how to solve this?

I have two modal forms, a "create" and an "update". ionic-datepicker is working superbly on the "create" form; but I'm having problems on the "update" form.

The date pulls in and displays perfectly when the "update" form loads. However, when I click on the datepicker field to edit it, the console shows the following message:
TypeError: e.getFullYear is not a function" which points to lib/ionic-datepicker/dist/ionic-datepicker.js 1:640

I'm running ionic 1.0.0-rc.5, angular 1.3.13, and bower's version 0.1.3 of ionic-datepicker (differs from your package.json version number of 0.0.1).

Any ideas what might be causing this error?

Hi . im using your ionic date picker but i cant select any month and year.

Hello!
The months, days of week, and GUI are in english, is on plan to localize these objects?

If I set the date to 2nd June 2015, what is being stored is the midnight (00:00:00.0) time. Because I'm BST (GMT -1 hour for daylight savings), the ISO date string that is being stored is 1st June 2015 at 23:00.

I've worked around it by setting the value in the call back to 12-midday with val.setHours(12).

Rajesh, do you have any plans to provide attribute support for setting a start and end dates? So that user can only pickup those valid dates? My use for a time card reporting app, where user can only select a day from valid range of dates?

Thanks,
Sai.

PS: Keep up the good work.

Hello, the button "Today" returns the current timestamp (Ex.: "Tue Jun 30 2015 21:35:44").
If you select a date, by clicking on the day, the time epoch is 00:00:00.

If the first time you load the datepicker you click "Today" and then click "Set" I get the following:

In the datepicker, I'm not sure how this is happening, but there is a weird date issue for February and March - if you check these images (on your demo) you'll see it.

January-February 2015, missing day

The size of the month and year select boxes is trimmed to 3 characters, into Android. I just try to edit datepicker-modal.html and set size to 26 but could not see any diference.

i'm unable to get the user selected date at the controller , it always giving the right now time rather than the selected time. In the view it shows the correct selected date , but not at the controller