search

SaturnTeam / saturn-datepicker

Angular Material Datepicker with range selection
MIT License
276 stars 110 forks source link

Use different date format than angular material #53

Open jacobfederer opened 5 years ago

jacobfederer commented 5 years ago

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?

SaturnTeam commented 5 years ago

did you import tokens for my datepicker from my package??

jacobfederer commented 5 years ago

Here are my imports:

import {MatMomentDateModule, MomentDateAdapter,} from "@angular/material-moment-adapter"
import {MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatRippleModule,} from "@angular/material/core"

import {
  DateAdapter as RangeDateAdapter,
  MAT_DATE_FORMATS as RANGE_MAT_DATE_FORMATS,
  MAT_DATE_LOCALE as RANGE_MAT_DATE_LOCALE,
  SatDatepickerModule
} from 'saturn-datepicker'
SaturnTeam commented 5 years ago

They are correct. I guess both datepickers uses the same injection token, regardless of package. Sorry, but I think th e only solution is to wrap my datepicker in component and inject required format to it.

jacobfederer commented 5 years ago

So what I tried using it like so:

@Component({
  selector: 'app-some-component',
  templateUrl: './some-component.component.html',
  styleUrls: ['./some-component.component.scss'],
  providers: [
    {provide: MAT_DATE_FORMATS, useValue: MOMENTJS_RANGE_DATE_FORMAT}
  ]
})

This doesn't work for me. Do you have any idea on how to handle this?

SaturnTeam commented 5 years ago

Try to provide a MatMomentDateAdapter as DateAdapter in this component. When I have similar task, I just provide a format via moment.js API (according its documentation) instead of angular way

Alonkum commented 5 years ago

Hi @SaturnTeam ,

Is there an estimate when this bug will be resolved? Or a workaround to solve it...

Regards!

SaturnTeam commented 5 years ago

No any estimation.On Jun 12, 2019 3:34 PM, Alonkum notifications@github.com wrote:Hi @SaturnTeam , Is there an estimate when this bug will be resolved? Or a workaround to solve it... Regards!

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread.

Alonkum commented 5 years ago

Hi,

Is there a chance for a short explanation on how you took the Material source code and refactored it? While trying to do so, I've encountered many errors on dependencies...

On Wed, Jun 12, 2019 at 3:47 PM SaturnTeam notifications@github.com wrote:

No any estimation.On Jun 12, 2019 3:34 PM, Alonkum < notifications@github.com> wrote:Hi @SaturnTeam , Is there an estimate when this bug will be resolved? Or a workaround to solve it... Regards!

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SaturnTeam/saturn-datepicker/issues/53?email_source=notifications&email_token=AFS2SEDYCILQFIKLK7WFTIDP2DV67A5CNFSM4GJ2VJS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXQJJSQ#issuecomment-501257418, or mute the thread https://github.com/notifications/unsubscribe-auth/AFS2SEECDW2XR6QP53Q56VLP2DV67ANCNFSM4GJ2VJSQ .

SaturnTeam commented 5 years ago

1) I've copypasted the code. 2) use rename.php to change Mat to Sat 3) manually merge code file by file using 'compare with clipboard' in phpstorm

Alonkum commented 5 years ago

Thank you for your prompt response! I was wondering though, how did you separate from the rest of the material project? with all the dependencies...

THANK YOU!

On Mon, Jun 17, 2019 at 4:03 PM SaturnTeam notifications@github.com wrote:

  1. I've copypasted the code.
  2. use rename.php to change Mat to Sat
  3. manually merge code file by file using 'compare with clipboard' in phpstorm

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SaturnTeam/saturn-datepicker/issues/53?email_source=notifications&email_token=AFS2SEFT7BUIV2KVJKBOASDP26DT5A5CNFSM4GJ2VJS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODX3DCNI#issuecomment-502673717, or mute the thread https://github.com/notifications/unsubscribe-auth/AFS2SEBKTO5L7YKBA27EFCLP26DT5ANCNFSM4GJ2VJSQ .

SaturnTeam commented 5 years ago

I didn't. @angular/material package is in dependencies