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="example3" type="text" value="Click me." /> </td> </tr> </tbody> </table> <textarea id="example3-log" class="log"></textarea>
$("#example3").datepicker(); $(document).on("change", "#example3", function (event) { var box = $("#example3-log"); var date = $("#example3").datepicker('getDate'); var tmp = box.val() + '\n'; tmp += 'Triggered event info\n'; tmp += '====================\n'; tmp += 'type: ' + event.type + '\n'; tmp += 'currentTarget: ' + event.currentTarget.localName + '#' + event.currentTarget.id + '.' + event.currentTarget.className + '\n'; tmp += 'timeStamp: ' + event.timeStamp + '\n'; tmp += 'Selected Date: ' + date.toDateString() + '\n'; box.val(tmp); });