Datefield

Introduction

A date picker.

Helium View Reference

Plain HTML

Output widget

<div class="widget-container">
	<label for="w1">Datefield Example</label>
	<div class="widget input dateinput">
		<input id="w1" type="text" placeholder="yyyy-MM-dd" class="input hasDatepicker">
	</div>
</div>

JavaScript / jQuery

Output widget - Programmatically

function drawDatefield() {
    let canvas = $('<div />').addClass('widget-container');
    var readOnly = false;
    $('<label />', {
        'for': 'w1',
        'text': 'Datefield Example'
    }).appendTo(canvas);
    var inputContainer = $('<div />').addClass('widget input dateinput');
    inputContainer.appendTo(canvas);
    var canvasInput = $('<input />', {
        'id': 'w1',
        'type': 'text',
        'disabled': readOnly,
        'placeholder': appConfig.dateFormat
    }).addClass('input').appendTo(inputContainer);
    canvasInput.datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "c-100:c+100",
        dateFormat: 'yy-mm-dd'
    });
    canvas.appendTo($('#embeddedComponentContent'));
}