Menu

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

Edit

Date Picker

This binding handler is bootstrap datepicker based. Picker is meant to be used additionally, leaving input for typing with keyboard.

Ninja Skills

This component is enchanced with Date JS, so it has some ninja features. Try to type "now", "sunday", "next monday" into date inputs and then press Enter. Other options include, but are not limited to:

  • +1 day
  • +5 weeks
  • -2 years
  • +2 y

Live Example


Set a bit to past Set date to now Set a bit to future

Relevant code used in examples:

<form class="form">
	<div class="form-group">
		<div class="input-group col-md-4 col-sm-6">
			<input data-bind="datePicker: binder.model.datePicker.date" type="text" class="form-control"/>
		</div>
	</div>
	<div class="form-group">
		<div class="input-group col-md-4 col-sm-6">
			<input data-bind="datePicker: binder.model.datePicker.date, dateOptions: {­format: 'yyyy/mm/dd'­}" type="text" class="form-control"/>
		</div>
	</div>
	<div class="form-group">
		<div class="input-group col-md-4 col-sm-6">
			<input data-bind="datePicker: binder.model.datePicker.date, dateOptions: {­format: 'dd.mm.yyyy'­}" type="text" class="form-control"/>
		</div>
	</div>
	<div class="form-group">
		<div class="input-group col-md-4 col-sm-6">
			<input data-bind="datePicker: binder.model.datePicker.date" type="text" class="form-control"/>
		</div>
	</div>
</form>
<div data-bind="dateFormatter: binder.model.datePicker.date" class="label label-success"></div>
<script>
	window.onload = (function(){­
		binder.model.datePicker = new Maslosoft.Koe.DatePicker;
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>