<!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>