JSFiddle - React, Tailwind, and code Playground

by jimyu

JavaScript

/******************Data converter*********************/
function getQueryParams(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
}

Date.compare = function (d1, d2) {
    var date1 = moment(d1, "DD/MM/YYYY");
    var date2 = moment(d2, "DD/MM/YYYY");
    return date2 > date1;
}



/*********************Datepicker**********************/
ko.bindingHandlers.date = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);

        var d = "";
        if (valueUnwrapped) {
            var m = /Date\([\d+-]+\)/gi.exec(valueUnwrapped);
            if (m) {
                var date = eval("new " + m[0]);
                //Only handles not null date
                if (date > new Date(0)) {
                    var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
                    var month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
                    d = day + '/' + month + '/' + date.getFullYear();
                }
            }
        }
        $(element).text(d);
    }
};

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        $(element).datepicker({
            dateFormat: "dd/mm/yy",
            changeYear: true,
            changeMonth: true
        });

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
       ...