Multiple questions

[ninethug]

Hi, As I'm new on angular world, I have some difficulties using the datepicker, the documentation is not too clear for beginners. I create only this post for all questions to not spam the main thread.

1- How can I resize the inline day calendar ? 2- The date I get from the inline day calendar is typed as Moment even if I specified the format to 'DD-MM-YYYY' , how can I get it as a String ? 3- How can I create my own theme for the inline day calendar ? I know there is a theme attributes, but which class I have to specify ? 4- How can I use isDayDisabledCallback to disable previous dates on the inline day calendar ?

Thank you very much.

[vlio20]

hi,

1. You can do it with your custom css.
2. you need to pass a format (you can find it in the documentation). Also you can trasform moment object to any string format - please see moment documentation.
3. You can specify any class you want - make sure that when you override css attributes add `!important.
4. I believe that you should use minDate in this case and not isDayDisabledCallback please checkout the demo.

[ninethug]

1- When I resize the width of the calendar, it breaks it. I'm wondering if there is a way to resize not only the block but also characters inside to avoid breaking it. 2- Yes, I could use format to get a string, I asked because I said maybe there is a way to get it as string directly. 3- Could you please add a simple example in the stackBlitz ? https://stackblitz.com/edit/angular-cfynma 4- The documentation says that I have to use min attributes in IDayPickerConfig but IDayPickerConfig doesn't exist => error.

Thank you so much

[vlio20]

1. You can increase any property you need. Or use transform: scale attribute (css) which is a bit hacky.
2. Currently, there is no way.
3. The way that you set material theme, you could use any other custom theme.
4. Please provide a reproduction on stack blitz.

[ninethug]

Here https://stackblitz.com/edit/angular-cfynma you could find a reproduction for the question 4.

1- Where to find the list of properties I can increase to resize the calendar ? 3- Same for the first question, how to find classes to extend ? Could add to the stackblitz just a simple sample to start.

I only need how to start and I'll find the way to go. Thank you

[vlio20]

1. there is no such list. It is just css properties - not something specific for this component.
2. Seems like there is a bug with overriding styles - I will open an issue for that. The fix should be simple and will be released in next few days. Regarding the min date, here is an example: https://stackblitz.com/edit/angular-1nchlc.

note: IDayPickerConfig should be IDatePickerConfig.

[ninethug]

1- I'm talking about the css properties, the calendar maybe specify some css properties for the default calendar, and I have to override them no ? If yes, where can I find those properties ? I'll be waiting for the fix.

Note that in the documentation, it says IDayPickerConfig. Maybe a mistake.

[vlio20]

1. no specific, you will need to change the one you need to make it look as you want. Yes I noticed. could you open a ticket for that? PR would be awesome !

[vlio20]

@ninethug, the version was released (2.4.0). Please note that now you can add the styles you want to the you main css (if you are using angular-cli, it's you styles.css)

[ninethug]

Okay, thank you but which classes I have to override in my styles or where to find them ?

[vlio20]

I am not sure what you are trying to do, but try to use devtools to see what elements should be changed in order to apply your requirements.

[ninethug]

My bad... I forgot that I can find classes with devTools... Coming from back end dev, I don't have yet the good reflex. Anyway, thank you

[vlio20]

np, let me know if you need any further help. ⭐️ would be much appreciated!

[ninethug]

Hi vlio,

Are you sure that we can override style in 2.4.0 ? I tried to do so but it's not working, you can see an example here https://stackblitz.com/edit/angular-gvmkzj

[vlio20]

If you want to override the styles of child components you will have to use: ViewEncapsulation.Native or ViewEncapsulation.None here is an example: https://stackblitz.com/edit/angular-duz7hz

Another option is to add a global style. Please checkout: https://stackblitz.com/edit/angular-6rupxj?file=index.html

you can see that the styles were set globally in index.html (you could include a css file and not do it inline as I did in this example).

Let me know if it helped

[ninethug]

Oh yes, it rocks ! Last question if you don't mind. How can I do to set my css properties as a theme and pass it to calendar like the dp-material ?

[vlio20]

the theme is just the encapsulation, it will be the wrapping class if provided

[ninethug]

I see, thank you !

[ninethug]

Hi vlio, Did you tried to override dp-day-calendar-container or dp-selected ? I wasn't able to do it. Please look in your stackblitz here https://stackblitz.com/edit/angular-duz7hz . You specified the background to purple but it doesn't work.

[vlio20]

You will have to be more specific in your css selector: https://stackblitz.com/edit/angular-vodlst

[ninethug]

I only need to change ".dp-day-calendar .dp-day-calendar-container" on google dev tools to change the background color, not working when I change it in my app. However, I couldn't change the whole calendar background to green in your example. Please check here: https://stackblitz.com/edit/angular-pmvfdd

[vlio20]

You should change it in your global css file or in a wrapping component. Again you may need to be explicit in your css selector

[ninethug]

I don't understand why I can override some css selectors and not others like the container or dp-selected without a wrapper. However, it works fine in a wrapper or in the global css like you said. Thanks

[maxteebabs]

Two question. Please what other theme is available apart from dp-material. Secondly, i am finding it difficult using two mupltiple dp-date-picker on same page. I see you have more than two in the demo

[vlio20]

Hi @maxteebabs, there are no other themes - you can create your own. I am not planning to introduce new themes in the near future, if it's urgent you can contact me via Fiverr (you will find a link in the demo and in the redme file).

Regarding multiple datepickers in the same page, please provide a stackblitz.