CODEWITHSUNDEEP
csshtml
Hari
Hari

Reputation: 19

Align HTML input date picker to right

i was not able to align the date picker comes input type="datetime-local" to the right side of the input element enter link description here

input{
  width:400px;
}
<input type="datetime-local" class="dateTime" name="starttime" id="startTime" step="2">
This is the current view:

This is the current view

my requirement is to position that datepicker square to the right side without using javascript

expected result below::

enter image description here

Upvotes: 0

Views: 7822

Answers (4)

Mohit Gupta
Mohit Gupta

Reputation: 739

Use this code this will help you.. I only use css for input: text-align:right.

input{
  width:400px;
  text-align:right;
}
<input type="datetime-local" class="dateTime" name="starttime" id="startTime" step="2">

Upvotes: 1

Arngue
Arngue

Reputation: 235

You cannot achive that, because you are trying to change a default browser property and every browser have custom css for distinct input types.

So if you wanna achieve that what you're have to use a custom datepicker an then do whatever you wanna do, and align it anywhere.

Here you have some examples

Upvotes: 0

Pavel Třupek
Pavel Třupek

Reputation: 908

If you want to align content of input to the right side, just use text-align: right; in css. I don't think it's possible to align calendar to the right ... But I also recommend you to use some js datetimepicker because of the browser support

Upvotes: 0

Raphael Eid
Raphael Eid

Reputation: 21

You can use div tag so datetime-local will be on the right side of the page as you want.

So your code will be :

<div align="right">
<input type="datetime-local" step="2">
</div>

Upvotes: 0

Related Questions