Date picker RTL support

[MurhafSousli]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

RTL support

What is the current behavior?

What is the use-case or motivation for changing an existing behavior?

It should look properly when dir="rtl" is set on the body element

Steps to reproduce

Add dir="rtl" to body element

Is there anything else we should know?

I was able to get the right look by adding dir="rtl" directly on the date picker element

[crisbeto]

From some quick testing it works for me. Are you adding/changing the dir dynamically after the datepicker has been created?

[MurhafSousli]

@crisbeto No, I sat it in the body in index.html

[crisbeto]

I tried to reproduce it myself on a couple of occasions, but I wasn't able to. Can you post an example that shows it breaking? You can fork this Stackblitz. Also what version of Material are you running?

[MurhafSousli]

I don't think I can reproduce it in a stackblitz because it doesn't have index.html, so I made this repo (sorry I just pushed the project as it is) but it is straightforward. the date picker is defined in this file

Click on "file" button to see the date picker

I wanted to share it in this new github stackblitz but it doesn't seen to work with RTL, so it should be tested locally

[crisbeto]

Thanks, I see what you mean now. The issue comes from the fact that when Material opens an overlay (in your case a dialog and a datepicker), it defaults to the direction being ltr, unless you've passed in something different. I've submitted a PR that will default to the direction from the body, but until it gets released you can fix your issue by setting the direction explicitly in your dialog config:

dialog.open(DialogComponent, {
  direction: 'rtl'
  // some other dialog configuration...
});

[MurhafSousli]

@crisbeto Great! Thank you.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}