saturnteam/saturn-datepicker

Angular Material Datepicker with range selection

saturn-datepicker's Issues

Demo providing

Hi
I wonder if you can just add a demo folder with basic implementation.
Thanks

v6.0.4 doesn't include theme files

_theming.scss and bundle.css are missing from the latest version

Apply Date Format

How Can I apply my date format to saturn datepicker?

example that I apply to mat-datepicker:
providers: [
{provide: DatetimeAdapter, useClass: MomentDatetimeAdapter},
{provide: MAT_DATETIME_FORMATS, useValue: DateFormat},
],

Use ngx-mask

I would like to use
https://github.com/JsDaddy/ngx-mask

import { NgxMaskModule } from 'ngx-mask';
to mask my input field. Is there another way to mask the input ?

Error

Good night, I've done all the steps and when running the app, the following error occurs to me, can you help me?

Tks

rror: Template parse errors:
Can't bind to 'satDatepicker' since it isn't a known property of 'input'. ("
<input matInput
placeholder="Choose a date"
[ERROR ->][satDatepicker]="picker"
[value]="date">
<sat-datepicker #picker [rangeMode]="true"></sat"):

Saturn datepicker v.1.1.0 fails building in aot - Can;t resolve all parameters for SatCalendar

Hello guys, thank a lot for the module.
I faced the situation when saturn-datepicker fails building in aot.
Here is the image of error
.
Can you help? If it is needed I'll provide more information

Error with `ng build --prod`

There's a small chance I just don't know what I'm doing but when I run ng build --prod I get the following error:
ERROR in : Unexpected value 'SatNativeDateModule in C:/route/to/application/node_modules/saturn-datepicker/datetime/index.d.ts' imported by the module 'AppMaterialModule in C:/route/to/application/src/app/app-material.module.ts'. Please add a @NgModule annotation.

Any tips or ideas?

Separate sat-calendar

Hey,

I'd love to use sat-calendar without input like material mat-calendar. Something like this:
<sat-calendar [rangeMode]="true" [selected]="range"></sat-calendar> but styles are not being applied to selected range. I know, this is probably not the way, how it should be used, but it wold be nice to have this ability like mat-calendar has.

Is it possible to displaying 2 months ?

Hi,
I am trying to create a date range picker for angular 5 with angular material as close as possible to https://github.com/airbnb/react-dates/
Your component looks very promising, but is it possible to display 2 months in the calendar pop-up ?

Also, once start date is selected, is it possible to highlight the dates between start date and the date under hover ?

Many thanks

Inline

Is it possible to use the component inline (with the calendar visible at all times)?

Locale

Hi,

I tried to change locale format for the display date in Spanish format, but datepicker range don't get locale with

this.adapter.setLocale('es');

Normal datepicker give locale but datepicker range doesn't in same html.

Can you help me? Thanks

Default format

Hello,
I can't change date format in the input.
I changed global date format like in example: https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats. It's works only for the standard datepickers from Material UI.

Is it possible in this library?

Compatibility with Angular Material 5

In my current application I am using Angular 5 and Material 5. I tried to install saturn-datepicker and I get errors. Does it have a version that is compatible with v5?

WARNING in ./node_modules/saturn-datepicker/fesm5/saturn-datepicker.js
679:55-71 "export 'defineInjectable' was not found in 'angular/core'

Converting circular structure to JSON

Hi,
i am trying to bind initial dates but its showing following error
TypeError: Converting circular structure to JSON
at JSON.stringify ()
at o (preview-d916643e1c91c4270c84.js:1)
at r (preview-d916643e1c91c4270c84.js:1)
at preview-d916643e1c91c4270c84.js:1
at Array.map ()
at a (preview-d916643e1c91c4270c84.js:1)
at console.(/edit/anonymous function) [as error] (https://c.staticblitz.com/assets/packs/preview-d916643e1c91c4270c84.js:1:10032)
at Object.View_DatepickerValueExample_0 (VM11061 DatepickerValueExample.ngfactory.js:21)
at Object.proxyClass [as factory] (metadata_resolver.js:108)
at DebugContext_.logError (services.js:792)
console.(anonymous function) @ preview-d916643e1c91c4270c84.js:1
console.(anonymous function) @ preview-d916643e1c91c4270c84.js:1
View_DatepickerValueExample_0 @ DatepickerValueExample.html:3
proxyClass @ metadata_resolver.js:108
DebugContext_.logError @ services.js:792
ErrorHandler.handleError @ error_handler.js:93
(anonymous) @ application_ref.js:749
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ ng_zone.js:413
ApplicationRef.tick @ application_ref.js:749
ApplicationRef._loadComponent @ application_ref.js:808
ApplicationRef.bootstrap @ application_ref.js:696
(anonymous) @ application_ref.js:398
PlatformRef.moduleDoBootstrap @ application_ref.js:398
(anonymous) @ application_ref.js:319
ZoneDelegate.invoke @ zone.js:388
onInvoke @ ng_zone.js:594
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ ng_zone.js:585
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
We @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
o.import @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:2
et.import @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:2
qe @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
Ke @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
resolvePromise @ zone.js:779
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
ee @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
o.resolve @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:2
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:2
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
ce @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
resolvePromise @ zone.js:779
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
ee @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
o.resolve @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:2
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:2
y @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
We @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
o.import @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:2
et.import @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:2
qe @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
Ke @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
resolvePromise @ zone.js:779
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
Promise.then (async)
(anonymous) @ zone.js:1014
ZoneAwarePromise @ zone.js:875
Ctor.then @ zone.js:1013
ee @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
(anonymous) @ engineblock-146c780d9ccd7eca58c9775fadffeb836d7f8b198b9ddefc26cfde20a0cc7c00.js:1
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
(anonymous) @ zone.js:858
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
preview-d916643e1c91c4270c84.js:1 ERROR CONTEXT DebugContext {view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…}}

How to change date format?

Current default date format is 'mm/dd/yyyy'.
I want to change like 'yyyy-mm-dd'.
How I can change this?

Calendar popup alignment issue

Calendar popup is always opening in top left corner of the window. It should be relative to the input field. could you please make it relative to input field.

[Feature] When click on input open datepicker

exists already any way to open the datepicker popup when we click in the input?

Open daterangepicker on input focus

Is there an easy way to open the DateRangepicker when a user clicks the input it is attached to? I attempted to tie into the focus event to call the "_open()" function on the date toggler, but it did not work.

local month names?

Hey guys,
thank you for this plugin, it is very very useful feature. I have a quesion:
is it possible to use local month/day/year/week names?

with normal datepicker I used something like this:
providers: [ InvoiceService, {provide: MAT_DATE_LOCALE, useValue: 'pl'}, {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS} ]

also, will saturn datepicker will be included in future material releases?

Suggestion: predefined intervals in saturn datepicker

Like:
yesterday
last 7 days
last 30 days
this month
last month
...

Not working the CSS or SCSS in angular 7 Material 7.0.4

The Saturn component works fine but not looks fine in Angular 7 Material 7.0.4.
The classes:

• mat-calendar-cell-semi-selected
• mat-calendar-body-semi-selected

and all CSS classes of the saturn (see attachements). The td element write the name of the class, but the CSS, SCSS not exists and can't be created by me in a apart CSS, SCSS

closeAfterSelection false is not working

Hi there! I set closeAfterSelection to be false but still the window close immediately.
here is the code:

<input matInput
placeholder="Choose a range"
[satDatepicker]="picker">
<sat-datepicker #picker [rangeMode]="true" [closeAfterSelection]="false" [endDate]="">
<sat-datepicker-toggle matSuffix [for]="picker" >

Suggestion: display two months in saturn datepicker

Like:

defaultOrder definition repeated?

saturn-datepicker/saturn-datepicker/src/datepicker/calendar.ts

Line 112 in e969b64

const defaultOrder: SatCalendarView[] = ['month', 'multi-year', 'month'];

Why it appears 'month' 2 times?

Customize calendar header using [calendarHeaderComponent]

I am trying to customize the Sat Datepicker calendar header using my own component, but it is ignoring the Input.

This does not work:
<sat-datepicker #picker [calendarHeaderComponent]="exampleHeaderComponent" [rangeMode]="true"></sat-datepicker>

But it does work with Mat Datepicker:
<mat-datepicker #picker [calendarHeaderComponent]="exampleHeaderComponent"></mat-datepicker>

What am I doing wrong?

Use different date format than angular material

I'm trying to display a different format for my date range pickers like so:

export const MOMENTJS_DATE_FORMAT = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'dddd, DD.MM.YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'DD.MM.YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

export const MOMENTJS_RANGE_DATE_FORMAT = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'DD.MM.YYYY',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule 
...
  {provide: RangeDateAdapter, useClass: MomentDateAdapter, deps: [RANGE_MAT_DATE_LOCALE]},
    {provide: RANGE_MAT_DATE_FORMATS, useValue: MOMENTJS_RANGE_DATE_FORMAT},
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MOMENTJS_DATE_FORMAT},

Unfortunately only the MAT_DATE_FORMAT is detected by Sat RangePicker. I tried to switch the order which doesn't help in any way. Also overriding the injection token on the component level does not work for me.

How can use different formats for angular material, saturn-datepicker?

Error: moduleId should be a string in "SatCalendar"

Hello,
I'm trying to use the latest version of your datepicker, but my Chrome is giving me this error:
Error: moduleId should be a string in "SatCalendar"
The error occurs even if I don't add into template,
I only imported SatDatepickerModule...

@NgModule({
imports: [
SatDatepickerModule,
SatNativeDateModule,
...

I'm using:
"@angular/material": "6.0.1",
"saturn-datepicker": "^6.0.1",

Thanks!

Error CanColor

I got an error after install package by npm and copy/paste template from 'It's awesome, but how to use it?'.

ERROR in node_modules/saturn-datepicker/datepicker/datepicker.d.ts(12,20): error TS2305: Module ${path_here} has no exported member 'CanColorCtor'.
node_modules/saturn-datepicker/datepicker/datepicker.d.ts(42,22): error TS2420: Class 'SatDatepickerContent' incorrectly implements interface 'CanColor'.
Property 'color' is missing in type 'SatDatepickerContent'.

is it possible to set and don`t let user change begin value?

I need to make user able to choose range of date only from a specific date is it possible ? :)

Limit selectable range with [max] and [min]

Is there any way to use [max] and [min] like in mat-datepicker? https://github.com/angular/material2/blob/master/src/material-examples/datepicker-min-max/datepicker-min-max-example.html

Not working with MatCalendar

Thanks for the nice plugin.

The extension doesn't work with mat-calendar, as i wanted to use the calendar inline . Can you have a look into it?
<mat-calendar #calendar (selectedChange)="getChangedValue($event)" [rangeMode]="true"></mat-calendar>

The first Click doesn't select, and 2nd Click throws an error.

How to capture on Changed event?

Hi, I can't find a way to capture the range when it is selected. I tried using (change) on the input, selectedChanged on the datepicker, but nothing. Is there any event to do so?

Example:
<mat-form-field> <input (click)="picker.open()" matInput [placeholder]="labelText" [satDatepicker]="picker" [ngModel]="date"> <sat-datepicker (selectedChanged)="dateChanged($event)" #picker [rangeMode]="true"> </sat-datepicker> <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle> </mat-form-field>

Locale

what's the best way to set up a locale?
I've tried the same approach used for mat-datepicker but for saturn-datepicker doesn't work

Date range not highlighted on the picker on value init

Hello,

Thanks a lot for this great component that I use in several apps. When I use the [value] attribute to initialize input value, the date range is not highlighted when the picker is opened.

<input
  matInput
  placeholder="Choose a date"
  [satDatepicker]="picker"
  [value]="date"
>
<sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
<sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>

DEMO

Thanks

Date range not highlighted on the picker

Begin and end dates are selected but range is not highlighted

<input matInput placeholder="Choose range" [satDatepicker]="rangePicker" [max]="today" formControlName="defaultRange">
<sat-datepicker #rangePicker [rangeMode]="true" [closeAfterSelection]="true" orderPeriodLabel="month" [opened]="true"></sat-datepicker>
<sat-datepicker-toggle matSuffix [for]="rangePicker"></sat-datepicker-toggle>

this.form = this.formBuilder.group({
  defaultRange: [
    {
      begin: new Date(new Date().setDate(this.today.getDate() - 7)),
      end: new Date(),
    },
  ],
})

Update: Cannot find .mat-calendar-cell-semi-selected{...} declaration in code, using @6.1.0.

Error when build prod

When run npm run build --prod --environment prod i have this error:

[ERROR in : Unexpected value 'SatNativeDateModule in /xxx/xxx/xxx/xxxx/node_modules/saturn-datepicker/datetime/index.d.ts' imported by the module 'AppModule in /xxx/xxx/xxx/xxxx/src/app/app.module.ts'. Please add a @NgModule annotation.](url)

Can you help me?

Open on load

Is there an option to show the calendar popover open on first load?

Error "date.getTime is not a function" if rangeMode=false

Hi -

I have been working on implementing this date picker (in particular to get the range capability) and so it far has been going very well.

Strangely, the first issue I've really run into is that it throws an error if I set [rangeMode]="false" and then click on a date in the picker. Do you have an idea as to why or how to fix? Seems like maybe the value is not

Please see the image below. Thank you for building this!

A bit more context:
With [rangeMode]="false" the picker still displays a range initially (in the demo).
When I open the calendar and click a date, the isValid() function is called multiple times. The first few times everything is ok (the date object is a date):

But then it is called again and the date object is like

{
   begin: <date object>,
   end: <date object>
}

So in this instance, .getTime is not a function of the object above. I hope this helps to trace this down.

Display date range "MM/DD/YYYY - MM/DD/YYYY" in the input as default

Hi, I really like your range date picker its exactly what I want from angular material ! Thanks for your work. I was just wondering if there is a simple way to set a default date. I can't pass in a variable as a string e.g. '01/01/2018 - 05/25/2018' through [(ngModel)]. It doesn't error but just nothing appears. According to the docs the date picker accepts a JavaScript Date variable. I can pass this in and it appears but it is only of the one date.

I can pass in an object e.g
{
"begin": "2018-01-01T12:00:00.000Z",
"end": "2018-05-25T12:00:00.000Z"
}
and this does appear as my default range ! Alas, when I change the range through the date picker it then doesn't update, even if I reassign the new values through the $event.

Let me know if I'm missing anything.

Not working at all

i just load the component with

<mat-form-field>
    <input matInput [satDatepicker]="resultPicker">
    <sat-datepicker
      #resultPicker
      [rangeMode]="true">
    </sat-datepicker>
  </mat-form-field>

But the result is just a simple input

Sunday as first day of week

I set my angular app to pt-BR (Brasilian Portuguese) and everything works with Material Design, this is my MatDatePicker using MD2, Sunday (Domingo in portuguese is the first day)

But when I use saturn-datepicker the Monday (Segunda) is the first day

How can I set the saturn to work like material ?

Problem with building by Gulp

I have bought theme so if I need to use variables from theme (in this case I need to add:
@import '~saturn-datepicker/theming'; @include sat-datepicker-theme($theme); to my main style.scss) and when I hit:
gulp --prod --angular

I get an error:
Message:
..\src\sass\framework\vendors\material-angular_custom.scss
Error: File to import not found or unreadable: ~saturn-datepicker/theming.
on line 32 of ../src/sass/framework/vendors/material-angular/_custom.scss
from line 9 of ../src/sass/framework/vendors/material-angular/mat.scss
from line 21 of ../src/sass/demo/default/style.bundle.css

@import '~saturn-datepicker/theming';
^

internal/streams/legacy.js:59
throw er; // Unhandled stream error in pipe.
^
Error: ..\src\sass\framework\vendors\material-angular_custom.scss
Error: File to import not found or unreadable: ~saturn-datepicker/theming.
on line 32 of ../src/sass/framework/vendors/material-angular/_custom.scss
from line 9 of ../src/sass/framework/vendors/material-angular/mat.scss
from line 21 of ../src/sass/demo/default/style.bundle.css

@import '~saturn-datepicker/theming';
^

Saturn-datepicker version: 6.1.1
Angular 6

It's not possible to tracking second date by mouse over

In other date-range components after selecting first date by moving mouse over calendar space between first date til current date which is under mouse pointer has been colorize like this sample of ng-bootstrap.
Any way, Is there any option to do something like that?

No provider found for DateAdapter.

Hi

I followed the instructions you provided but I get the following error upon rendering the component:

    at createMissingDateImplError (saturn-datepicker.js:39)
    at new MatDatepickerInput (saturn-datepicker.js:2214)
    at createClass (core.js:12480)
    at createDirectiveInstance (core.js:12315)
    at createViewNodes (core.js:13776)
    at createEmbeddedView (core.js:13653)
    at callWithDebugContext (core.js:15090)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.js:14402)
    at TemplateRef_.createEmbeddedView (core.js:11718)
    at ViewContainerRef_.createEmbeddedView (core.js:11430)

I have the following modules imported in my sub module:

import {MatNativeDateModule, MatSliderModule, DateAdapter} from '@angular/material';
import { MatDatepickerModule } from 'saturn-datepicker';
...
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatToolbarModule,
    MatSelectModule,
    MatTabsModule,
    MatInputModule,
    MatProgressSpinnerModule,
    MatChipsModule,
    MatCardModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatListModule,
    MatMenuModule,
    MatIconModule,
    MatTooltipModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSliderModule
  ],

Any suggestions?

/node_modules/@angular/material/core"' has no exported member 'CanColorCtor'.

ERROR in node_modules/saturn-datepicker/datepicker/datepicker.d.ts(12,20): error TS2305: Module '"C:/Users/sandeepkumar.g/Desktop/nodebook/bot-plateform2/bot_platform-fe
/node_modules/@angular/material/core"' has no exported member 'CanColorCtor'.
node_modules/saturn-datepicker/datepicker/datepicker.d.ts(42,22): error TS2420: Class 'SatDatepickerContent<D>' incorrectly implements interface 'CanColor'.
  Property 'color' is missing in type 'SatDatepickerContent<D>'.

I am using angular 6 and getting this error, which also fails build. I removed and reinstalled node_module but no success. Please advice.

Package.json

 "dependencies": {
   "@angular/animations": "^6.1.10",
   "@angular/cdk": "^7.0.4",
   "@angular/common": "^6.0.3",
   "@angular/compiler": "^6.0.3",
   "@angular/core": "^6.0.3",
   "@angular/forms": "^6.0.3",
   "@angular/http": "^6.0.3",
   "@angular/material": "^6.4.7",
   "@angular/platform-browser": "^6.0.3",
   "@angular/platform-browser-dynamic": "^6.0.3",
   "@angular/pwa": "^0.7.5",
   "@angular/router": "^6.0.3",
   "@angular/service-worker": "^6.0.3",
   "@fortawesome/fontawesome-free": "^5.4.1",
   "@ngxs/devtools-plugin": "^3.1.4",
   "@ngxs/logger-plugin": "^3.1.4",
   "@ngxs/storage-plugin": "^3.2.0",
   "@ngxs/store": "^3.1.4",
   "angular-highcharts": "^6.2.6",
   "codemirror": "^5.39.2",
   "core-js": "^2.5.4",
   "download-csv": "^1.1.1",
   "font-awesome": "^4.7.0",
   "hammerjs": "^2.0.8",
   "highcharts": "^6.1.1",
   "ng2-click-outside": "^1.3.3",
   "ng2-completer": "^2.0.8",
   "ng2-dragula": "^2.1.0",
   "ng2-smart-table": "^1.3.5",
   "ngx-bootstrap": "^3.0.1",
   "ngx-toastr": "^8.9.1",
   "rxjs": "^6.0.0",
   "rxjs-compat": "^6.2.1",
   "saturn-datepicker": "^7.0.0",
   "zone.js": "^0.8.26"
 },
 "devDependencies": {
   "@angular-devkit/build-angular": "~0.6.8",
   "@angular/cli": "~7.0.5",
   "@angular/compiler-cli": "^6.0.3",
   "@angular/language-service": "^6.0.3",
   "@types/highcharts": "^5.0.23",
   "@types/jasmine": "~2.8.6",
   "@types/jasminewd2": "~2.0.3",
   "@types/jquery": "^3.3.5",
   "@types/node": "~8.9.4",
   "bootstrap": "^4.1.1",
   "codelyzer": "~4.2.1",
   "jasmine-core": "~2.99.1",
   "jasmine-spec-reporter": "~4.2.1",
   "karma": "~1.7.1",
   "karma-chrome-launcher": "~2.2.0",
   "karma-coverage-istanbul-reporter": "~2.0.0",
   "karma-jasmine": "~1.1.1",
   "karma-jasmine-html-reporter": "^0.2.2",
   "node-cmd": "^3.0.0",
   "protractor": "~5.3.0",
   "ts-node": "~5.0.1",
   "tslint": "~5.9.1",
   "typescript": "~2.7.2",
   "webpack-bundle-analyzer": "^2.13.1"
 }
}

Build failing with 1.1.8 (5.2.10)

Uncaught TypeError: Object(...) is not a function
at eval (saturn-datepicker.js:679)
at Object../node_modules/saturn-datepicker/fesm5/saturn-datepicker.js (vendor.bundle.js:7480)
at webpack_require (inline.bundle.js:55)
at eval (app-material.module.ts:39)
at Object../src/app/app-material.module.ts (main.bundle.js:28)
at webpack_require (inline.bundle.js:55)
at eval (app.module.ts:11)
at Object../src/app/app.module.ts (main.bundle.js:66)
at webpack_require (inline.bundle.js:55)
at eval (main.ts:4)

client:147 [WDS] Warnings while compiling.
warnings @ client:147
client:153 ./node_modules/saturn-datepicker/fesm5/saturn-datepicker.js
2374:35-41 "export 'inject' was not found in '@angular/core'
@ ./node_modules/saturn-datepicker/fesm5/saturn-datepicker.js
@ ./src/app/app-material.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts

warnings @ client:153
client:153 ./node_modules/saturn-datepicker/fesm5/saturn-datepicker.js
37:11-17 "export 'inject' was not found in '@angular/core'
@ ./node_modules/saturn-datepicker/fesm5/saturn-datepicker.js
@ ./src/app/app-material.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts

warnings @ client:153
client:153 ./node_modules/saturn-datepicker/fesm5/saturn-datepicker.js
679:55-71 "export 'defineInjectable' was not found in '@angular/core'
@ ./node_modules/saturn-datepicker/fesm5/saturn-datepicker.js
@ ./src/app/app-material.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts

404 not found: saturn-picker@latest

Hi,

When I try to install the package, an error occurs:

npm i saturn-picker --save
npm ERR! code E404
npm ERR! 404 Not Found: saturn-picker@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rhanb/.npm/_logs/2018-06-07T09_27_49_019Z-debug.log

When I go to the npm package page and I click the github link I get a 404 too. The username in the url is wrong, it's Saturn while it should be Team.

Workaround:

Installation:

npm i https://github.com/SaturnTeam/saturn-datepicker --save

Import:

import {SatDatepickerModule} from 'saturn-datepicker/saturn-datepicker/src/datepicker';

Styles dont apply when using it in the component scss file

I am using Angular 6 and i am using the datepicker in a component
I am putting the styles of the datepicker in the compoenent scss file but it doesnt applu correctly
It applies correctly when putting it in the general style.scss file
Here is the code:
@import '~@angular/material/theming';
@import '../../../../theme.scss'; The file that contains the app theme
@import '~saturn-datepicker/theming';
@include sat-datepicker-theme($theme);

Do not close the date selector after selection

Do you think it would be useful to add an option allowing not to close the selector after the selection of the 2nd date?
To make it easier to correct and check the range
We leave the selection when we click outside the datepicker

Do you have any ideas to achieve this behavior without changing the lib?

Support for DateAdapter

It seems that currently DateAdapter is not working. Is it possible to support DateAdapter for localization for example?