<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Date picker</title> <style> .dtp__widget, .dtp__widget * { box-sizing: border-box; } .dtp__widget { font-family: Arial, sans-serif; font-size: 14px; color: #000; border: 1px solid #ccc; } .dtp__widget { border-collapse: separate; border-spacing: 0; } .dtp__widget table { border-collapse: separate; border-spacing: 2px; } .dtp__widget td { cursor: default; border: none; padding: 0; } .dtp__widget td.dtp__submit-cell span, .dtp__widget td.dtp__reset-cell span, .dtp__widget td.dtp__set2now-cell span, .dtp__widget td.dtp__date-cell span { cursor: pointer; display: inline-block; } .dtp__widget td.dtp__submit-cell span:hover, .dtp__widget td.dtp__reset-cell span:hover, .dtp__widget td.dtp__set2now-cell span:hover, .dtp__widget td.dtp__date-cell span:hover { background: #eee; } .dtp__widget { text-align: center; } .dtp__widget .dtp__date-block { text-align: right; } .dtp__widget td.dtp__date-cell { opacity: 0.3; } .dtp__widget span { display: inline-block; } .dtp__widget td.dtp__date-cell[data-current-month="true"] { opacity: 1; } .dtp__widget td.dtp__date-cell[data-current-date="true"] span { background: #ddd; } .dtp__widget td.dtp__date-cell[data-today="true"] { color: #f40; } .dtp__widget .dtp__submit-cell span:before, .dtp__widget .dtp__reset-cell span:before, .dtp__widget .dtp__set2now-cell span:before { content: "Hiện tại"; color: #aaa; font-size: 0.8em; text-transform: uppercase; } .dtp__widget .dtp__reset-cell span:before { content: "Ban đầu"; } .dtp__widget .dtp__submit-cell span:before { content: "Xong"; color: #06c; } .dtp__widget .dtp__increase-div span, .dtp__widget .dtp__decrease-div span { width: 1.5em; height: 1.2em; } .dtp__widget .dtp__increase-div span { vertical-align: bottom; } .dtp__widget .dtp__decrease-div span { vertical-align: top; } .dtp__widget .dtp__increase-div span:hover, .dtp__widget .dtp__decrease-div span:hover { background: #eee; } .dtp__widget .dtp__increase-div span:before, .dtp__widget .dtp__decrease-div span:before { color: #aaa; font-size: 0.8em; } .dtp__widget .dtp__increase-div span:before, .dtp__widget .dtp__decrease-div span:before { content: ""; display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 30%; } .dtp__widget .dtp__increase-div span:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="452" height="452" viewBox="0 0 451.8 451.8"><path fill="%2368b" d="M248.3 106.4l194.3 194.3c12.4 12.4 12.4 32.4 0 44.7 -12.4 12.4-32.4 12.4-44.7 0L225.9 173.5 54 345.4c-12.4 12.4-32.4 12.4-44.7 0 -12.4-12.4-12.4-32.4 0-44.7L203.6 106.4c6.2-6.2 14.3-9.3 22.4-9.3C234 97.1 242.1 100.2 248.3 106.4z"%2F><%2Fsvg>'); } .dtp__widget .dtp__decrease-div span:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="452" height="452" viewBox="0 0 451.8 451.8"><path fill="%23b86" d="M225.9 354.7c-8.1 0-16.2-3.1-22.4-9.3L9.3 151.2c-12.4-12.4-12.4-32.4 0-44.8 12.4-12.4 32.4-12.4 44.7 0l171.9 171.9 171.9-171.9c12.4-12.4 32.4-12.4 44.7 0 12.4 12.4 12.4 32.4 0 44.8L248.3 345.4C242.1 351.6 234 354.7 225.9 354.7z"%2F><%2Fsvg>'); } .dtp__widget .dtp__weekday-cell { color: #888; background: #f8f8f8; } .dtp__widget .dtp__time-row td span:after { color: #666; font-size: 0.9em; } .dtp__widget .dtp__hours-cell .dtp__value-div span:after { content: " giờ"; } .dtp__widget .dtp__minutes-cell .dtp__value-div span:after { content: " phút"; } .dtp__widget .dtp__seconds-cell .dtp__value-div span:after { content: " giây"; } .dtp__widget .dtp__year-cell .dtp__value-div span:before { content: "Năm "; font-size: 0.9em; } .dtp__widget .dtp__month-cell .dtp__value-div span:before { content: "Tháng "; font-size: 0.9em; } .dtp__widget .dtp__weekday-cell span, .dtp__widget .dtp__set2now-cell span, .dtp__widget .dtp__reset-cell span, .dtp__widget .dtp__submit-cell span, .dtp__widget .dtp__date-cell span { padding: 0.1em 0.5em; display: block; width: 100%; } .dtp__widget table { width: 100%; } </style> <script src="datetime_picker.js"></script> </head> <body> <form> <label for="date">Choose date:</label> <input type="text" name="date" id="date"> </form> <div id="datetime-container"></div> <script> var dtpWidget = new DatetimePicker( new Date("2017/5/20 21:10:20"), { "weekdays": ["CN", "T2", "T3", "T4", "T5", "T6", "T7"], "months": ["Giêng", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười", "Mười Một", "Mười Hai"], "onChange": function (current) {}, "classNamePrefix": "dtp__" } ).widget( { "yearMonthBlock": { "items": ["yearCell", "monthCell"] }, "dateBlock": { "onClick": function (current) {} }, "timeBlock": { "items": ["hoursCell", "minutesCell", "secondsCell"] }, "controlBlock": { "items": ["set2nowCell", "resetCell", "submitCell"], "onSubmit": function (current) { document.getElementById("date").value = "Y/m/d H:i:s" .replace(/Y/g, current.year) .replace(/m/g, current.month + 1) .replace(/d/g, current.date) .replace(/H/g, current.hours) .replace(/i/g, current.minutes) .replace(/s/g, current.seconds) ; } }, "items": ["yearMonthBlock", "dateBlock", "timeBlock", "controlBlock"] } ); document.getElementById("datetime-container").appendChild(dtpWidget); </script> </body> </html>