Simple Date

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<input type="text" data-bind="date: Date" />
<hr/>
<div data-bind="date: Date"></div>

JavaScript

// Shortcut to moment to avoid constantly creating extra date string fields
ko.bindingHandlers.date = {
	init: 
		function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext) 
    {
    	if(el.nodeName == 'INPUT')
      {
      	var nodes = $(
        	'<div class="ko-simple-date">' + 
          '<div class="editor">' + 
          '<input type="text" class="kosd-d" data-bind="value: D" />' +
          '<input type="text" class="kosd-m" data-bind="value: M" />' +
          '<input type="text" class="kosd-y" data-bind="value: Y" />' +
          '</div>' +
          '</div>'
         ).insertAfter(el);
         
        $(el).hide();
        
 				var model ={
							D: ko.observable(),
              M: ko.observable(),
              Y: ko.observable()
        };
        
        var extctx = bindingcontext.extend(model);
        
        ko.applyBindingsToDescendants(extctx, nodes[0]);
      
      	return { controlsDescendantBindings: true };
      }
    },
	update: 
		function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext) 
		{
			// Get current value of supplied value
			var o = f_valueaccessor();
      var field, dt, val;
      var format = 'DD/MM/YYYY';
      var editformat = 'DD/MM/YYYY';
      
      $(el).addClass("ko-simple-date");
      
      if(ko.unwrap(o).hasOwnProperty('dt'))
      {
      	field = o;
        dt = ko.unwrap(o).dt;
        val = ko.unwrap(dt);
      }
      
      var mom = moment(val);
      
      if(el.nodeName != 'INPUT')
				$(el).html(val ? moment(val).format(format) : '');
      else
      {
      	var editor = $(el).next('.ko-simple-date').find('.editor')[0];
        var ctx = ko.contextFor(editor);
        
        if(ctx)
        {
        	ctx.D(mom.format('DD'));
          ctx.M(mom.format('MM'));
          ctx.Y(mom.format('YYYY'));
        }        
      }
		}
};


function Model(data, mapping)
{
    var _this = this;
    var _mapping = $.extend({}, {}, mapping);
    
    this.Date = { dt:...