Material: HTML dir="rtl" works well; But not for <md-datepicker>

[m98]

I know some questions asked about Right To Left languages, but @ThomasBurleson gave a simple good answer on issue #2817 and that was so useful and my Angular app (Website) is working well in right to left style, but I found a little problem in <md-datepicker>:

[crisbeto]

I'm not sure whether the datepicker's calendar was ever ported to do RTL. Can you give me an example of what an RTL calendar should look like?

[m98]

Thanks @crisbeto

It is just a style problem, here is how an LTR (Orginal) date picker look like:

And here is in my app, and I drew border around the problem:

I could solve the # 1 and # 2 problem by setting this style:

/*I know this is not the solution! and also not standard, but maybe help you to figure out what is the problem*/
.md-calendar-date:last-child, .md-calendar-date:first-child{
  padding-right:0 !important;
  padding-left: 0 !important;
}

and here is the result after adding the above style, but still there are problems:

[crisbeto]

@m-kermani I just got around to this, but it seemed to work fine with the demo from the docs site in RTL. Can you post a codepen that shows the issue?

[m98]

@crisbeto I also have Bootstrap-ui on my project (I'm not using it, but I will) and maybe Bootstrap made that problem! I'm not sure

I will create a codePen and I will let you know

[crisbeto]

@m-kermani did you manage to reproduce it in a codepen?

[m98]

@crisbeto Yes, here is the codepen demo:
http://codepen.io/kermani/pen/VjOXLk

[crisbeto]

@m-kermani that codepen is using 1.1.0-rc2, but it looks like the issue got resolved from 1.1.0-rc3 and onward. Here's a forked pen that works fine. Seems like the only issue in RTL, at the moment, is that the arrow points in the wrong direction.

[m98]

@crisbeto Great! You solved it :+1:

Thanks for your efforts, I have found a bug in Autocomplete (Highlight) and I will pull request as soon as possible, it is also a simple bug in some of RTL languages, I think to solve the highlight problem, I need to write about 10 lines of code and of course you also need to add something like that to the Angular Material 2 to solve the problem. I will fill an issue then will pull request (I don't know if is this the ordinary way for pull request for a bug!)

But, I am not familiar with lots of things in Angular Material source, so maybe I will have (Or make) problems, so I need your help + review

Thanks