CODEWITHSUNDEEP
jquerytwitter-bootstrapcalendardatepicker
Paulo
Paulo

Reputation: 538

Twitter Bootstrap + datepicker + display the calendar in the screen

I am using Twitter Bootstrap Datepicker and i want to always display the calendar in the screen, like the following example.

Somebody knows a way to do this?

Thanks!

Datepicker opened in the screen

Upvotes: 2

Views: 8218

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can use the bootstrap-calendar plugin and style it using its simple css to fit your needs.

Project site and docs: https://github.com/ahmontero/bootstrap-calendar

Demo page: http://ahmontero.github.io/bootstrap-calendar/

Upvotes: 3

mccannf
mccannf

Reputation: 16659

You create an input field that is hidden, call the datepicker on that input field, call the show action on the datepicker and then add a little CSS to hide the small white arrow at the top of the datepicker div.

<script>
  $(function() {
     $("#foo").datepicker();
     $("#foo").datepicker("show");
  });
</script>

<style>
  #foo {
    display:none;
  }
  .datepicker:before, .datepicker:after {
    display: none;
  }
</style>

<input id="foo"/>

JS Fiddle here.

Upvotes: 0

Related Questions