Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Introduction

A date picker.

Helium View Reference

<datefield/>

Plain HTML

Code Block
languagexml
titleOutput 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

 

Code Block
languagejs
titleOutput widget - Programmatically
linenumberstrue
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'));
}