JSFiddle - React, Tailwind, and code Playground

by chintsu

HTML

<script src="https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"></script>
<script src="https://raw.github.com/josscrowcroft/accounting.js/master/accounting.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div class="form">
    <div class="form-field">
        <label for="cur1">Currency Input ($):</label>
        <input type="text" name="cur1" id="cur1" data-bind="value: currency1" />
        <span class="comment">as is</span>
    </div>
    <hr>
        <div class="form-field">
        <label for="cur2">Currency Input ($):</label>
        <input type="text" name="cur2" id="cur2" data-bind="value: currency2" />
            <span class="comment">using .extend (+ dynamic formatting) <br/>ko.observable(3234.0055).extend({ numeric: 2 })</span>
    </div>
        <hr>
        <div class="form-field">
        <label for="cur3">Numeric Input ($):</label>
        <input type="text" name="cur3" id="cur3" data-bind="value: currency3" />
            <span class="comment">format on set value <br/> ko.observable(formatCleanNumeric(3234.0055, 3))</span>
    </div>
    <hr>
    <div class="form-field">
        <label>Currency Output:</label>
        <span data-bind="formatCurrency: currency1"></span>
        <span class="comment">data-bind="formatCurrency: currency1"</span>
    </div>
    <hr>
    <div class="form-field">
        <label>Currency Output:</label>
        <span data-bind="formatCurrency: { value: currency1, precision: 3 }"></span>
        <span class="comment">data-bind="formatCurrency: { value: currency1, precision: 3 }"</span>
    </div>
    <hr>
    <div class="form-field">
        <label>Currency Output:</label>
        <span data-bind="formatCurrency: { value: currency1, precision: 0 }"></span>
        <span class="comment">data-bind="formatCurrency: { value: currency1, precision: 0 }"</span>
    </div>
    <hr>
    <div class="form-field">
        <label>Date Output:</label>
        <span...

CSS

label { width: 12em; display: inline-block; white-space: nowrap; }
body { background-color: #222; color: #eee; font-family: monospace; }
hr { border: dashed 1px #999; }
input { box-shadow: 0px 0px 6px #000; font-size: 150% }
.comment { color: #CCBF00;  }

JavaScript

accounting.settings = {
	currency: {
		symbol : "$ ",   // default currency symbol is '$'
		format: "%s%v", // controls output: %s = symbol, %v = value/number (can be object: see below)
		decimal : ".",  // decimal point separator
		thousand: ",",  // thousands separator
		precision : 2   // decimal places
	},
	number: {
		precision : 0,  // default precision on numbers is 0
		thousand: ",",
		decimal : "."
	}
};

$(function() {
    // format bindings
     ko.bindingHandlers.formatCurrency = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                $valueContainer = $(element);
            if(typeof value === 'number') {
                $valueContainer.html(formatCurrency(value));
            } else {
                $valueContainer.html(formatCurrency(ko.utils.unwrapObservable(value.value), value.precision));
            }
        }
    };
    
    ko.bindingHandlers.formatDate = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                $valueContainer = $(element);
            
            $valueContainer.html(formatDate(value));
        }
    };
    
     ko.bindingHandlers.formatDateTime = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                $valueContainer = $(element);
            
            $valueContainer.html(formatDateTime(value));
        }
    };
    
    ko.extenders.numeric = function(target, precision) {
        var result = ko.computed({
            read: target,
            write: function(newValue) {
                var current = target(),
                    valueToWrite = formatCleanNumeric(newValue, precision);
                
                    if (valueToWrite !== current) {
                        target(valueToWrite);
                    } else {
                        
                    if...