spongessuck / gm.datepickermultiselect Goto Github PK
View Code? Open in Web Editor NEWAngularJS module to extend UI Bootstrap's Datepicker directive to allow for multiple date selections.
License: MIT License
AngularJS module to extend UI Bootstrap's Datepicker directive to allow for multiple date selections.
License: MIT License
Like popup style in ui-datepicker
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,
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
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
Hi Team,
I have done below steps, please correct if I am wrong.
Steps:
<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.
Doesn't this have any CDN??
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)
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
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.
Thanks, it's working fine, just i need to change color of previous and next arrow button on calendar.
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!
The UI isn't the same as on ui-bootstrap-tpls-1.1.0.
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.
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.
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?
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.
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.
When 'range' type is selected:
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) ?
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
I was trying to turn of the weeks displayed , by providing datepicker-options , showWeeks = 'false'
it didnt work.
What changes do i need to make if I want to have multiple multi-select date picker on the same page?
Adding datepicker-options to the directive doesnt set the min and max allowable dates... is there an enhancement required...?
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.
Here is the scenario, I have selectedDays
array miliseconds in it. What i want is, showing the datepicker for the correct month.
remove
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
});
});
}
}
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 ?
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
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"
},
...
}
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..
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.
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 in this date picker like the standard one.
$scope.events =
[
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
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.
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
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?
Need to have directive check for this value and adjust its calculations.
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.
Need the selected days to pop in after switching months.
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!
Hi, I want to know how can I disable weekend dates.
For example: I want to disable 'sunday' from the datepicker.
Thanks in advance!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.