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> <tr> <td>Date 1:</td> <td> <input type="text" id="example4" class="date1" value="Click me." /> </td> </tr> <tr> <td>Date 2:</td> <td> <input type="text" id="example7" class="date1" value="Click me." /> </td> </tr> </table> <textarea id="example4-log" class="log"></textarea>
$(".date1").datepicker({ onSelect: function () { var box = $("#example4-log"); var tmp = box.val() + '\n'; tmp += "'onSelect' was triggered\n"; tmp += "Do nothing."; box.val(tmp); } }); $("#example4").datepicker("option", "onSelect", function () { var date = $("#example4").datepicker('getDate'); var box = $("#example4-log"); var tmp = box.val() + '\n'; tmp += "'onSelect' was triggered\n"; tmp += "The selected date was: " + date.toDateString() + '\n'; box.val(tmp); }); $("#example4").val("Click me.");