2

Is it possible to have the button that pulls up the calendar in the JQuery UI datepicker before the input field? By default it is always put after the field. I tried isRTL: true but that also changes the prev/next buttons in the calendar.

John Landheer
  • 3,999
  • 4
  • 29
  • 53
  • Hope you may find answer from this, http://stackoverflow.com/questions/1526500/getting-jquery-uis-datepicker-to-always-open-in-a-certain-direction – Sameera Thilakasiri Oct 12 '11 at 07:16

2 Answers2

4

There are at least two ways to achieve this. One is as described by JMax. The other one is simply move the icon before the input box:

$( "#datepicker" ).datepicker({
    ...
    buttonImage: "path/to/icon.png"
}).next().insertBefore('#datepicker');

See this in action: http://jsfiddle.net/william/rrcmq/1/.

William Niu
  • 15,798
  • 7
  • 53
  • 93
  • This works! If class selector is used(e.g. `$('.date')` ), we can iterate each date field then `$(this).insertBefore( $(this).prev('input') );` – frank Sep 20 '19 at 01:13
2

If what you want is to put a button that triggers the calendar like this example but on the left, you can easily add a button on your own and bind it an event:

$("#mybutton").click(function() {
  $("#datepicker").datepicker( "show" )
});
JMax
  • 26,109
  • 12
  • 69
  • 88