KOA datepicker

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
<h3>Single</h3>
<input data-bind="datePicker: { boundField: D, valueType: 'dayjs' }"/>
<br/>
<xmp data-bind="text: D() && D().format('ddd DD MMM YYYY')"></xmp>
<hr/>
<h3>All errors</h3>
<div data-bind="ef: Errors, efFor: '*'"></div>
<br/>
<h3>test1 error</h3>
<div data-bind="ef: Errors, efFor: 'test1'"></div>
<br/>
<h3>/test/ errors</h3>
<div data-bind="ef: Errors, efFor: /test/"></div>
<hr/>
<h3>Multi</h3>

<div data-bind="_multiDatePicker: {boundField: Ds, keepOpen: true }"></div>
<br/>
<xmp data-bind="text: JSON.stringify(ko.toJS(Ds))"></xmp>

CSS

.ui-icon-datepicker:before {
  content: 'Pick'
}

.ui-icon-datepicker-clear:before {
  content: 'Clear'
}

.ui-icon-multidatepicker-add:before {
  content: 'Add';
}

.ui-icon-multidatepicker-delete:before {
  content: 'Remove';
}

JavaScript

(function()
{
    if (typeof (window.CF) == 'undefined') window.CF = {};
    if (typeof (window.CF.UI) == 'undefined') window.CF.UI = {};
    if (typeof (window.CF.UI.Defaults) == 'undefined') window.CF.UI.Defaults = {};
    if (typeof (window.CF.UI.Defaults.DatePicker) == 'undefined') window.CF.UI.Defaults.DatePicker = {};
    if (typeof (window.CF.UI.Defaults.MultiDatePicker) == 'undefined') window.CF.UI.Defaults.MultiDatePicker = {};
    /*
     Copyright 2014 cFront Software Ltd, http://www.cfront.co.uk
     Free for any use, provided this copyright notice is maintained.
    */

    /*

    CONFIG
   
    valueType:  This is the format the date will be written back to the observable as.
                'string': YYYY-MM-DD string
                'dayjs': DayJS object
                'date': Javascript Date object

    friendlyKeys: Allow navigation with cursor keys without using Ctrl

    */

    // ------------------------------------------------------------------------------------------------------------------------------------------------
    CF.UI.Defaults.DatePicker = $.extend({}, {
        valueType: 'string',
        friendlyKeys: true,
        addPickButton: true,
        addClearButton: true,
        widgetOptions: {
            dateFormat: 'dd/mm/yy', // Format for picking (jQuery UI DatePicker style)
            firstDay: 1,
            changeYear: true,
            changeMonth: true,
            defaultDate: ''
        }
    }, CF.UI.Defaults.DatePicker);

    CF.UI.Defaults.MultiDatePicker = $.extend({}, {
        valueType: 'string',
        keepOpen: false,
        hidePicker: true,
        friendlyKeys: true,
        allowDuplicates: false,
        allowToggle: false,
        sortOrder: window.undefined,
        addPickButton: false,
        addClearButton: false,
        dateDisplayFormat: 'DD/MM/YYYY', // Format for displayng in list (DayJS style)
        widgetOptions: {
            dateFormat: 'dd/mm/yy', // Format for picking (jQuery UI...