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>
    <div class="form-group">
        <label>Nulled value</label>
        <div class="input-group col-md-4 col-sm-6">
            <input data-bind="datePicker: binder.model.nulled.date" type="text" class="form-control"/>
        </div>
    </div>
</form>
<div data-bind="dateFormatter: binder.model.datePicker.date" class="label label-success"></div>
<div data-bind="dateFormatter: binder.model.nulled.date" class="label label-success"></div>
<script>
	window.onload = (function(){­
		binder.model.datePicker = new Maslosoft.Koe.DatePicker;
        binder.model.nulled = new Maslosoft.Koe.DatePicker;
        binder.model.nulled.date = null;
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>