vlio20/angular-datepicker

Highly configurable date picker built for Angular applications

angular-datepicker's Issues

DateRangePicker

So I know this doesn't have daterangepicker capabilities yet, but if/when that occurs, here are some features I used in the old one:

• passing in a daterange to be chosen initially, or at any time during the use of the picker (say, someone adjusts the date from an external input).

• have multiple calendars, and those calendars are separate, meaning moving through months on one does not affect the other's month. The old implementation also did not allow the left calendar to pass the right calendar going forward, and vice-versa.

• Being able to select the start or end date on either calendar, potentially both on the same one. First click is start date, then a click after that date would be the end date, but a click before that date would move the start date further back.

I believe everything I described is how the ob-daterangepicker used to work. I can see how the new one is already set up pretty well to deal with dateranges, but if there is any way I can help with this please let me know.

I don't think the package is installing correctly

The module import for index.ts is export * from './bin/app/index'; but there is no app folder created during the install and so typescript does not work correctly

Disabled attribute is broken

Add min view option

0: day
1: month
2: year

add monthNames config.

Hello, this module is great, but it lacks an option to change the names of months, similar to weekdayNames.

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost/ng2-date-picker

Hi
"ng2-date-picker": "^1.4.2" to my package.json and added the imports to the datepicker in my app.module.ts file.

I have the datepicker files in the folder "node_modules\ng2-date-picker" but when I run the app, i get the following error ?
(index):24 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost/ng2-date-picker Error: XHR error (404 Not Found) loading http://localhost/ng2-date-picker at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost/node_modules/zone.js/dist/zone.js:1032:39) at ZoneDelegate.invokeTask (http://localhost/node_modules/zone.js/dist/zone.js:414:31) at Zone.runTask (http://localhost/node_modules/zone.js/dist/zone.js:181:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost/node_modules/zone.js/dist/zone.js:476:38) Error loading http://localhost/ng2-date-picker as "ng2-date-picker" from http://localhost/app/app.module.js at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost/node_modules/zone.js/dist/zone.js:1032:39) at ZoneDelegate.invokeTask (http://localhost/node_modules/zone.js/dist/zone.js:414:31) at Zone.runTask (http://localhost/node_modules/zone.js/dist/zone.js:181:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost/node_modules/zone.js/dist/zone.js:476:38) Error loading http://localhost/ng2-date-picker as "ng2-date-picker" from http://localhost/app/app.module.js

Upgrade to Angular 4

Add option to hide/show next and prev month days

Lots of "parameter 'x' implicitly has 'any' type" errors.

I'm having the following errors after "npm start":

ERROR in [at-loader] ./node_modules/ng2-date-picker/date-picker/date-picker.component.d.ts:50:18 
    TS7006: Parameter 'FormControl' implicitly has an 'any' type.

ERROR in [at-loader] ./node_modules/ng2-date-picker/date-picker/date-picker.component.d.ts:50:31 
    TS7006: Parameter 'string' implicitly has an 'any' type.

ERROR in [at-loader] ./node_modules/ng2-date-picker/date-picker/date-picker.service.d.ts:16:30 
    TS7006: Parameter 'FormControl' implicitly has an 'any' type.

ERROR in [at-loader] ./node_modules/ng2-date-picker/date-picker/date-picker.service.d.ts:16:43 
    TS7006: Parameter 'string' implicitly has an 'any' type.

ERROR in [at-loader] ./node_modules/ng2-date-picker/day-calendar/day-calendar.component.d.ts:35:18 
    TS7006: Parameter 'FormControl' implicitly has an 'any' type.

ERROR in [at-loader] ./node_modules/ng2-date-picker/day-calendar/day-calendar.component.d.ts:35:31 
    TS7006: Parameter 'string' implicitly has an 'any' type.

ERROR in [at-loader] ./node_modules/ng2-date-picker/day-calendar/day-calendar.service.d.ts:25:30 
    TS7006: Parameter 'FormControl' implicitly has an 'any' type.

ERROR in [at-loader] ./node_modules/ng2-date-picker/day-calendar/day-calendar.service.d.ts:25:43 
    TS7006: Parameter 'string' implicitly has an 'any' type.

Currently using Angular 4.1.3 with Webpack, brand new project from Angular.io website. Is it just me? Seems to be just a matter of making the any type explicit.

Add cancel and apply button

Remove demo code from versioning

Create a different repo for the demo page

Styling

Any way to enhance the styling of that component?

version 0.61 display issues

If i click on the input with version 0.6.1 (crreunt version), the date picker module shows up somewhere completely different on the screen. When I select a date, it displays the time in the input as well as the date. An error also shows up in the console.

I have reverted to version 0.2.1 and this issue no longer occurs.

The month calendar component don't config monthFormatter.

Path: angular-datepicker/src/app/month-calendar/month-calendar.component.html

Code:

{{month.date.format('MMM')}}

Some features does not working

Hi @vlio20

First, thank you for this awesome package.

Some features i want to use do not work. Used and does not work features below.

Configuration:

Name	Type	Default	Description
closeOnSelect	Boolean	true	If set to true will close the date-picker after choosing a date from the calender, otherwise, won't

Attributes:

Name	Type	Default	Description
minDate	Moment or String	undefined	This is a validation rule, if the selected date will be before minDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object

I also could not work events.

For example:

Name	Type	Description
dayClick	EventEmitter<Moment[]>	Emits the currently selected days every time the selection changes

Use Case:

<dp-day-picker
    [(ngModel)]="install"
     name="install"
     #install="ngModel"
     [required]="true"
     [class.dp-material]="true"
     [config]="datePickerConfig"
     [minDate]="'2017-05-16'"
     (dayClick)="catchEvent($event)">
</dp-day-picker>

Main config:

public datePickerConfig: Object = {
    format: "DD/MM/YYYY",
    closeOnSelect: true,
    weekdayNames: {
      "su": "Pz",
      "mo": "Pzt",
      "tu": "Sal",
      "we": "Çar",
      "th": "Per",
      "fr": "Cum",
      "sa": "Cmt"
    }
  };

Thanks.

Feature: Inline DpCalendarContainerComponent

I would like the ability to display the calendar picker inline instead of as a popup (not attached to an input text box). mydatepicker has an example of this inline mode, but I would prefer to just use a different component instead of changing a property on the picker.

This could be accomplished by moving functionality into the existing dp-calendar component or creating a new dp-calendar-container component. I would lean towards making a new dp-calendar-container component, so I'll write out my design with that assumption.

DpCalendarContainerComponent

Inputs:

• selected: Moment[]
• config: ICalendarContainerConfig (a subset of IDayPickerConfig)

Outputs:

• selectedChange: Moment[]
• dayClick: {day: ICalendarDay, event: MouseEvent} (the click event on a given day)
• dayContextMenu: {day: ICalendarDay, event: MouseEvent} (the right-click contextmenu event on a given day)
• calendarMove: {base: Moment, months: number}

Everything in dp-day-picker that has to do with the contents of the popup would be moved into the new dp-calendar-container component.

What do you think? Should I start on the PR?

New version with support for material as show in demo app

Exist any changes that you publish new version for integrate with material as show the demo in master branch using DatePickerDirective?, actually i used the last version published in npm 1.3.0.
Thanks.

Feature request: Multi select

I'd like to be able to select multiple dates on a <dp-calendar>. If you're interested in this feature, I can work on a pr.

Add stylings to demo page

Internationalization option for month names

I see there's a weekdayNames option to internationalize weekdays, but I can't see a monthNames. Is it on the roadmap?

Make utils service injectable

Utils Service should be injectable

Move all css metrics/colors to variables

ERROR in DpDatePickerModule is not an NgModule

I had this error:

ERROR in DpDatePickerModule is not an NgModule

ng -v

• @angular/cli: 1.0.0
• node: 6.9.5
• os: win32 x64
• @angular/common: 4.0.1
• @angular/compiler: 4.0.1
• @angular/core: 4.0.1
• @angular/forms: 4.0.1
• @angular/http: 4.0.1
• @angular/platform-browser: 4.0.1
• @angular/platform-browser-dynamic: 4.0.1
• @angular/router: 4.0.1
• @angular/cli: 1.0.0
• @angular/compiler-cli: 4.0.1

i try use this module on a new proyect but error still happen.

• ng new testing
• cd testing
• npm install ng2-date-picker --save

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import {DpDatePickerModule} from 'ng2-date-picker'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, DpDatePickerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

app.component.ts

import { Component, ViewChild } from '@angular/core'; import { DpDayPickerComponent } from 'ng2-date-picker'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('dayPicker') dayPicker: DpDayPickerComponent; selectedDate; datePickerConfig = { "format": "DD/MM/YYYY", }; public constructor() { } ngOnInit() { } show(date) { if (this.selectedDate) { console.log(this.selectedDate.format('DD/MM/YYYY')); } } }

app.component.html

<dp-day-picker #dayPicker placeholder="DD/MM/YYYY" [(ngModel)]="selectedDate" [config]="datePickerConfig" maxlength="10" ></dp-day-picker>

Navigation buttons missing type attribute

Navigation buttons in datepicker seem to be missing type="button", default value is submit for most browsers.
This submits form if datepicker is used inside a form which propably is not what you want.

ngModel that can't be parsed as a date causes infinite loop

Working on a PR.

Add single day/month format configuration option

Blur is broken

input blur doesn't close the picker.

Append option to append calendar to different element (body)

The calendar should be appended to body, this will prevent it to be hidden if placed inside overflow hidden container.

Add option to pass a class to the popup

should be set as an attribute

Change Name of Month

I dont know if you had this option or not. If not can you add more?

Navigation buttons not working

Navigation buttons not working

How do I know about changes?

Hello! Awesome component, trying to use it, but I have a problem. I need to refresh data on page whenever a user picks a date. However I could not find a way to catch a click or a change event. An @output would be nice.

Documentation in NPM seems outdated but it mentions a few outputs. No traces of them in current DatePickerComponent though.

Feature Request: Attach dp-popup to any component

I use material2 inputs for all my text inputs. It would be nice to be able to attach a dp-popup somehow to a material2 input and have the dp-popup update the value of that component.

I realize this would require a fair amount of refactoring. I'm happy to help with that if this is a direction you want to go.

DpDatePickerModule is not an NgModule

I'm getting the error
DpDatePickerModule is not an NgModule
in a angular-cli based application. I downloaded and imported the module as said in the guide.

Open popup delay

Add option for add a delay to the popup to be opened

[Question] How to automatically open the datepicker on focus

Well title says it already. I added the dp-day-picker element but I have no clue how to open the day picker when the input is focused.
Can you provide some hint?

Rearrange nav buttons to support apply and cancel

This button will clear the input

Error when trying to use component api

Hi there. I'm using angular 2.2.1 and when I try to use ViewChild according to your given example it throws an error. My component's setup is:

import { Component, ViewChild } from '@angular/core';
...
export class ShareComponent {
  @ViewChild('dayPicker') dayPicker: DpDayPickerComponent;

  public openDatePicker(type) {
     this.dayPicker.api.open();
  }
}

When I call openDatePicker from template I get an exception:

error_handler.js:48 EXCEPTION: Error in ./ShareComponent class ShareComponent - inline template:41:10 caused by: Cannot read property 'api' of undefined
ErrorHandler.handleError @ error_handler.js:48
next @ application_ref.js:298
schedulerFn @ async.js:89
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:81
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:259
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
error_handler.js:50 ORIGINAL EXCEPTION: Cannot read property 'api' of undefined

Create year view selector

When activated clicking on the year will transform the date picker to year/month picker

Add missing e2e tests

In order to go forward e2e test coverage has to increase.

Add time picker option

Inline calendar has no provider for DayPickerService

You can see this in the demo if you change the mode to "Inline". I'll take a crack at fixing this in a PR.

Multiple months in the picker (calendarsAmount)

Do you plan to add back in the calendarsAmount feature?

It seems to have disappeared in version 1.x.

Fix Travis

Add option to show calendar weeks

[Bug] Date picker inside relative element misplaces the widget

dp-day-picker can not be placed inside a relative container as the top/left value are calculated from page top/left instead of the relative container.
This results in the widget being totally misplaced the further down the element is on the page.

add "is" prefix to ICalendarDay items

This should make the interface more declarative

Move to current date calendar

add button which a click on will move the first calendar to the current date.

Unit test parameters are wrong

@isaacplmann, seems line this test is working but the parameters provided to getConfig method are not correct. The method should receive HTMLElement when in the test it receives a string. In my opinion the getConfig method should receive also strings and handle the conversion to HTMLElement, WDYT?

@isaacplmann, can pls fix this issue?

Here is the link to the test:

angular-datepicker/src/app/date-picker/date-picker-directive.service.spec.ts

Line 40 in 6d3f158

const config3 = service.getConfig({ allowMultiSelect: true }, 'fakeElement');

Popup always opens on current date instead of showing last visited calendar.