JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/smoothness/jquery-ui.css">
<a href="#" id="datepicker_link">September 26, 2011</a>
<input id="datepicker" />
CSS
#datepicker {
position: absolute;
top: -200px;
}
#ui-datepicker-div {
top: 2em !important;
left: 0.5em !important;
}
JavaScript
var picker_link_id = "datepicker_link"
var picker_div_id = "datepicker"
var picker_div = $("#" + picker_div_id)
// initialize the datepicker
picker_div.datepicker({
onSelect: function(dateText, picker) {
//picker_div.hide();
picker_div.datepicker('hide');
// custom work
}
});
$('#ui-datepicker-div').hide();
// position & toggle the datepicker on link click
$("#" + picker_link_id).click(function() {
var $this = $(this)
/*
// position the datepicker
picker_div.css('position', 'absolute');
picker_div.css('left', $this.position().left - (picker_div.width() - $this.width()));
picker_div.toggle()
*/
console.log(picker_div);
if ($('#ui-datepicker-div').is(':visible'))
picker_div.datepicker('hide');
else
picker_div.datepicker('show');
return false;
});
// pressing ESC or clicking outside the datepicker should close it
$(document).bind("keypress", function(e) {
if (e.keyCode == 27)
//picker_div.hide();
picker_div.datepicker('hide');
}).bind("mousedown", function(e) {
if (e.target.id == $("#" + picker_link_id)[0].id) return;
if (e.target.id != picker_div_id && $(e.target).parents('#' + picker_div_id).length == 0)
//picker_div.hide();
picker_div.datepicker('hide');
});