1

I want to style the calendar section of input type="datetime-local". If you refer to this link, you will know what i am talking about.

http://test.csswg.org/suites/css-transforms-1_dev/nightly-unstable/html/transform-input-013.htm

For selecting the date, an arrow is provided. Now the calender pops up. I neeed to style it. for e.g change the color of text, background-color of the calendar.

Any idea how to do this ? i didnt see any documentation when i searched for it online.

Ayesha
  • 835
  • 4
  • 14
  • 33
  • @Juhana- i had a look at that post earlier. It only shows to style the format. not the calendar which pops up – Ayesha Jan 29 '16 at 23:00
  • 2
    ["Currently, there is no cross browser, script-free way of styling a native date picker"](http://stackoverflow.com/a/14947006/502381) seems pretty definitive. – JJJ Jan 29 '16 at 23:05
  • @Juhana- tat was in 2013. so i thought things might have changed a bit here n there. :( – Ayesha Jan 29 '16 at 23:06

1 Answers1

-13

You can use Jquery UI link here https://jqueryui.com/datepicker/

And style it just like styling a table, see fiddle for an example: https://jsfiddle.net/DIRTY_SMITH/rupbwpx0/

HTML and JQuery

  <p>Date: <input type="text" id="datepicker"></p>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>

CSS

td{background-color: lightblue;}
thead{background-color: lightgreen;}
Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39