Maslosoft

Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar

Date Time Formatters

This is a set of binding handlers built on top of Moment.js library, providing human readable date and time in different manners.

Adding new formats

By default datetime bindings are registered with default options.
To customize, re-register with custom options possibly with other name too.

New handler formats can be created by creating new instance of one of:

  • Maslosoft.Binder.DateFormatter
  • Maslosoft.Binder.DateTimeFormatter
  • Maslosoft.Binder.TimeFormatter
  • Maslosoft.Binder.TimeAgoFormatter
Passing different parameters to constructor, and registering it via Maslosoft.Binder.register.

Live Example

Unix timestamp value:
Date time:
Date:
Time:
Time ago:
Locale date time
Locale date time with ko punches
Set to now Toggle timer Toggle timer direction

Relevant code used in examples:

<table class="table table-condensed">
	<tr>
		<th>Unix timestamp value:</th>
		<td>
			<input type="text" data-bind="textInput: binder.model.DateTime.date"/>
		</td>
	</tr>
	<tr>
		<th>Date time:</th>
		<td>
			<span data-bind="dateTimeFormatter: binder.model.DateTime.date"></span>
		</td>
	</tr>
	<tr>
		<th>Date:</th>
		<td>
			<span data-bind="dateFormatter: binder.model.DateTime.date"></span>
		</td>
	</tr>
	<tr>
		<th>Time:</th>
		<td>
			<span data-bind="timeFormatter: binder.model.DateTime.date"></span>
		</td>
	</tr>
	<tr>
		<th>Time ago:</th>
		<td>
			<span data-bind="timeAgoFormatter: binder.model.DateTime.date"></span>
		</td>
	</tr>
	<tr>
		<th>Locale date time</th>
		<td>
			<span data-bind="localeDateTime: binder.model.DateTime.date"></span>
		</td>
	</tr>
	<tr>
		<th>Locale date time with ko punches</th>
		<td>
			<span localeDateTime="{­{­binder.model.DateTime.date­}­}"></span>
		</td>
	</tr>
</table>
<script>
	window.onload = (function () {­
		// Custom register time related binding handlers
		Maslosoft.Binder.register('localeDateTime', new Maslosoft.Binder.DateTimeFormatter({­displayFormat: 'LL'­}));
		

		binder.model.DateTime = new Maslosoft.Koe.DateTime();
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>
Documentation Made with Zamm , Gathered by Staple