Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Current »

Introduction

A date picker.

Helium View Reference

<datefield/>

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': 'w4',
        'text': 'Date field example'
    }).appendTo(canvas);
    var inputContainer = $('<div />').addClass('widget input dateinput');
    inputContainer.appendTo(canvas);
    var canvasInput = $('<input />', {
        'id': 'w4',
        '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'));
}
  • No labels

0 Comments

You are not logged in. Any changes you make will be marked as anonymous. You may want to Log In if you already have an account.