greatcodeideas / md-date-range-picker Goto Github PK

View Code? Open in Web Editor NEW

62.0 8.0 40.0 327 KB

Angular Material Date Range Picker Service/Directive

License: MIT License

JavaScript 77.49% HTML 17.09% CSS 5.42%

md-date-range-picker's Introduction

md-date-range-picker -

A simple Angular Date range picker with material theme

ussage/code example

install using npm packages
npm install md-date-range-picker
install using bower
bower install md-date-range-picker

Live Demo and Examples

https://ipiz.herokuapp.com/md-date-range-picker-demo/index.html

example: html directive

<body ng-app="demo.app" ng-cloak>
  <div ng-controller="ctrl">
    <md-date-range ng-model="pickerModel"></md-date-range>
  </div>
</body>

js adding dependencies

angular.module('demo.app', ['ngMaterial', 'ngMaterialDateRangePicker'])

dev tools

Clone Repo
npm install
npm start for dev serve
npm run build for build
npm run dist for dist serve

TODO:

Optimize code
Create unit tests
Standardize build script

md-date-range-picker's People

Contributors

Stargazers

Watchers

Forkers

oleksiilevchenco gopalkohli yoni12ab kobish fjsnogueira appfoundations armenhajian musman92 genghis-koen workast pavelety max-ss murphyky lba dbrdarski ezoic stibosystems codefunta bsell93 websirnik fnnek dotpack vishnu-vv reyesoft yannlecomte okisad nmccartney vupham-zingbox zingbox jktu2870 eevoskos davloperez vaniushar dhaval-creativencode sparmboy jzlosman hollyfang giangbv1984 jmermar

md-date-range-picker's Issues

Disabled dates not working by selecting date range with template.

@ipiz Hi, Thanks for adding disabled dates feature, we really appreciate that :) During tests I got some wired bug when selecting templates, it also selects disabled dates and in returned object we can see them.
Would be great if you will fix that :)

One more time thanks.

Remove This year and Last Year options

I'm using a custom template along with the given template. I'd like to have day, week, month and 6 months options. Is there any way I can hide/remove the Year button?

When we add custom templates, how can we get that selected by default ?

$rootScope.mdCustomTemplates = [
  {
    name: 'Last 30 Days',
    dateStart: new Date(tempDate),
    dateEnd : new Date()
  }
];

$rootScope.selectedRange = {
  selectedTemplate: 'TW',
  selectedTemplateName: 'Last 30 Days',
  dateStart: new Date(tempDate),
  dateEnd: new Date(),
  showTemplate: true,
  fullscreen: true,
  firstDayOfWeek: 0,
  customTemplates: $rootScope.mdCustomTemplates,
  isDisabledDate: $rootScope.isFutureDate
};

I want Last 30 Days to be selected by default.
Something like this:

$rootScope.selectedRange = {
  selectedTemplate: 'L30D',
  selectedTemplateName: 'Last 30 Days',
  dateStart: new Date(tempDate),
  dateEnd: new Date(),
  showTemplate: true,
  fullscreen: true,
  firstDayOfWeek: 0,
  customTemplates: $rootScope.mdCustomTemplates,
  isDisabledDate: $rootScope.isFutureDate
};

mdDateRangePickerService -> add ng-if=showClear option

in the mdDateRangeDirective there is an option to remove the clear button, yet the mdDateRangePickerService there is no such option

Would love to have that option :)
Thank!!

Feature request: user-specifiable highlighted dates

I want a set of days to be highlighted.

It would address my use case if md-date-range-picker took a callback isHighlightedDate (similar to isDisabledDate) and added a something-something__highlighted class to exactly those days for which isHighlightedDate returns true.

It would be much less useful for me if I have to specify the set of days as an argument to the <md-date-range-picker ...> tag, due to fetching the list of dates from muh server, asynhronously. I don't have a need for changing the set of highlighted dates once I know it, but others might find this useful.

How to disable the future dates?

If there is already an option to do this, please make the reference doc much more informative by including those options.

Crashing on firefox and safari

Just open the demo page on those browser and you will see..

Any quick fix for that?

Console log

Is it possible we could remove this console log. Thanks again!

md-date-range-picker/src/md-date-range-picker.js

Line 587 in 2d05958

console.log($scope.format);

Infinity loading when I add first-day-of-week arg

When I add first-day-of-week="0" or first-day-of-week="1" I get infinity loading on my page.
Here is the part of my HTML with datepicker:

                <div flex="100">
                    <md-date-range auto-confirm="true"
                                   first-day-of-week="0"
                                   show-template="false"
                                   one-panel="true"
                                   placeholder="{{ 'stages.DATE' | translate }}"
                                   format="stageCtrl.formatDate"
                                   md-on-select="stageCtrl.updateDateFilter()">
                    </md-date-range>
                </div>

And it works normally if I don't add this argument, like this code:

                <div flex="100">
                    <md-date-range auto-confirm="true"
                                   show-template="false"
                                   one-panel="true"
                                   placeholder="{{ 'stages.DATE' | translate }}"
                                   format="stageCtrl.formatDate"
                                   md-on-select="stageCtrl.updateDateFilter()">
                    </md-date-range>
                </div>

And one more question how to switch on "Clear" button inside of Datepicker? And if there any event or ay I can get after I press "Clear" button to update my data on the page?

Showing already selected dates

Is there any options to highlight currently selected multiple date range, if Calendar UI is opened in edit mode. So if user has selected some date ranges and saved it, opening the UI, should show the already selected date ranges in Calendar

Can I add custom buttons of date range ?

Calendar does not close after select option in custom template list

After selecting a custom template, the calendar does not close with the option auto-confirm="true"

calendarStartDate / calendarEndDate wrong calc

calendarStartDate / calendarEndDate wrong calc when month start on Sunday and should be the first day view on calendar

calendarStartDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1 - (monthStartDate.getDay() == 0 ? 6 : (monthStartDate.getDay() - getFirstDayOfWeek()))),

the ? 6 should be set to 0 and not 6.
same as calendarEndDate

Setting start date time to end of day

Line 150, there's $scope.dateEnd && $scope.dateStart.setHours(23, 59, 59, 999);
instead of $scope.dateEnd && $scope.dateEnd.setHours(23, 59, 59, 999);

It couses troubles when you want to set start date at start.

Angular 4 Integration

Hey,
It is possible to change all templateUrls to inline templates? This will make the Angular 4 integration way easier. I upgraded the component and all is fine beside this templateUrl thing.

Thank you.

There is no way to manually set the date in the input field

Picking dates with different years not working

Would it be possible to nest the dialog on top of an existing dialog?

I created a pull request #43 that should allow this, but if more changes are needed let me know or feel free to change it yourself 😄
Thanks!

firstDayOfWeek option doesn't work

I could not get the firstDayOfWeek option to work. Modifying START_OF_WEEK on md-date-range-picker.js,128 does work, so it looks like there's a bug in the assignment when the directive is set up. Am I missing something?

is func inCurrentMonth missing years?

I believe there is a comparison missing for years in this particular function.
Because months can be the same, but not the year, and that should trigger the focus method.

This is what I'm talking about:

function inCurrentMonth(date, isSecondMonth) {
  return !isSecondMonth ?
     date.getMonth() === $scope.activeMonth && date.getFullYear() === $scope.activeYear:
     date.getMonth() === $scope.activeMonth2 && date.getFullYear() === $scope.activeYear2;
}

Customisation of selected date

Hi there,
I am trying to use the date picker and I would like to have a different format when range is selected. (My users do not want to see english). I would like to have something like '05/11/2018 - 26/12/2018'.

I cannot see how i could customize it that way , i have been able to translate most of the calendar with the localizationMap but I cannot get this to work.

Could you tell me how to achieve this?

Code is pretty simple so far:

       <md-date-range
                ng-model="vm.filters.appointmentDateRange" localization-map="vm.localizationMap" >
            </md-date-range>

and

vm.localizationMap = {
			'Mon': 'Lu',
			'Tue': 'Ma',
			'Wed': 'Me',
			'Thu': 'Je',
			'Fri': 'Ve',
			'Sat': 'Sa',
			'Sun':'Dim',
			'This Week': 'Settimana corrente',
			"January": "Janvier",
			"February": "Février",
			"March": "Mars",
			"April": "Avril",
			"May": "Mai",
			"June": "Juin",
			"July": "Juillet",
			"August": "Aout",
			"September": "Septembre",
			"October": "Octobre",
			"November": "November",
			"December": "Decembre"
		};

		vm.filters =
		{
			appointmentDateRange: {
				//selectedTemplate: 'TY',
				//selectedTemplateName: 'Anno corrente',
				dateStart: new Date(),
				dateEnd: new Date(),
			}
		};

Thanks for the help and for the good work :)

Illegal Invocation Typeerror

$scope.pick = function($event, showTemplate) {
            console.log('Button Fired!');
            $scope.selectedRange.showTemplate = showTemplate;
            $mdDateRangePicker.show({
                targetEvent: $event,
                model: $scope.selectedRange
            }).then(function(result) {
                if (result) $scope.selectedRange = result;
            })
        };

I think you should remove the property targetEvent: $event from the object, it worked for me.

IE11 not registring all clicks on dates

When the user opens the menu to select a date. He/she cannot click on the date itself. They will need to click on the circle around the date.

This is because the date itself is a new element. And the onclick event cant reach the event-id on the surrounding element. In chrome this works perfectly. In IE11 it (ofcourse) does not.
In the code it is written like this
<div class="md-date-range-picker__calendar"> <span ng-repeat="date in dates" event-key="date1" event-param="{{$index}}"> <span class="md-date-range-picker__calendar__selection" ng-bind={{::date.getDate()}}></span> </span> </div>

Calendar isn't displayed correctly when the 1st day of the month is Sunday and first day of the week set to Monday

If the first day of the month is a Sunday and first day of the week set to Monday, day 1 isn't shown on the calendar. The behavior seems to be correct if the first day of the week is set to Sunday.

Customisation

Hi,

First of all thanks for the good work.

I have some question :

How to change the local ? I see the localmap but what is the format of this input.
How I can change the color of the selected range ?

Thanks you

How to display only current month

Is there an option to display only current month, instead of two months

When month starts on a Sunday, first-day-of-week>0 hides first days of month

When a month starts on a Sunday, such as October 2017, and I set first-day-of-week="1", the first date in the grid is October 2nd. I would expect a row with October 1st and the last six days of September being shown (the days of September being low-lighted).

md-date-range directive not working in angular1.6.2

Cannot read property 'selectedTemplateName' of undefined error in console

Add the possibility to use different languages

Hi how that's going?
I'm using the md-date-range-picker component. I'm wondering if is possible to use different languages. Is there a workaround to do this? I think that set the lang as some param is not the unique way, could be great, at least, set the month names, week day names and filtering options (such as "last month", "this year", etc..) verbiages settable. I'll appreciate an answer.
Kind regards.

Close the calendar when I select the departure date

I would like to know how to modify the js so that the calendar closes when I select the date of exit. I do not know if it's an option that comes in the directive.

Thank you.

localization , can I override the labels of the picker ?

I want to be able to override the all the labels of the picker for localization is that supported ?

Documentation missing

Hello,

Is there any documentation available?

Feature request: number of days on selected range

Maybe to put number of days inclusive and or exclusive when 2 dates are picked ???

custom templates doesn't hide

does not close the drop down list of custom templates and click outside of it and hide the calendar

customTemplates in model dont show

I'm trying to add some custom templates and they don't seem to be showing when the calendar is instantiated, only the default templates are. Here's my code:

angular
.module('core')
.controller('baseCtrl', baseCtrl);

baseCtrl.$inject = ['$scope', '$mdDateRangePicker'];

function baseCtrl($scope, $datePicker) {
	var vm = $scope;

	vm.date = {
		showTemplate: true,
		customTemplates: [
			{
				name:"Last 3 Months",
				dateStart: new Date((new Date()).setMonth((new Date()).getMonth() - 3)),
				dateEnd : new Date()
			},{
				name:"Last 6 Months",
				dateStart: new Date((new Date()).setMonth((new Date()).getMonth() - 6)),
				dateEnd : new Date()
			}
		]
	}
	vm.showDate = function($event, showTemplate){
		$datePicker.show({targetEvent:$event, model:vm.date} ).then(function(result){
			if(result) vm.date = result;
		})
	}
}

Also, is there a way for this to work and is there a way for me to disable the default templates?

License?

Do you plan to add a license for this plugin?

Rendering issue??

Hello,

Love the concept and am hoping to use your library in my project. One issue I'm having is that it's not rendering like your demos. I'm using the md-date-range directive. I have attached a screenshot of what it looks like for me:

Notice how the navigation (back, month, year, forward) seems to be rendered incorrectly. Have you seen this before?

I'm using latest (master) version of Angular Material however switching versions appeared to make no difference.

EDIT: I should also add that I have show-templates=true and I'm not seeing the templates either.

Thanks,
Dinko

Change locale

Hello! How can I change language of the months/weeks and of the custom template?
https://material.angularjs.org/latest/api/service/$mdDateLocaleProvider
I try like this but doesn't works...

angular 2 support

do you support this with angular 2?

open mdDateRange instead of mdDateRangePicker

Is there a way to open "mdDateRange" on button click or any other event (the one that opens in md-menu). instead of "mdDateRangePicker" (this one open in md-dialog)?

the documentation only has work around for "mdDateRangePicker"

$scope.selectDateRange = function () {
  $mdDateRangePicker.show({
    model: $scope.serviceModel,
  }).then(function (result) {
    $scope.serviceModel = result;
  }).catch(function () {
    console.log('Cancelled');
  }
}

this on opens in dialog box...

but i want the one that opens in md-menu to open on my event

Please help..
Thanks in advance

Auto Confirm using Service

Is it possible that using auto confirm can be added to the service configuration?

$mdDateRangePicker.show({
    autoConfirm: true,
    targetEvent: $event,
    model: {}
})

I browsed through the source and it doesn't appear to be an option.

Thanks!

The $mdOpenMenu method is deprecated. Please use `$mdMenu.open`

Everytime I open the range-picker, I get this warning. You should update to $mdMenu.open

RangeError: Maximum call stack size exceeded

Hi,
I am getting this error after adding this library:

at Date.setMonth (<anonymous>:1024:39)
at Date.setMonth (<anonymous>:1025:132)
at Date.setMonth (<anonymous>:1025:132)
at Date.setMonth (<anonymous>:1025:132)
at Date.setMonth (<anonymous>:1025:132)
at Date.setMonth (<anonymous>:1025:132)
at Date.setMonth (<anonymous>:1025:132)
at Date.setMonth (<anonymous>:1025:132)
at Date.setMonth (<anonymous>:1025:132)
at Date.setMonth (<anonymous>:1025:132)

How I can fix this error.

Focus on same start and end date

I know this is a range picker, but I use it as a regular calendar because I prefer it over the Material Design option.
Because of this, I set the start and end date with the same variable.
Everything works fine, except when I want to see the date and see it focused.

This is what I guess it's causing this specific problem:

As in my case, both, start and end date are the same.

Is there any solution for this?

Any help would be appreciated! 😄

Throwing error of Can't copy

angular.min.js:117 Error: [ng:cpws] http://errors.angularjs.org/1.5.5/ng/cpws
at angular.min.js:6
at c (angular.min.js:12)
at d (angular.min.js:12)
at c (angular.min.js:12)
at d (angular.min.js:12)
at c (angular.min.js:12)
at Object.qa [as copy] (angular.min.js:14)
at mdDateRangePickerService.show (md-date-range-picker.js:734)
at n.$scope.selectDateRange (?hcode=10)
at fn (eval at compile (angular.min.js:230), :4:351)

Show only 1 calendar

Is it possible to show only 1 calendar ant not 2 like default?
How could I implement this changes?

Thank you!

Can we disable future dates from the controller?

Like this

$rootScope.selectedRange = {

     selectedTemplate:'L30D',
      selectedTemplateName: 'Last 30 Days',
      dateStart: new Date(tempDate),
      dateEnd: new Date(),
      showTemplate: true,
      fullscreen: true,
      firstDayOfWeek: 0,
      isDisabledDate: '$rootScope.isFutureDate($date)'

};

$rootScope.isFutureDate = function ($date) {

      return $date.getTime() < new Date().getTime();

};

One specific day repeating on all days

Hello, its me again.

With the new update, one of the days is showing as all days of the current month (just on firefox)

npm start errors...

Hi There :)
Thx for this plugin ! it really looks great and has all the features im looking for ...
I just cloned this project and tried to npm start it but it show some errors ...
I did try to make my own project by using your example but for some reason some widgets are missing ( probably CSS issues ) ...
Am I missing something ? or its a known issue ?
thanks alot again
Etay

Can we disable selecting future dates?

Hello, thanks for cool project.
Is there a way to disable future dates?