どもです。

<input type="date" style="font-family:'メイリオ'; font-size:14px; width:6em;">

このようなinputがあったとして、このinputの表示はこうなります。

ちゃうねん。
日時のようなデータは、入力欄が文字列より狭い場合はこうなってくれるのが理想的。

しかし、text-align:rightなどをCSSに加えても、この状態にすることはできません。
この表示はテキストの位置ではなく、スクロールの状態に依存するためです。

で、この状態をクリティカルに解決する方法は、残念ながら見つけることができませんでした。
単純なCSSはおろか、jsもカーソル操作はフォーカスが条件だったりで上手くいかない。

<div style="width:6em; height:1.6em; overflow:hidden; border:1px solid #aaa; position:relative">
    <input type="date" style="width:10em; max-width:none; text-align:right; border:none; position:absolute; right:0;">
</div>

ここまでやれば漸く、といったところ。
これでも細かいCSS調整は省いているので、実際には更に記述が増えますね。