kevinoleary19/angular-2-datepicker

A minimalist datepicker inspired by Google's material design

angular-2-datepicker's Issues

Open datepicker from outside

We use the component inside a div with and have an icon next to it. I'd like to open the datepicker by clicking on the icon. Is there a way to do it like this:

<md-icon id='date_icon' (click)="datepicker.onInputClick()">date_range</md-icon>
<material-datepicker #datepicker
                     [date]="initialDate"
                     formControlName="date"
></material-datepicker>

I tried it like this so far this way and also by accessing it from the parent component - does not work in both cases.

It would be great to have an API endpoint exposing the trigger method.

Thanks a lot!

readonly attribute into directive

Hi!

Is it possible to make datepicker input field readonly? If not, would you be so kind as to add such attribute?

Text in input field should be grayed-out when disabled

When the 'disabled' parameter is true, it would be more user-friendly if the text in the input field were grayed-out. As it is now, it's not clear to the user that the datepicker is actually disabled.

Calendar not showing

Hi! Thanks for your amazing work. I'm trying to use this component with material 2, but i'm having css issues. The calendar doesn't shows because this line

.datepicker > div {
    display: none;
}

Here's another css issue:

Possibly make the ranges impact selection on a more granular level by preventing days, not just months, from being selected.

Hello
This was a great component to use.When can we expect this feature embedded.Because this is the only feature lagging for my needs to use this good component.

rangeStart not working

I wanted to hide past date and only present and followed date must be able to select. I tried passing the Current Date using Date Object but it's not working. Is there anyway in which i can restrict past date from selecting??

Date Format

The default date format it says to be YYYY-MM-DD, although the date is always displayed using "/" and not "-". Is there a way of changing it?

Issue with lazy loading.

Got this error when using this component in a module which is being lazy loaded by the router.

Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

Use it in App.module.ts works. I think he problem is caused here by:
https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-browser-vs-common-module

I am not sure if BrowserModule is needed here https://github.com/koleary94/Angular-2-Datepicker/blob/master/src/datepicker.module.ts#L12

Maybe CommonModule can be used instead?

Unable to compile with Browserify

I'm having issues compiling with my Browserify module. I haven't yet investigated module changes however this is the error.

..../angular2-material-datepicker/index.ts:1
export * from './src/datepicker.module';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

System JS config

Hey do you have an example of using this with system js?

.setDate should reset text if !value

I tried to use this component, but it's impossible to "clear" a date. Instead of that datepicker always shows current date.

Maybe setDate() should clear the text if passed argument is falsy?

Calendar closes when month is changes

Just finished installing, and I noticed very quickly that if you press the arrows to go forwards or backwards by a month, anywhere that isn't a date, or really anywhere in the document, the component will immediately close the calendar. Upon opening the calendar again the month is properly updated and date selection is fine given you were attempting to change one of those.

I looked at your source and the issue is minor abuse of the global click handler in src/datepicker.component.ts:479 where no matter what is clicked on the page, the closeCalendar() function gets called.

It is possible to call an inline version?

Hello,

I'm integrating your component on an Ionic app. I was wondering if it is possible to add an attribute to make it inline.

Also the option of disable some dates would be very appreciated.

Thanks.

Calendar not displayed with @angular/material "2.0.0-beta.3"

After upgrading my system from @angular/material": "2.0.0-beta.2" to @angular/material": "2.0.0-beta.3", the calendar is no longer displayed when user clicks on datepicker.

Error on importing module - Unexpected character '@' (9:0)

I have tried to include this directive in my project, but i got an next error in console:

common.js:12192 ./~/angular2-material-datepicker/src/datepicker.module.ts Module parse failed: /home/freem/Work/Projects/maketalents-ui/node_modules/angular2-material-datepicker/src/datepicker.module.ts Unexpected character '@' (9:0) You may need an appropriate loader to handle this file type. | export * from './datepicker.component'; | | @NgModule({ | declarations: [ DatepickerComponent ], | exports: [ DatepickerComponent ], @ ./~/angular2-material-datepicker/index.ts 1:0-40

I build my project with webpack and here is my part of webpack.config.js of TypeScript files loader:

module: { rules: [ { test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] }] }

If i exclude Datepicker from dependecies and imports - project works correctly.

Unable to run tests because of recompilation of .ts files in node_modules

  Error: Module build failed: Error: Typescript emitted no output for home/workspace/angular2-material-datepicker/index.ts.
  You should not need to recompile .ts files in node_modules.
  Please contact the package author to advise them to use --declaration --outDir.
  More https://github.com/Microsoft/TypeScript/issues/12358
      at Object.loader (/home/workspace/my-app/node_modules/ts-loader/dist/index.js:29:15)
  at karma-test-shim.js:136166

`(ngModelChange)` function not getting called on date change.

How can I call a component function when the date is changed?

how to run demo?

I have run 'npm install' but how to run demo application in a http server?

Datepicker styles seems broken in Internet Explorer 10

Flex layout is not correct in IE10.
see screenshot for more info
http://prntscr.com/esowrf

It's looks like IE doesn't handle flex-wrap property correctly

angular 4.0.1
angular2-material-datepicker: 0.5.0

How can I change the datepicker text input height by overriding the css.

Am just using below line now
<material-datepicker id="licensestart" [(date)]="user.licenseStart" placeholder="">

But the height and width are little bit high compared to my text inputs.Am not sure how to override those classes.

Unable to Work with Two Date fields

Hi

Iam using Angular 4 in my application and i have two date fields to select which is start and expiration date. But now when i select the date of any start or expiration date, the same date is getting displayed in both the fields.

Any idea to differentiate the values of two fields.

Thanks

Passing an invalid date causes the page to hang.

Issue seen in both latest release and latest beta.

Passing undefined to [(date)] works as intended.
Passing new Date(undefined) causes the page to hang indefinitely.

[0.6.0-beta3] Year input field is always invalid until the user selects a date in a month other than the current month.

Can't insert a valid value into the Year input field until the following steps are followed:

1. Open calendar.
2. Change month.
3. Select date.
4. Reopen calendar.
5. A valid year can now be entered.

Does the datepicker take this: 2015-06-29T00:00:00

My model is passing this date: 2015-06-29T00:00:00 to
<material-datepicker [(date)]="activeLeaseDetails.endDate" dateFormat="MM-DD-YYYY"></material-datepicker>

Now, when it does, this is what I get:

If I'm not supposed to send a date like, "2015-06-29T00:00:00", could you explain what the date should look like?

Thanks!

How to set the range start and end date using the Angular2-datepicker

Hi,

Could you please let me know how to set the range start and end date for the date picker .
For example i need to set the range start to 4 apr 2017 and end date as 7 jun 2017.

Thank you!

Angular 4 support

@koleary94 will this be updated to support angular 4? Thanks

How extend or override style input.

Hello, I try to extend, override component and CSS.
but it's not work.

I want to change your input style to right style.
how can I do?

Thanks.

rangeStart and rangeEnd

Great work by the way!

I noticed that rangeStart and rangeEnd only limited changing the date granular down to the month. Is it possible to have the range limited down to the day?

Go back many years

Is there another way to go back many years instead clicking month by month?

For example, if I need to set a date of the year 1985, I need to go back one month at a time until I arrive to that year?

Thanks!

update docs

a bit more description would be helpful. For instance, (dateChanged) is a useful emitter to know about without digging through the source code. great module, thanks.

German date format not supported (dd.MM.yyyy)

Hi!
I would like to integrate your component in my project. It seems like a perfect fit besides the support of the date format. Looks like only hyphen-separated formats are currently supported.
Do you have plans to support dot separated formats like the german one as well ?
Thanks a lot!
Kind regards
Markus

Unable to compile

I'm unable to compile my application after installing and attempting to implement this datepicker. The console error says "Tye 'null' is not assignable to type 'Date', and references line 387 of your datepicker.component.ts file.

Datepicker needs "another" placeholder

Angular Material uses the placeholder attribute for the label.

If I try to do the same with the datepicker, the "label text" gets replaced by the actual date value.

To be consistent, shouldn't the datepicker keep the label text above the picker?

doesnot have form validation

No option for dirty || untouched events,
want to use the angular form validations with .

weekStart option has no effects

I'm setting weekStart option to 1, but week always start on Sunday.

In the component, I can see that class Calendar is instantiated without passing the firstWeekDay parameter, so the object is always created with its firstWeekDay property setted to 0.

If this omission is intentional, then the option weekStart shouldn't be documented in README.md, as is now.

Compile fail: 'typeof Calendar' has no index signature.

I get the following error when adding version 0.5.0 to my project.

angular2-material-datepicker/src/calendar.ts(78,5): error TS7017: Element implicitly has an 'any' type because type 'typeof Calendar' has no index signature.

It fails because I have "noImplicitAny": true, set in my tsconfig.json file.

An easy fix is to just cast Calendar to any on that line.

I'll submit a pull request shortly.

z-index issue

the picker is behind a button. Is there a z-index setting?

is it posibble to translate the calendar?

I would like to use this calendar in a different language. Are there any options?
couldn't find it yet...

Thx, Micha.

Having trouble using this in AoT compiled apps

I'm having trouble using this in our AoT (Ahead of Time compilation) build. AoT is necessary for any Angular 2 app that wants decent production performance.

I think the difficulty is mainly due to absence of *.d.ts files for your library. This causes ngc, when compiling my app, to try to also compile your library's *.ts files. This doesn't work since they're not under rootDir - since it's good practice to keep third party libraries in a separate directory tree from your own app code.

I tried compiling the library with 'npm run ngc', but it seems that is broken in a couple ways.

The "files" target in tsconfig-aot.json references integration-test/ files - that directory doesn't exist in the git clone. I changed files to [ "src/main.ts", "src/datepicker.module.ts"] and got past this issue.

Also noImplicitAny: true is turned on, but the code doesn't pass noImplicitAny rules. Turning that off got me past this issue.

Also the compiler option "declaration": true should be present in order to create .d.ts files. When I turn this on however I get these errors:
Error: Error at /.../Angular-2-Datepicker/src/datepicker.component.ts:331:33: Public property 'dateFormat' of exported class has or is using private name 'DateFormatFunction'.
Error at /.../Angular-2-Datepicker/src/datepicker.component.ts:702:43: Return type of public method from exported class has or is using private name 'ValidationResult'.
Error at /.../Angular-2-Datepicker/src/datepicker.component.ts:722:40: Return type of public method from exported class has or is using private name 'ValidationResult'.

This is because the interfaces are used in the types of public @inputs. Adding "export" before the interface declarations fixed this.

After all this I was able to generate .d.ts files for the library. However I'm still having ngc compilation issues importing the DatepickerModule - but that is probably outside the scope of this issue.

Is this possible to test with protractor?

SystemJS import

I'm having trouble importing this into SystemJS. I've tried including the index, the module, the src folder, or just the base folder to no avail. Has anyone any advice on how to import this into SystemJS?

Error for reference:

Error: (SystemJS) XHR error (403 Forbidden) loading http://localhost/project/node_modules/angular2-material-datepicker/src
Error loading http://localhost/project/node_modules/angular2-material-datepicker/src as "angular2-material-datepicker"

Does this library work with model-driven forms?

How to use range dates?

Hi, how can I use the range date option to select a date? e.g. from date now to 7+ days or more ahead

Not advancing back when defining rangeStart and rangeEnd

I did use the properties for locking some dates, but once I set them, it is not posible to advance more than one month. Then coming back is not posible.

It would be nice to have a feature to block not just on a month basis but based on days.

tsc --noUnusedLocals: error TS6133: 'state' is declared but never used.

Hello,

When I run tsc --noUnusedLocals I get these two errors:

../node_modules/angular2-material-datepicker/src/datepicker.component.ts(3,43): error TS6133: 'state' is declared but never used.
../node_modules/angular2-material-datepicker/src/datepicker.component.ts(312,23): error TS6138: Property 'renderer' is declared but never used.

// package.json
"angular2-material-datepicker": "^0.5.0",

Importing like so:

import { DatepickerModule } from 'angular2-material-datepicker';

Using formControlName with material-datepicker gives No value accessor for form control

Please help me on below. I am using material-datepicker with reactive forms.

I am getting the following error when the form loads.

Error: No value accessor for form control with name: 'birthday'
at _throwError (shared.js:122) [angular]
at setUpControl (shared.js:35) [angular]
at FormGroupDirective.addControl (form_group_directive.js:124) [angular]
at FormControlName._setUpControl (form_control_name.js:193) [angular]
at FormControlName.ngOnChanges (form_control_name.js:111) [angular]

allow user input to set date

It is often convenient and desirable for users to input text into the text input field instead of using the calendar.

I added this behavior to my implementation but seems a bit hacky and it would be preferable to allow this option as a component input flag.

This is what I did to implement this feature without editing the actual package component

e.g.

import { ViewChildren, AfterViewInit } from '@angular/core'
import { DatepickerComponent } from 'angular2-material-datepicker'
import { debounce } from 'lodash'
import * as moment from 'moment'
class ExampleComponent implements AfterViewInit {
  @ViewChildren(DatepickerComponent) datepickers;
  ngAfterViewInit() {
    function parseInputValue(value: string) {
      let md = moment(value, ['YYYY MM DD', 'MMMM DD YYYY'])
      let date = md.isValid() ? md.toDate() : undefined
      return date
    }
    let handleInputChange = debounce((ref: any, newDate: string, focusedInDate: any) => {
      if (String(newDate) !== String(focusedInDate)) {
        ref.date = newDate
        ref.onSelect.emit(newDate)
      }
      ref.closeCalendar()
    }, 500)
    this.datepickers.map(d => {
      let input = d.elementRef.nativeElement.querySelector('.datepicker__input')
      d.renderer.setElementProperty(input, 'readOnly', false)
      let focusedInDate;
      let newDate;
      d.renderer.listen(input, 'keyup.enter', () => {
        newDate = parseInputValue(input.value)
        handleInputChange(d, newDate, focusedInDate)
      })
      d.renderer.listen(input, 'focusout', () => {
        newDate = parseInputValue(input.value)
        handleInputChange(d, newDate, focusedInDate)
      })
      d.renderer.listen(input, 'focusin', () => {
        focusedInDate = parseInputValue(input.value)
      })
      d.renderer.listen(d.elementRef.nativeElement, 'click', ($event) => {
        if (String($event.target.className).indexOf('cancel') > -1) {
          handleInputChange(d, newDate, focusedInDate)
        } else {
          handleInputChange.cancel()
        }
      })
    })
  }
}

thanks. nice module

When rangeStart is set, you can't see the current month

1. Set a rangeStart
2. Open the calendar and switch to next 2 months
3. Try to come back to same month of date range.. You can't select this month unless you close and open the calendar again

How to change datepicker__calendar style

Hi:
i want overwrite datepicker__calendar style
so i write some code on scss file

  .datepicker__calendar{
    left:-300px;
  }

It's not work...
so can you tell me: how to overwrite css style
Thanks a lot.

momentje support

I tried to use the library for my project but I use momentjs for dates. it would be nice if the date model accepts moment, it would be way much better since it is backwards compatible with Date.