Knockout Binding for Date on Span

Knockout Binding for Date on Span

by Rupesh Kokal

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<div id="example">
    <span data-bind="dateTimeView: selectedItem, dateTimeViewOptions: { showTime:true }"></span>

     <hr/>
    
     <div data-bind="text: ko.toJSON(selectedItem)"></div>      

 <button data-bind="click: resetDefault">Reset Default</button>
</div>

JavaScript

//------------------Date Picker Knockout Custom Binding
    ko.bindingHandlers.dateTimeView = {
        convertDateString: function (date) {
            return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
        },        
        convertDateTimeString: function (date) {
            var ampm = "AM";
            var result = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
            
            var hours = date.getHours();
            var minutes = date.getMinutes();
            if(hours === 0)
                hours = 12;
            else if(hours > 12) {
                ampm = "PM";
                hours = hours - 12;
            }
                       
            //If it is midnight, just omit the time, since it is a default date
            if(hours !== 0) {
            result = result + ' ' + (hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ' ' + ampm;
            }
            
            return result;
        },
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var unwrap = ko.utils.unwrapObservable;
            var dataSource = valueAccessor();
            var binding = allBindingsAccessor();
            var options = { showTime: false };
            var source;

            if (binding.dateTimeViewOptions) {
                options = $.extend(options, binding.dateTimeViewOptions);
            }
            
            if(dataSource) {
                var stringResult;
                if(options.showTime) 
                    stringResult = ko.bindingHandlers.dateTimeView.convertDateTimeString(unwrap(dataSource));
                else
                    stringResult = ko.bindingHandlers.dateTimeView.convertDateString(unwrap(dataSource));
                
                $(element).text(stringResult);
            }
            else
                $(element).text('');
        },
        update: function (element, valueAccessor,...