spongessuck/gm.datepickermultiselect

AngularJS module to extend UI Bootstrap's Datepicker directive to allow for multiple date selections.

gm.datepickermultiselect's Issues

How to set a pop up style by click button?

Like popup style in ui-datepicker

How to force a visual update to calendar when removing some of the selected dates

In the example code you can select some dates, which will then appear below with a remove button.
On selection they are also highlighted in blue on the calendar. But if one modifies the model by clicking on the remove button of one of the dates below, then nothing happens in the calendar view.

So the main problem is, how can I force a refresh from outside the directive that the calendar needs to refresh its view based on the new model data.

Thank you in advance,

Datepicker doesn't display the selected days

I have add a button to set some of selected days when it's clicked, but it doesn't render the selected days correctly until I select another days. For example when I click the button I will set 11, 13, 15 May 2017 as the selected days, as shown by this code:

html
<button ng-click='$ctrl.setDate()'>Set Dates</button>

js

this.setDate = function() {
    _this.selectedDates = [
      new Date('2017-05-11').setHours(0, 0, 0, 0),
      new Date('2017-05-13').setHours(0, 0, 0, 0),
      new Date('2017-05-15').setHours(0, 0, 0, 0)];
  }

The datepicker doesn't set the date of 11, 13, and 15 in blue highlighted background color, but if you click another days for example, 20 May 2017 then the datepicker will set the 11, 13, 15, and 20 in blue highlighted.

Furthermore, if you unselect the 20 May 2017 by clicking it once again and click the Set Dates's button you cannot select another days.

Here is the plunker to show the problem: http://plnkr.co/edit/yUyYcANwSxtmpTsgCmi1?p=preview

How to access the range dates in the controller

Apologies for the dumb question but I am not able to access the dates in the controller AppCtrl from this example http://plnkr.co/edit/KMxadj?p=preview

Not able to view Date picker in my project using Angular v1.5.0 & uib-bootstrap v2.5.0

Hi Team,

I have done below steps, please correct if I am wrong.

Steps:

1. I have added 'gm.datepickerMultiSelect' in app.module.
2. Added gm.datepickerMultiSelect.min.js in our js folder.
3. Mentioned this gm.datepickerMultiSelect.min.js path in our index.html file
4. Use <uib-datepicker ng-model='activeDate' multi-select='selectedDates'></uib-datepicker> in html.

But still I am not able to view the date picker in browser.

Please help, thanks in advance.

NO CDN?

Doesn't this have any CDN??

An error:multidir

An error occurs.My angularjs version is 1.2.20.

 Error: [$compile:multidir] http://errors.angularjs.org/1.2.20/$compile/multidir?p0=datepicker&p1=multi…s%3D%22date-picker%22%20ng-model%3D%22date%22%20multi-select%3D%22sd%22%3E
    at Error (native)
    at file:///E:/FF9/js/libs/angular.min.js:6:450
    at I (file:///E:/FF9/js/libs/angular.min.js:61:486)
    at H (file:///E:/FF9/js/libs/angular.min.js:55:342)
    at file:///E:/FF9/js/libs/angular.min.js:60:324
    at file:///E:/FF9/js/libs/angular.min.js:72:199
    at J (file:///E:/FF9/js/libs/angular.min.js:99:469)
    at J (file:///E:/FF9/js/libs/angular.min.js:99:469)
    at file:///E:/FF9/js/libs/angular.min.js:101:126
    at k.$eval (file:///E:/FF9/js/libs/angular.min.js:111:353)

Issue with two datepickers on one page

When 2 datepickers appears on one page, even with different ng-model and multi-select variables for these attributes. When you choose dates on one datepicker, these dates appears on second. They don't added to selectedDates2 array, that relates with second datepicker multi-select attr.
http://plnkr.co/edit/L0SnB3?p=preview

Works great but conflicts with standard datepicker

This is working really well but I'm trying to build something where I have a standard date picker (one day only) as well as a range. If I put the regular datepicker from angular-ui-bootstrap on the same page as this datepicker, the standard one stops working. Behavior I'm seeing is a need to double-click in order to get the date buttons to highlight, and the ng-model for the standard date picker stops being updated. I've tried initiating it with a value, but it gets stuck with that value. If I initiate it with no value it appears to never pick up any value. Not sure what's causing this but thought sharing this might help.

How to change background-color of previous and next arrow button on calendar

Thanks, it's working fine, just i need to change color of previous and next arrow button on calendar.

Highlight multiple days but select only one day

I want to be able to highlight a number of days based on some business logic when the datepicker gets rendered on screen but the user be only able to select one day. So that will probably require that the highlighted days be in a different color(e.g., green) and the selected single day be in another color (e.g., red).

Is this possible? Or even if I can make some edits in the current code to achieve this that would be great!

Demo is not working on ui-bootstrap-tpls-1.1.0

The UI isn't the same as on ui-bootstrap-tpls-1.1.0.

Is there any option to disable dates earlier to current date?

I am using this to multiselect dates in my project, can you help me to disable the dates earlier to current date. It would be better if we a have that option to the directive.

Using this on datepicker does not change highlight on change of month

I included this into ui-bootstrap 0.10.0 by registering on datepicker:
var delegate = [ '$delegate', function($delegate) {...}];
$provide.decorator('datepickerDirective', delegate);
$provide.decorator('datepickerPopupDirective', delegate);

Works fine except for when you select a range and change the month. Because you are hooking the change of the ngmodel and it is not updating it will not redraw the selected days as highlighted.
This needs to hook up to the month change and I am currently unable to work out how to tap into that month change click calling refill.

Any assistance would be appreciated.

Parent directives options dont seem to work

When trying to set datepicker-options on this extension the original functionality doesnt seem to work... ie setting a minDate with

scope.options = {minDate: new Date()}

doesnt work...

Im not sure if theres some additional logic in the linking that needs to be added?

Ill look into it and see if i can find out unless anyone else knows?

How to disable past dates?

i am not able to disable past dates and also i want to disable current date after a particular time. please let me know to achieve this. i m new on angular.

Support angular ui bootstrap 0.14

Hi @spongessuck ,

The latest angular ui bootstrap versions (0.14.0 and 0.14.1) created <uib-datepicker> and made <datepicker> deprecated.

Please see the changelog here.

As I'm willing to use the latest verions of both angular and angular ui bootstrap, I would like to support both <uib-datepicker> as well.

The v1.0.6 doesn't support it, because you are decorating daypickerDirective and not the new uibDaypickerDirective.

What do you think ?

Note:
I was trying to fix #14 yesterday as it is "blocking" me as well.
I'll see this again later today.

Issue on change selection type

When 'range' type is selected:

1. double click on the same date (e.g. range: 2015-07-06 - 2015-07-06)
2. change selection type to 'individual'
   the following error occurs:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: d in app.selectedDates | orderBy : app.identity, Duplicate key: number:1436133600000, Duplicate value: 1436133600000

btw: would it possible to change behavior after second click on the same date to unselect the date (as it is for 'individual' type) ?

select range add class on middle values on hover

On select range mode, I'd like to add a class to middle values between first date (already selected) and the new value (being selected). To show the user the resulted range.

Something like that:

What do you think ?

change locale

I can't change the language of datepicker when I change the locale...

moment.locale('es');

Do you have any example about this?

Thanks in advance

ShowWeeks: false is not working

I was trying to turn of the weeks displayed , by providing datepicker-options , showWeeks = 'false'

it didnt work.

Multiple Multi select Datepicker on same page

What changes do i need to make if I want to have multiple multi-select date picker on the same page?

Main / Max Dates not working

Adding datepicker-options to the directive doesnt set the min and max allowable dates... is there an enhancement required...?

how to clear the selected dates in individual mode

I am using this datepicker on a modal popup and the modal popup will get open when a button click.Every time the button clicks, the selected dates of the datepicker have to clear and the selected dates should be empty. Plz help me to clear the selected dates and to reset the background of selected button to normal mode.

Getting datepicker showing pre selected days

Here is the scenario, I have selectedDays array miliseconds in it. What i want is, showing the datepicker for the correct month.

http://plnkr.co/edit/aiy7kv?p=preview

remove it

remove

affects highlight of days which are not mutli-select

I had to apply this fix which 'work for me', checking whether I have a selected dates before affecting day.selected. Needs validation.

                function update() {
                   if (selectedDates.length) {
                        angular.forEach(scope.rows, function(row) {
                            angular.forEach(row, function(day) {
                                day.selected = selectedDates.indexOf(day.date.setHours(0, 0, 0, 0)) > -1
                            });
                        });
                   }
                }

Directive active on datepickers that don't define multi-select attribute

Hi!
I have the problem with accessing selected dates from anywhere. I tried with different versions of ui-bootstrap(0.13 and 0.14) and with Angular 1.4.7. My view html looks like this
<uib-datepicker ng-model='vm.request.selectedDate' class="multi-datepicker" multi-select select-range="false"></uib-datepicker>
The ng-model value is getting updated, but only to single value(currently selected date, and yes, I know that's ok). But I just cannot access selected dates at all. I am using controller as syntax but even with standard one it just does not seem to work. I was able to make it work only after I changed scope.selectedDates to scope.$parent.selectedDates in your code. I don't see two-way binding anywhere in the code. As far as I understand the data is not bound to the model provided in multi-select attribute, its just hardcoded selectedDates value on scope ? Any idea about all of this ?

Does not work with AngularUI 2.x.x

Hi,

since the uib-datepicker directive seem to have changed in Angular UI Bootstrap 2.x.x, the gm.datepickerMultiSelect does not work with the newer version. At least I didn't get the example working. The picker just doesn't show up anymore.

Any chance to adapt the datepickerMultiSelect to the new version?

Thanks,
Jan

visual representation of selected dates wrong after select and instant deselect

I'm using the multi-select within a modal (but think, that shouldn't make a difference). When selecting multiple dates, say August 12th, 14th and 15th (in this order)

and deselecting the most recently selected date again (clicking on August 15th again), within the inline calendar, all elements are displayed as if not selected, even though the model stays correct and only deselects August 15th as desired.

Selecting August 15th again results in all elements being displayed correctly again, but Selecting a different date does not trigger the correct display again until August 15th is selected again (although this triggered the false display of the dates selected in the mean time again).

Here is my markup

<datepicker ng-model='model.activeDate' multi-select='model.dates'></datepicker>
<p ng-repeat="date in model.dates">{{date | date:"fullDate"}}</p>

and my Javascript

$scope.model.activeDate;
$scope.model.dates = [];

and some of the dependencies of bower

{
  ...
  "dependencies": {
    "angular": "^1.3.0",
    "bootstrap": "3.3.4",
   ...
    "angular-bootstrap": "~0.13.2",
    "gm.datepicker-multi-select": "~1.0.6"
  },
 ...
}

Styling of the selected date buttons

Hey @spongessuck
i know this is an existing issue. Just wanted to know whether this has been fixed for the latest UI bootstrap in any recent release ?

Thanks in advance..

Bug when clear selectedDates

Hello,
don't know if this is discontinued but I am using it on a project, and found a bug when I set the selected dates with an empty array.

I've emulated the problem here: http://plnkr.co/edit/aMg04rfCvfYpaszqgj66?p=preview
When you click Clear Dates button twice the datepicker seems to lose sync with the selectedDates array. Clicking on the dates won't add to the array anymore.

Is it possible to change the styling of one, or many days?

I am using the date picker as a way to display an overview (no interaction from the user) of when something has happened to that day. The dates selected are created at runtime and I was wondering if it was possible to change the class of a certian day?

For example:

Date-disabled not working

hello, please i need help with the datepicker, i need to make sure the user is not able to select a second date greater than the first date , i'm quite new to angular so pls help me if you can :|

How to add events like the standard date picker

How to add events in this date picker like the standard one.

$scope.events =
[
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];

Angular 1.4.8 throws Cannot read property 'activeDate' of null

It seems like https://github.com/spongessuck/gm.datepickerMultiSelect/blob/master/src/gm.datepickerMultiSelect.js#L125 is reversed, as in the the controller is the last of the controllers array, instead of the first.

The bug doesn't occoure when using angular 1.4.7 and angular-bootstrap 0.14.3. Upgrading to 1.4.8 produces the error.

single date selection using gm.datepickerMultiSelect

Hi, I am Harikrishna. I am working in a project using gm.datepickerMultiSelect. I want to select single date using gm.datepickerMultiSelect. How can i select single date only. Please help me asap.

Thanks
Harikrishna

How to write the onSelect and onChangeMonthYear, functions in this datepicker?

So, what I want want is, on change of month and year, I want active month's first date and last date.
Can anyone assist me on this?

Dates not selecting when ng-model-options timezone set to UTC

Need to have directive check for this value and adjust its calculations.

How to use uib-datepicker with a popup datepicker?

After updating to the 1.0.8, the following code doesn't work anymore:

<input type="text" name="date" class="form-control" placeholder="Departure date" data-ng-model="vmBooking.activeDate"  data-datepicker-popup="dd/MM/yyyy" data-is-open="vm.isFromDateOpen" data-close-on-date-selection="false" data-multi-select="vmBooking.booking.selectedDates" disabled>
<span class="input-group-btn">
    <a type="button" class="btn btn-default" data-ng-click="$event.stopPropagation(); vm.isFromDateOpen = true "> <i class="icon-calendar"></i> </a>
</span>

I have tried to replace the data-multi-select with uib-datepicker, however, it's still doesn't work. Any help would be appreciated.

Please take a look at this Plunkr which describes my situation.

View doesn't update when month changes

Need the selected days to pop in after switching months.

Highlight selected dates when app.selectedDates is not empty

Hi! Great module. One issue I'm having is trying to highlight already selected dates, like when editing.

I'm saving 'selectedDates' as an array. When editing, i retrieve the object and it's selected dates. The app.selectedDates is outputting fine, but I can't seem to be able to highlight those dates on the calendar. If you could point me in a direction, that would be great.

Thank you!

Disable weekend date

Hi, I want to know how can I disable weekend dates.
For example: I want to disable 'sunday' from the datepicker.

Thanks in advance!