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 2 Next »

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 drawCodeExample() {
    var canvas = $('<div />').addClass('widget-container');
    var codeContainer = $('<div />').addClass('widget code-container ui-corner-all');
    var captionContainer = $('<div />').addClass('caption-container');
    $('<span />', {
        text: 'Code example'
    }).addClass('caption').appendTo(captionContainer);  
    captionContainer.appendTo(codeContainer);
    var codeContent = $('<pre />', {
        'id': 'w0'
    }).addClass("code").appendTo(codeContainer);
    var lines = ['select * from person', 'select * from person where _id_ = ...']
    for (var i = 0; i < lines.length; i++) {
        $('<span />', {
            'text': lines[i]
        }).addClass("codeline").appendTo(codeContent);
    }
    codeContainer.appendTo(canvas);
    canvas.appendTo($('#embeddedComponentContent'));
}
  • No labels