textarea.log { width: 70%; height: 300px; padding: 5px; } div.feedback { color: red; font-size: 0.5em; margin-top:-20px; } div.example { border: 2px solid #FF0000; margin-top: 20px; padding: 20px; } input { box-sizing: border-box; width: 276px; padding: 5px 7px; margin: 0; outline: 0; font-size: 1.1em; background: #fff; border: #e3e1d5 1px solid; border-radius: 2px; transition: all 0.15s ease-in-out; } table { margin: 1.6em 0; box-sizing: border-box; width: 100%; max-width: 100%; background-color: transparent; } tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } table th, table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: middle; border-top: 1px solid #edece4 }
<table> <tbody> <tr> <td> <input id="callbacks" type="text" value="Click me." /> </td> </tr> </tbody> </table> <textarea id="callbacks-log" class="log">DatePicker Event Log:</textarea>
$("#callbacks").datepicker({ beforeShow: function () { $("#callbacks").val(""); var box = $("#callbacks-log"); box.val(box.val() + '\nbeforeShow'); }, beforeShowDay: function () { var box = $("#callbacks-log"); box.val(box.val() + '\nbeforeShowDay'); return [true, "", ""]; }, onChangeMonthYear: function () { var box = $("#callbacks-log"); box.val(box.val() + '\nonChangeMonthYear'); }, onClose: function () { var box = $("#callbacks-log"); box.val(box.val() + '\nonClose'); }, onSelect: function () { var box = $("#callbacks-log"); box.val(box.val() + '\nonSelect'); } });