Un esempio di Date Picker realizzato in JavaScript puro (Vanilla JS) senza altre dipendenze esterne che supporta il formato date l'italiano.

Può essere usato anche con framework tipo Knockout JS.
Sgart Date PickerSgart Date Picker
Questo è il codice del Date Picker
JavaScript: sgart-date-picker.js
function SgartDatePicker() {
    var CSS_BASE = "sgart-date-picker";
    var ATTR_IDENTIFIER = CSS_BASE;
    var ATTR_IDENTIFIER_TRUE = "true";
    var ATTR_DATE = "sgart-date";
    var ATTR_CMD = "sgart-cmd";
    var CMD_NEXT = "next";
    var CMD_PREV = "prev";
    var CMD_TODAY = "today";
    var CMD_MODE_YEAR = "mode-year";
    var CMD_MODE_MONTH = "mode-month";
    var CMD_CHANGE_DATE = "change-date";
    var CMD_SELECT_DAY = "select-day";
    var MODE_DAY = 0;
    var MODE_MONTH = 1;
    var MODE_YEAR = 2;
    var YEAR_SHOW_NUMBER = 4 * 4;

    // il primo (index 0) è il default
    var supportedLanguages = [
        {
            lcid: 1033,
            code: 'en-US',
            firstDayOfWeek: 0,  // 0=sunday, 1=Monday....6=Saturday 
            dayLabels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            monthLabels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            todayLabel: "Today",
            dateFormat: "MM/dd/yyyy"
        },
        {
            lcid: 1040,
            code: 'it-IT',
            firstDayOfWeek: 1,
            dayLabels: ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"],
            monthLabels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
            todayLabel: "Oggi",
            dateFormat: "dd/MM/yyyy"
        }
    ];

    var elmWrapper = null;
    var currentElementInput = null;
    var currentDate = null;
    var currentDateFirst = null;    // riferito al mese/anno visualizzato
    var currentLanguage = null;
    var isOpen = false;
    var mode = MODE_DAY;   //0=day, 1=month, 2=year

    var _dayOffset = [];
    var _customClass = null;
    var _showTodayButton = true;
    var _weekendClassEnable = false;
    var _handleCloseCallback = null;

    function applyStyles() {
        var styleStr = ""
            // reset CSS
            + "[], []-headers,[]-month-year, []-prev, []-next,[]-table, []-labels, []-days,"
            + "[]-label, []-day, []-day-out, []-day-hidden,[]-day-today, []-day-n, []-day-footer"
            + "{box-sizing: border-box; clear: both; position: relative; font-size: 1rem; font-weight: normal; border: 1px solid transparent; padding:0; margin: 0; color: #222; background-color: transparent;  height: 1.9rem; line-height: 1.9rem; text-align: center;}"
            + "[]-month-year, []-prev, []-next,[]-label, []-day, []-day-out, []-day-hidden,[]-day-today, []-day-n, []-day-footer"
            + "{width: 1.9rem}"
            // style
            + "[] { position:absolute;  padding: .5em; background-color: #fff; border: 1px solid #888; box-shadow: rgb(0 0 0 / 13%) 0px 6.4px 14.4px 0px, rgb(0 0 0 / 11%) 0px 1.2px 3.6px 0px; }"
            + "[], []-headers, []-labels, []-days, []-month-year { width: auto; height: auto; }"
            + "[]-month-year, []-prev, []-next { font-weight: bold; height: 2.5rem; line-height: 2.5rem; padding: 0;}"
            + "[]-month-year { text-align: left;  padding-right: .5rem;}"
            + "[]-month-year span { display: inline-block; height: 2.5rem; line-height: 2.5rem; padding: 0 .5rem; cursor: default;}"
            + "[]-month-year span:hover, []-prev:hover, []-next:hover {background-color: #fdd;}"
            + "[]-month-year.disabled {background-color: #aaa;}"
            + "[]-prev { position: absolute; top:0; right: 2rem; width: 2rem;cursor: default;}"
            + "[]-next { position: absolute; top:0; right: 0; width: 2rem;cursor: default;}"
            + "[]-label {font-size: .8rem}"
            + "[]-day:hover {background-color: #fdd;}"
            + "[]-days[]-months []-day {width: 4em;} "
            + "[]-day-out []-day-n {color: #aaa;}"
            + "[]-day-n { border-radius: 100%; pointer-events: none; margin: 0 auto;}"
            + "[]-day-ss []-day-n { color: #aaa;}"
            + "[]-day-today  {border-color: #caa; }"
            + "[]-day-selected []-day-n {background-color :#fdd; border-color: #caa; }"
            + "[]-footer {font-size: .8rem; cursor:default; height: 1.5rem; line-height: 1.5rem;}"
            + "[]-footer:hover {background-color: #fdd;}"
            + "[]-footer strong {pointer-events: none;}"
            ;

        var style = document.createElement('style');
        style.innerHTML = styleStr.replace(/\[\]/g, "." + CSS_BASE);
        document.head.appendChild(style);
    };

    function setShowTodayButton(value) {
        _showTodayButton = value === true;
        if (isOpen === true) {
            drawCalendar();
        }
    };

    function setLanguage(lcidOrCode) {
        // trovo la lingua
        var code = null;
        if (typeof lcidOrCode === 'string') {
            lcidOrCode = lcidOrCode.toLowerCase();
        }
        var found = null;
        for (let i = 0; i < supportedLanguages.length; i++) {
            // trovo la lingua
            var lang = supportedLanguages[i];
            if (lang.lcid === lcidOrCode || lang.code.toLocaleLowerCase() === code) {
                found = lang;
                break;
            }
        }
        if (found === null) {
            found = supportedLanguages[0];
            console.warn("LCID " + lcidOrCode + " not found, set " + found.lcid);
        }

        currentLanguage = found;

        setFirstDayOfWeek(currentLanguage.firstDayOfWeek);

        if (isOpen === true) {
            drawCalendar();
        }
    };

    function setCustomClass(className) {
        _customClass = className;
    };

    function setFirstDayOfWeek(dayOfWeek) {
        if (dayOfWeek < 0 || dayOfWeek > 6) {
            dayOfWeek = 0;
        }
        var w = dayOfWeek;
        for (var i = 0; i < 7; i++) {
            if (w > 6) {
                w = 0;
            }
            _dayOffset[i] = w;
            w++;
        }
    };

    function getFirstDayOfWeekOffset(dayOfWeek) {
        return _dayOffset.indexOf(dayOfWeek);
    };

    function getMonthLabel(monthIndex) {
        return currentLanguage.monthLabels[monthIndex];
    };
    function getDayLabel(dayOfWeek, charLen) {
        var label = currentLanguage.dayLabels[dayOfWeek];

        return label.substring(0, charLen === undefined || charLen === 0 ? label.length : charLen);
    };

    function setWeekendClassEnable(value) {
        _weekendClassEnable = value === true;
    };
    function getWeekendClassEnable() {
        return _weekendClassEnable;
    };

    function formatDateISO(dt) {
        var d = dt.getDate();
        var m = dt.getMonth() + 1;
        var y = dt.getFullYear();
        return y + "-" + (m > 9 ? "" : "0") + m + "-" + (d > 9 ? "" : "0") + d;
    };

    function parseDateISO(strDate) {
        if (strDate == null)
            return null;
        var arr = strDate.split("-");
        return new Date(parseInt(arr[0]), parseInt(arr[1]) - 1, parseInt(arr[2]));
    };

    function formatDate(dt) {
        var d = dt.getDate();
        var m = dt.getMonth() + 1;
        return currentLanguage.dateFormat.replace("dd", (d > 9 ? "" : "0") + d).replace("MM", (m > 9 ? "" : "0") + m).replace("yyyy", dt.getFullYear());
    };

    function parseDate(strDate) {
        var formatParts = currentLanguage.dateFormat.split("/");
        var dateParts = strDate.split("/");
        if (formatParts.length !== dateParts.length) {
            console.log("error parseDate: " + formatParts + " | " + dateParts);
            return null;
        }
        var year = -1;
        var month = -1;
        var day = -1;
        for (var i = 0; i < dateParts.length; i++) {
            switch (formatParts[i]) {
                case "yyyy":
                    year = parseInt(dateParts[i]);
                    break;
                case "MM":
                    month = parseInt(dateParts[i]) - 1;
                    break;
                case "dd":
                    day = parseInt(dateParts[i]);
                    break;
                default:
                    break;
            }
        }
        return new Date(year, month, day);
    };

    function drawCalendar() {
        var year = currentDateFirst.getFullYear();
        var month = currentDateFirst.getMonth();
        var cmd = null;
        var sTable = null;
        var title = null;
        var today = new Date();

        switch (mode) {
            case MODE_YEAR:
                cmd = null;

                title = year + " - " + (year + YEAR_SHOW_NUMBER - 1);
                sTable = drawCalendarYear(today);
                break;
            case MODE_MONTH:
                cmd = CMD_MODE_YEAR;

                title = year;
                sTable = drawCalendarMonth(today);
                break;
            default:
                cmd = CMD_MODE_MONTH;

                title = getMonthLabel(month) + " " + year;
                sTable = drawCalendarDay(today);
                break;
        }

        var sHeaders = "<div class='[]-headers'>"
            + "<div class='[]-month-year'><span " + ATTR_CMD + "='" + cmd + "'>" + title + "</span></div>"
            + "<div class='[]-prev' " + ATTR_CMD + "='" + CMD_PREV + "'>&lt;</div>"
            + "<div class='[]-next' " + ATTR_CMD + "='" + CMD_NEXT + "'>&gt;</div>"
            + "</div>";

        if (_showTodayButton === true) {
            var sToday = "<div class='[]-footer' " + ATTR_CMD + "='" + CMD_TODAY + "'>" + currentLanguage.todayLabel + ":<strong>" + formatDate(today) + "</strong></div>";
        } else {
            var sToday = "";
        }

        var result = sHeaders + "<table class='[]-table'>" + sTable + "</table>" + sToday;

        elmWrapper.innerHTML = result.replace(/\[\]/g, CSS_BASE);
        elmWrapper.className = CSS_BASE + (_customClass === null ? "" : " " + _customClass);
    };

    function drawCalendarDay(today) {
        var selectedYear = currentDate.getFullYear();
        var selectedMonth = currentDate.getMonth();
        var selectedDay = currentDate.getDate();

        var year = currentDateFirst.getFullYear();
        var month = currentDateFirst.getMonth();

        var dtStart = new Date(currentDateFirst.getFullYear(), month, 1);
        var dtEnd = new Date(year, month + 1, 0);
        var offset = getFirstDayOfWeekOffset(dtStart.getDay());
        dtStart.setDate(dtStart.getDate() - offset);
        var rows = (offset + dtEnd.getDate()) / 7;

        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth();
        var todayDay = today.getDate();

        var weekendClass = getWeekendClassEnable();

        // header
        var sLabels = "<tr class='[]-labels'>";
        for (var c = 0; c < 7; c++) {
            sLabels += "<th class='[]-label' title='" + getDayLabel(c) + "'>" + getDayLabel(c, 2) + "</div>";
        }
        sLabels += "</tr>";

        // days
        var str = "";
        for (var r = 0; r < rows; r++) {
            str += "<tr class='[]-days'>";
            for (var c = 0; c < 7; c++) {
                var cYear = dtStart.getFullYear();
                var cMonth = dtStart.getMonth();
                var cDay = dtStart.getDate();
                var cWeekDay = dtStart.getDay()

                var className = CSS_BASE + "-day"
                    + (cMonth !== month ? " []-day-out" : "")
                    + (todayYear === cYear && todayMonth === cMonth && todayDay === cDay ? " []-day-today" : "")
                    + (selectedYear === cYear && selectedMonth === cMonth && selectedDay === cDay ? " []-day-selected" : "")
                    + (weekendClass && (cWeekDay === 0 || cWeekDay === 6) ? " []-day-ss" : "");

                var strDateISO = formatDateISO(dtStart);
                str += "<td class='" + className + "' " + ATTR_DATE + "='" + strDateISO + "' " + ATTR_CMD + "='" + CMD_SELECT_DAY + "'><div class='[]-day-n'>" + cDay + "</div></td>";

                dtStart.setDate(cDay + 1);
            }
            str += "</tr>";
        }
        return "<thead>" + sLabels + "</thead><body>" + str + "</body>";
    }

    function drawCalendarMonth(today) {
        var year = currentDateFirst.getFullYear();

        var selectedYear = currentDate.getFullYear();
        var selectedMonth = currentDate.getMonth();

        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth();

        var str = "";
        var m = 0;
        for (var r = 0; r < 3; r++) {
            str += "<tr class='[]-days []-months'>";
            for (var c = 0; c < 4; c++) {
                var lbl = currentLanguage.monthLabels[m].substring(0, 3);
                var className = CSS_BASE + "-day"
                    + (todayYear === year && todayMonth === m ? " []-day-today" : "")
                    + (selectedYear === year && selectedMonth === m ? " []-day-selected" : "");

                var dtStart = new Date(year, m, 1);
                var strDateISO = formatDateISO(dtStart);
                str += "<td class='" + className + "' " + ATTR_DATE + "='" + strDateISO + "' " + ATTR_CMD + "='" + CMD_CHANGE_DATE + "'><div class='[]-day-n'>" + lbl + "</div></td>";

                m++;
            }
            str += "</tr>";
        }
        return "<body>" + str + "</body>";
    };

    function drawCalendarYear(today) {
        var selectedYear = currentDate.getFullYear();
        var selectedMonth = currentDate.getMonth();

        var todayYear = today.getFullYear();

        var str = "";
        var year = currentDateFirst.getFullYear();
        var cols = 4;
        var rows = YEAR_SHOW_NUMBER / cols;
        for (var r = 0; r < rows; r++) {
            str += "<tr class='[]-days []-months'>";
            for (var c = 0; c < cols; c++) {
                var className = CSS_BASE + "-day"
                    + (todayYear === year ? " []-day-today" : "")
                    + (selectedYear === year ? " []-day-selected" : "");

                var dtStart = new Date(year, selectedMonth, 1);
                var strDateISO = formatDateISO(dtStart);
                str += "<td class='" + className + "' " + ATTR_DATE + "='" + strDateISO + "' " + ATTR_CMD + "='" + CMD_CHANGE_DATE + "'><div class='[]-day-n'>" + year + "</div></td>";

                year++;
            }
            str += "</tr>";
        }
        return "<body>" + str + "</body>";
    };

    function getElementCoord(element) {
        var bound = element.getBoundingClientRect();

        var top = ((bound.top + window.pageYOffset) + bound.height + 2);
        var left = ((bound.left + window.pageXOffset) + 0);

        return { top: top, left: left };
    };

    function setValue(dt) {
        if (dt) {
            currentElementInput.value = formatDate(dt)
            closePopup(dt);
        }
    };

    function changeDate(dt) {
        currentDateFirst = dt == null ? new Date() : dt;
        currentDateFirst.setDate(1);
        if (isOpen === true) {
            drawCalendar();
        }
    };

    function handleOpenPopup(event) {
        openPopup(event.target);
    };

    function openPopup(htmlElement, closeCallback) {
        if (isOpen === true) {
            if (htmlElement !== currentElementInput) {
                closePopup();
            } else {
                return;
            }
        }

        _handleCloseCallback = closeCallback == null ? null : closeCallback;

        mode = MODE_DAY;
        currentElementInput = htmlElement;

        document.addEventListener("mousedown", handleDocumentMousedown);
        currentElementInput.addEventListener("keydown", handleInputKeydown);


        currentDate = parseDate(currentElementInput.value);
        currentDateFirst = new Date(currentDate);
        currentDateFirst.setDate(1);

        drawCalendar();

        var coord = getElementCoord(currentElementInput);

        elmWrapper.style.top = coord.top + "px";
        elmWrapper.style.left = coord.left + "px";
        elmWrapper.style.display = "block";

        isOpen = true;
    };

    function closePopup(dt) {
        elmWrapper.style.display = "none";
        isOpen = false;
        document.removeEventListener("mousedown", handleDocumentMousedown);
        currentElementInput.removeEventListener("keydown", handleInputKeydown);
        currentElementInput = null;
        if (_handleCloseCallback != null) {
            _handleCloseCallback(dt == null ? null : {
                date: dt,
                formatted: formatDate(dt)
            });
        }
    };


    function isInCalendar(target) {
        while (target !== null && target.tagName !== "BODY") {
            if (target.classList.contains(CSS_BASE) === true) {
                return true;
            }
            target = target.parentElement
        }
        // ho cliccato fuori dal calendario
        return false;
    };

    function executeCommand(cmd, date) {
        if (cmd) {
            // ho cliccato su un bottone
            switch (cmd) {
                case CMD_SELECT_DAY:
                    if (date) {
                        // ho cliccato su un giorno
                        setValue(date);
                    }
                    break;
                case CMD_TODAY:
                    setValue(new Date());
                    break;
                case CMD_CHANGE_DATE:
                    if (mode === MODE_YEAR) {
                        mode = MODE_MONTH;
                    } else {
                        mode = MODE_DAY;
                    }
                    changeDate(date);
                    break;
                case CMD_PREV:
                case CMD_NEXT:
                    var offset = cmd === CMD_PREV ? -1 : 1;
                    switch (mode) {
                        case MODE_YEAR:
                            currentDateFirst.setFullYear(currentDateFirst.getFullYear() + offset * YEAR_SHOW_NUMBER);
                            break;
                        case MODE_MONTH:
                            currentDateFirst.setFullYear(currentDateFirst.getFullYear() + offset);
                            break;
                        default:
                            currentDateFirst.setMonth(currentDateFirst.getMonth() + offset);
                            break;
                    }
                    changeDate(currentDateFirst);
                    break;
                case CMD_MODE_MONTH:
                    mode = MODE_MONTH;
                    drawCalendar();
                    break;
                case CMD_MODE_YEAR:
                    mode = MODE_YEAR;
                    drawCalendar();
                    break;
            }
            return true;
        }
        return false;
    };

    function handleDocumentMousedown(event) {
        if (isOpen === false) {
            return;
        }
        if (event.target.getAttribute(ATTR_IDENTIFIER) === ATTR_IDENTIFIER_TRUE) {
            // sono nell'input correntemente selezionato
            return;
        }
        if (isInCalendar(event.target) === false) {
            // ho cliccato fuori dal calendario
            closePopup();
            return;
        }
        // sono nel calendario
        var cmd = event.target.getAttribute(ATTR_CMD);
        var date = parseDateISO(event.target.getAttribute(ATTR_DATE));
        executeCommand(cmd, date);
    };

    function handleInputKeydown(event) {
        if (isOpen === false) {
            return;
        }
        if (event.target.getAttribute(ATTR_IDENTIFIER) !== ATTR_IDENTIFIER_TRUE) {
            // sono nell'input correntemente selezionato
            return;
        }

        switch (event.keyCode) {
            case 9: // tab
            case 27: // esc
                closePopup();
                break;
            case 13: // enter
                closePopup();
                event.preventDefault();
                break;
            case 33: // pageUp
                executeCommand(CMD_PREV);
                break;
            case 34: // pageDown
                executeCommand(CMD_NEXT);
                break;
            default:
                break;
        }
    };

    function addEvent(querySelector) {
        var elmInputs = document.querySelectorAll(querySelector);
        for (var i = 0; i < elmInputs.length; i++) {
            var element = elmInputs[i];
            element.setAttribute(ATTR_IDENTIFIER, ATTR_IDENTIFIER_TRUE);
            element.addEventListener("focus", handleOpenPopup);
        }
    };

    function init() {
        applyStyles();

        elmWrapper = document.createElement("div");
        elmWrapper.style.display = "none";
        elmWrapper.className = CSS_BASE;
        document.body.appendChild(elmWrapper);

        setLanguage(1040);
        //setShowTodayButton(false);
        //setCustomClass("prova")
    };

    init();

    return {
        addEvent: addEvent,
        openPopup: openPopup,
        setShowTodayButton: setShowTodayButton,
        setCustomClass: setCustomClass,
        setLanguage: setLanguage,
        setWeekendClassEnable: setWeekendClassEnable
    }
}

Lingue

Nativamente supporta il formato date italiano (dd/MM/yyyy) e inglese (MM/dd/yyyy), l'italiano è il default.
Le lingue si possono estendere aggiungendole alla variabile supportedLanguages
JavaScript
var supportedLanguages = [
        {
            lcid: 1033,
            code: 'en-US',
            firstDayOfWeek: 0,  // 0=sunday, 1=Monday....6=Saturday 
            dayLabels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            monthLabels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            todayLabel: "Today",
            dateFormat: "MM/dd/yyyy"
        },
        {
            lcid: 1040,
            code: 'it-IT',
            firstDayOfWeek: 1,
            dayLabels: ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"],
            monthLabels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
            todayLabel: "Oggi",
            dateFormat: "dd/MM/yyyy"
        }
    ];

Come si usa

Ci sono 2 modalita in cui si può usare
  • aggiungendo gli eventi di apertura tramite selettore html
  • richiamando il metodo openPopup sull'evento focus

Selettore

L'esempio seguente mostra come usare il Date Picker In Vanilla JS e HTML.

Si parte costruendo l'oggetto e poi settando le opzioni.
HTML: Demo HTML
<input class="sgart-date-picker-ctrl" type="text" value="14/01/2022">
<input class="sgart-date-picker-ctrl" type="text" value="21/02/2022">

<script type="text/javascript" src="sgart-date-picker.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var cal = new SgartDatePicker();

        // volendo si puà aggiungere una classe custom            
        cal.setCustomClass('mia-classe');

        // settare la lingua tramite codice o LCID
        cal.setLanguage(1033);  // en-US , 1040=it-IT
        // cal.setLanguage('en-Us');  // en-US, it-IT

        // distinguere visivamente i weekend
        cal.setWeekendClassEnable(true);

        // infine aggiungere l'evento focus tramite selettore
        cal.addEvent(".sgart-date-picker-ctrl");
    });
</script>

Demo Vanilla JS

Data 1: Data 2:

Evento focus

Con un framework MVVM come Knockout JS si può usare l'evento focus per attivare l'apertura del Date Picker tramite il metodo openPopup come in questo esempio
HTML
<div>
    <!-- notare l'evento focus event: { focus: handleFocus } -->
    Data da: <input data-bind="value: myDateFrom, event: { focus: handleFocus }, visible: showDateFrom">
    <input type="checkbox" data-bind="checked: showDateFrom">
        [ <span data-bind="text: myDateFrom">0</span> ]
    |
        Data a: <input data-bind="value: myDateTo, event: { focus: handleFocus }, visible: showDateTo">
        <input type="checkbox" data-bind="checked: showDateTo">
        [ <span data-bind="text: myDateTo">0</span> ]
</div>

<script type="text/javascript" src="sgart-date-picker.js"></script>

<script>
    // Modello Knockout
    function SgartDatePickerViewModel() {
        var self = this;

        // inizializzo il calendario senza l'uso di .addEvent()
        var cal = new SgartDatePicker();
        cal.setWeekendClassEnable(true);

        // variabili per visualizzare o meno le input
        self.showDateFrom = ko.observable(true);
        self.showDateTo = ko.observable(true);
        
        // valore dei campi data in formato stringa
        self.myDateFrom = ko.observable("13/01/2022");
        self.myDateTo = ko.observable("22/04/2022");

        // gestore dell'evento focus che apre il calendatio Date Picker e usa openPopup
        self.handleFocus = function(vm, event) {

            // richiamo il metodo per aprire il Date Picker
            cal.openPopup(event.target, function (eventObj){

                if(eventObj!=null && event.target.dataset.bind!= null){

                    // per impostare il valore devo identificare il controllo attivo
                    if(event.target.dataset.bind.indexOf("myDateFrom")!==-1)
                        self.myDateFrom(eventObj.formatted);
                    else if(event.target.dataset.bind.indexOf("myDateTo")!==-1)
                        self.myDateTo(eventObj.formatted);
                }
            });
        }
    }

    document.addEventListener("DOMContentLoaded", function () {
        // bindind tra il document e il modello
        ko.applyBindings(new SgartDatePickerViewModel());
    });

</script>

Demo Knockout JS

Data da: [ 0 ] | Data a: [ 0 ]
Potrebbe interessarti anche: