JSFiddle - React, Tailwind, and code Playground
HTML
How do I bind to select?<br /><br />
<div id="bound_date" style="float: left"></div><br />
<br />
CSS
.ui-datepicker {
width:17em;
padding:.2em .2em 0;
background-color:#FFFFFF;
-webkit-box-shadow: 0px 1px 10px 0 rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 1px 10px 0 rgba(100, 100, 100, 0.5);
box-shadow: 0px 1px 10px 0 rgba(100, 100, 100, 0.5);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.ui-datepicker .ui-datepicker-header {
position:relative;
padding:.3em 0;
height: 16px;
background: #939393; /* old browsers */
background: -moz-linear-gradient(top, #C5C5C5 0%, #939393 48%, #8A8A8A 49%, #828282 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C5C5C5), color-stop(48%,#939393), color-stop(49%,#8A8A8A), color-stop(100%,#828282)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5C5C5', endColorstr='#828282',GradientType=0 ); /* ie */
}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next {
position:absolute;
top:3px;
width:15px;
height:15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba( 255, 255, 255, 0.70 );
}
.ui-datepicker .ui-datepicker-prev {
left:3px;
}
.ui-datepicker .ui-datepicker-next {
right:3px;
}
.ui-datepicker .ui-datepicker-prev-hover {
background: rgba( 255, 255, 255, 1 );
}
.ui-datepicker .ui-datepicker-next-hover {
background: rgba( 255, 255, 255, 1 );
}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span {
display:block;
position:absolute;
top: 4px;
left: 5px;
background-position: -10px -364px;
height: 7px;
width: 4px;
}
.ui-datepicker .ui-datepicker-next span {
left: 6px;
background-position: -13px -391px;
}
.ui-datepicker .ui-datepicker-title {
line-height:16px;
text-align:center;
color: #FFFFFF;
font-weight: bold;
}
.ui-datepicker .ui-datepicker-title select {
float:left;
font-size:1em;
margin:1px 0;
}
.ui-datepicker...
JavaScript
$("#coupled_date").datepicker({
onSelect : function() {
$("body").append("Coupled Date<br />");
}
});
$("#bound_date").datepicker();
$('#bound_date').bind( 'change', function() {
$("body").append("Bound Date 1<br />");
});