arca-computing / multipledatepicker Goto Github PK

I live in Italy (UTC+2).
When I select a date, I always get the date of the previous day, at 22:00:00.
How to get the selected day at 00:00:00 (UTC), indipendently from the locale timezone?

Nice improvement so far. I noticed that the the bindings for daysSelected in the directive doesn't fire when new dates are added from parent controller.

this is what it looks like

scope.$watch('daysSelected', function(newValue) {
    if(newValue){
      var momentDates = [];
      newValue.map(function(timestamp){
        momentDates.push(moment(timestamp));
      });
      scope.convertedDaysSelected = momentDates;
      scope.generate();
    }
  });

This is what it should be

scope.$watch('daysSelected', function(newValue) {
        if(newValue){
          console.log(newValue);
          var momentDates = [];
              newValue.map(function(timestamp){
            momentDates.push(moment(timestamp));
          });
      _.each(momentDates,function(d){
        console.log(d.date());
        console.log(d.selected)
      })
      scope.convertedDaysSelected = momentDates;
      scope.generate();
    }
  },true);

The true after the should be included to trigger changes immediately when parent scope changes

Or I need to fill highlighted array this months disabled dates?

Hello,

My website have two calendar, one which allow user to selected multiple date and one which allow a single date. I've implemented MultipleDatePicker to the multiple one. So I think I could use the same for the single one.

I've bound a callback to a dayClick event. Inside the callback, I've call the multipleDatePickerBroadcast.resetOrder service. But after the service run, I can't selected any date.

I've tried another way by removing the class 'picker-selected' from all elements that contain it right after the callback run. But if I go to other months and go back, the class is come back.

I've tried many ways, but nothing works for me.

So could you please suggest some advice to me about how to do this ?

Thank you,
Rath

based on the docs, for the new day-click attribute

<multiple-date-picker day-click="logInfos"/>

$scope.logInfos = function(event, date) {
    event.preventDefault() // prevent the select to happen
    console.log(date.valueOf()) //will give you the timestamp
    //reproduce the standard behavior
    date.selected = !date.selected

}

This displays the date as being selected or deselected temporarily. When the month is changed and returned back, the selections isn't persistent.

On toggle image

navigating to a new month

returning back to the initial month

I think if the issue i opened at #9 is resolved. Then it would be easy to replicate the default implementation manually by just adding it to the arrays of selected dates.

Is it possible to allow the user to be able to select a limited number of days based on a dynamic value?

Sometimes 2, Sometimes 3 depending on an Int being passed.

picker-day-today is applied to today cell only after first click

We need show all 12 month in a angularjs view so the users can view all calendars and select some days in some moths.

How woud you do it?

The idea is print 12 calendars January to December . You show how select a month from actual but is there an option of pass directly year and month so we can print all 12 months.

Sorry my English an thanks in advance for your help and your work

Well trust users to come with all the good ideas. A request from the primary user on what I'm working on that I kind of like/dislike, in part I'm not fond of the added complexity however it kind of do make sense.

The idea basically is to have multiple event types to add to the calendar. A case could be having two types of events, say private and work. For instance having the private as green and work as red. As far as I can figure the logical implementation would be something like:

<multiple-date-picker ng-model="selectedDates" event-type="eventType" />
<select ng-model="eventType">
    <option value="work">Work</option>
    <option value="private">Private</option>
</select>

Then the selectedDates model would be an array of calendar objects, with the date and the type as elements:

{
    date: momentFromCalendar,
    eventType: $scope.eventType
}

or something like that. As for styling I think adding a css class with the name mdp-eventType would make sense. Perhaps using toString() when inserting eventType to allow objects too, althought that may introduce complexities.

Having a more complex version as suggested would also require the date-click to be updated appropriately to allow things like switching the event type based on the currently selected. One could imagine an interface where clicking a date once marks it as work, clicking it again marks it as private and a third time to remove it again.

As far as I see it the down side of this idea is that it will make the calendar slightly more complex. This may in part be mitigated by just defaulting to an array of moment objects when eventType is not set, however again introducing issues if alternating between set and not set (perhaps detecting it and throwing an error in this case?).

On the up side it would allow a fair deal more complex use cases, such as the one I currently have as a suggestion (a bit more complex than work/private, but still). Also structuring it with objects like this will allow very flexible systems. Imagine adding a text property to the objects to insert text in the calendar badge etc. Even further, allowing the idea to wonder into a possibility of a future one could even imagine a template system like:

<multiple-date-picker ng-model="selectedDates">
    <div class="calendarEntry">
        <h1>{{entry.title}}</h1>
        <p>{{entry.myPersonalText}}</p>
    </div>
</multiple-date-picker>

allowing an extremely flexibly system for whatever the heart desires.

I'm not certain about the basic suggestion although there's some cool options in what it allows. Part of me kind of likes the added flexibility and feels that the cost isn't that high. Part of me doesn't like it because it can fast become adding this and that, and the nice and simple way to use this feels really good. If it can be done keeping it in the spirit of AngularJS with having it simple and intuitive, it might be a really good idea.

What say you?

Hi

I've installed the library and it's looking great.
Except if I use my console keeps telling me
15:00:50.951 "callback option deprecated, please use dayClick"
whenever I click a cell.
What is causing this error and how can I extract all the selected dates from the picker?

Greets
Asopus

when installing with bower the latest version available is 1.1.6, I believe this is related to tag 1.2 that should be 1.2.0

Hey, how can I change sunday to be in the first column, like sunday is the first day in the week
something like,
['sun','mon' ...]

thanks!

Currently we have days-off feature. Any dates we give to this list will be disabled and the user cannot select it.

But if we want to do the reverse, we only want to allow certain dates, then we have to manually calculate all the dates that we do not allow.

Instead could we just have an opposite parameter like days-allowed. If this is set, then all the other dates will be disabled.

Hello,

I tried to use the date picker, and I found the hard way that it depends on Moment.js (http://momentjs.com/), but it is not written anywhere.

It will be more appropriate to specify it in the documentation website (http://arca-computing.github.io/MultipleDatePicker/).

And thank you.

Hi Guys,

I'm not sure whether it is me, but when I have set disable-days-before="today" as following the example etc. it does not disable the days or highlights "today" until I click one month forward then back again. After that, everything works fine.

I am using this directive on mobile, using Ionic Framework.

Thanks! 😊 👍

Alex

If we select Sunday as a first day of the calendar. When a months have start with Sunday than it prints complete empty row above the month. Logically Sunday as calendar first day and start of the month is also Sunday than the previous dates are not visible to user as empty row.

Hello,

Is it possible to clear all selected days (e.g. with an event)?

Thanks & Regards

Hi,

in
How can i change the date format from timestamp to 'dd-mm-yyyy'?
this is the format i get from my api.

is it possible?

Thank's alot
Avi

Hi,

is it possible to add an option to set the MDP to current month within "multipleDatePickerBroadcast.resetOrder"? Or is there another way to set the current month of the MDP with JS?

Thanks & Best regards,
Thomas

There's an option to mark one or more dates as disabled. However - as is also seen in the demo - when you click on a disabled date it still triggers an event; i.e. with onClick.

Is it possible to make not events trigger on disabled dates ?

TIA
Bart.

Hi,

I came accross the idea that the default behavior of your click callback does not cover enough possibilities.
First of all, why don't send the day object and document the properties that are added with the moment object? Then, why isn't there any event passed through.

My proposal will be to change the ng-click:

ng-click="toggleDay($event, day)

Then, we could add a way of preventing the default behavior:

            scope.toggleDay = function(event, momentDate){
              event.preventDefault()

              var prevented = false

              event.preventDefault = function() {
                prevented = true 
              }

              if(typeof(scope.callback) === "function"){
                /**
                 * momentDate is an moment object with additional params
                 * .valueOf() - the timestamp value
                 * .selectable - is it selectabel
                 * .selected - is it selected
                 */
                scope.callback(event, momentDate); //callback with the event object and the moment object
              }

              if(momentDate.selectable && !prevented){
                  //current behavior
              }
            };

I'm ready to PR this but I'd like to have an opinion first :).

I've developed a few applications in angularjs for the company I work for, however, I consider myself to be a relative beginner. In any case, I don't see a way of pulling back data from the calendar unless I capture it on the day click event. If I wanted to pull back the "days" array, what is the best way to do this without hacking the event handler - since this array already exists getting access would be the best method, no? If there was a way to assign a model or simply assign a scope variable to days (or have selectedDays update the assigned scope variable - not just for preset values) this would help.

Ultimately I want to convert this to a list of date ranges instead of an array of dates for space efficiency. I figured gaining access to the array would be easier but would include the overall goal in the case you find this to be useful (perhaps it would scale well?).

Thank you for the awesome tool, best of luck and happy coding!

Hi,
How can I change date yyyy-mm-dd to timestamp in day-selected directive array?
I don't want to go on the script side as I am using the calendar through ng-repeat for each id so I want a way to change the date to timestamp from your directive.
Basically I have want to convert this format 2015-03-14T19:00:00Z to time-stamp as per your directive requirement, to show selected days of each unique groups' schedules.

is it possible to programmatically switch the month / day names from Latin to Chinese characters?

Hi,

I want to show different number of days for next month. I have seen show-days-of-surrounding-months="true" but this isn't what I need. I want to show different number of days of next month. For example some times I want to show 3 days of next month, some times I need to show 10 days of next month and so on. Is there any hook or method available for this?

Hi

I'm using a scope variable to fill in the days-off on the calender. However when the content of the scope variable changes, the days-off won't update. Is this an issue? Is there any solution to dynamically update the days-off through a scope variable without refreshing the page?

Cheers
Asopus

When de-selecting a selected date, it's background color is not reset to the default background color until mouse hovers off that day. That way a lazy user should have no feedback of a de-selection action... :-)

Sometime on successives click on the calendar, some days stays selected.

Hi! Great calendar, thanks so much!

Is it possible to show days from previous and next months in the current month in the empty boxes? And style them differently.

Thanks!

Hello,
Thank you for this Date Picker.
I have a question for you.

How to display a month which is not the current month ?
Thank you very much for your answer.

Another suggestion for the documentation would be an index, so I can fast and easily navigation the possibilities.

A nice and hopefully simple option for you to make is to provide a default timezone to the date objects. Forcing them to e.g. midnight in Europe/Paris, to ensure a consistent way of sending dates.

I'm not sure what time zone it's using now, but if just doing the default I recall that moment defaults to the browsers zone. This can cause issues when e.g. creating a booking system, for someone in say Bordeaux, France, is doing bookings for something home in France, while being in Romania. The errors arise because if the computer can be set the timezone to Romanian time all dates would end up the day before when viewed home in France, causing all bookings to be off. Ofc. in some use cases this might be desired, but in a lot of cases, such as booking the desired option is to lock the time to some desired default.

Hi,

I want to show only clicked as highlighted and all other days and UN-highlighted. Here is my scenario, when Page is loaded,some dates are highlighted using days-selected="selectedCalendarDays". Now I want when user clicks, all selected highlighted days becomes un highlighted and only clicked one remains as highlighted. So I set selectedCalendarDays as empty. But now when I click again the previously highlighted day remains highlighted. I only want to highlight the clicked date, some thing similar to this issue. Here is my code.

<multiple-date-picker calendar-id="shippingCalendar" day-click="selectShippingMethod" days-selected="selectedCalendarDays" week-days-off="[0, 6]"/>

And here is my controller code of selectShippingMethod

$scope.selectShippingMethod = function(event, date) {
      event.preventDefault();
      $scope.selectedCalendarDays = [];
      multipleDatePickerBroadcast.resetOrder('shippingCalendar');
      date.selected = !date.selected

  }

If I comment date.selected line, nothing is shown. I have interchanged lines of date.selected and multipleDatePickerBroadcast.resetOrder but result is same. I have also tried

$scope.clicReset = function(){ multipleDatePickerBroadcast.resetOrder('shippingCalendar'); };

Can you please guide me how I can achieve this?

http://arca-computing.github.io/MultipleDatePicker/

In relation to my previous issue: #50

As said before I like the DatePicker, so please don't take the issues as being criticism or anything like that.

A suggestion for the documentation. You have a really nice "Time to use it" section. I feel this would be greatly improved if you after "Add it in you html" have a section on how to get the dates. If the event handler currently is the right way (I suspect so from my current going through the doc) it would be really nice to have it right after adding it to the html. Then I can worry about options when the basics are working.

I am using angular 1.4.9, it seems that selecting more than 2 dates resets the calendar (a simple default use case without any additional code). Any idea about this?

Hey so far it's looking quite good. A good phrase to consider when designing an api of some kind is:

"Have you used it in anger, yet", basically meaning can you get it to work easily and fast without any issues (eg you could look here http://homepages.inf.ed.ac.uk/wadler/topics/functional-programming.html). Does it work easily and as expected when you're stressed and do not have the time to read the documentation.

However, good as the start is, there is some things to be desired. I have spent +15 mins on your documentation and I still do not know how I'm supposed to bind the dates to my model or get the selected dates. The closest I've come is an event for when one selects the dates.

My first request falls on the way of using the MultipleDatePicker. As an Angular user I expect it to have the ng-model attribute to bind the pickers moment objects to my model, probably through an array. May I kindly suggest you add this, as it will greatly improve the experience from angular users, especially those "using it in anger".

Hi,

can you add this package to npm?

Nice library. How do I disable selection on any month before the present month. Thanks

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!

We need the scope.month from multipleDatePicker directive. Thanks！

Hi,
Just started using this nice date picker, but having a little issue when using it on a smartphone (touch).
When a selected date is deselected, then it first shows when another day is rouched or touching outside the date picker.

It's the same behavior on the demo page.

Is this intended or do know a work around?

Best regards,
Anders

Be able to select ranges of dates (so if the person clicked Nov 10 and Nov 13 then Nov 10, 11, 12, 13 are all selected

Hello, I'll try to explain this possible issue as good as I can...

1. select a startdate (27/08/2015)
2. select an enddate in different month (05/09/2015)
3. go back to first date

You'll see that it appears as deselected (red color marking is gone) - at least in Chromium. Haven't tried with other browsers... Note that the enddate must be different month than startdate for this to happen.

This may be a niche case but I had an issue where inside of a ui bootstrap modal, the ng-class for the selected days was not firing at all. I circumvented the issue by putting an angular variable inside the plain class tag and after scope.generate I did a for each to apply where selected was true. This is my code:

class="text-center {{day.calendar-highlight}} picker-day"

scope.generate();
angular.forEach(scope.days, function (item, value) {

                        if (item.mdp.selected)
                            item.calendar-highlight= 'calendar-highlight';

                    });

I also added this after the month change to retain the highlighting. There may be a much better way of doing this but I wanted to post so future devs may avoid my headache for past 2 days.

Hi,

I'm using MultipleDatePicker to make updates to events attached to certain days in an $mdDialog window. I'd like to unselect all days when the modal window is dismissed, but simply saying

scope.selectedDays = [];

won't do it. Is there any built-in way to de-select given days?

Thanks!
Chris

I'd like to pre-populate the date-selected, but also have anymore dates from being selected. I'd like to to apply ng-disabled.

Hi,

In your calendar's tutorial, there is an option to control the width of the Calendar but there isn't any option to control the height of the calendar. I tried a lot to control the height with CSS but it doesn't seem to work at all. Could you please tell the way in which I could adjust the height along with width of the calendar.

Thank You

I had a use case recently where I wanted to compare the data from one month to that of another month, with two multiple-date-picker directives loading on the same page, without letting the user navigate both calendars individually, so I edited my copy of the directive to include a "disable-nav" attribute, and added the following code to the directive template:

<div class="text-center picker-navigate picker-navigate-left-arrow" ng-class="{\'disabled\':disableBackButton}" ng-click="previousMonth()"><span ng-hide="disableNav">&lt;</span></div>

After I did this, I saw that I couldn't change the month of the MDP, so I added a watch to override the nextMonth and previousMonth functions:

if(scope.disableNav){ scope.$watch('month', function(newMonth, old){ scope.generate(); }, true); }

And the monthChanged event on the 'master' MDP instance now updates the month on the 'slave' MSP instance, so when I navigate to a new month in one, it updates the other.

I don't know if this is too specific to be a PR, but it was an enhancement I needed, so I thought I'd offer it here for discussion!