Search completed in 1.11 seconds.
datepicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a
datepicker allows the user to enter a date.
... normal - a
datepicker with three fields for entering the year, month and date.
... grid - a
datepicker with a calendar grid for selecting a date.
...And 13 more matches
datepicker.type - Archive of obsolete content
« xul reference home type type: one of the values below you can set the type attribute to one of the values below to specify the type of
datepicker to use normal a
datepicker with three fields for entering the year, month and date.
... grid a
datepicker that displays a calendar grid where one month is shown at a time.
... popup a
datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid.
Index - Archive of obsolete content
832
datepicker.type xul attributes, xul reference no summary!
... 833
datepicker.value xul attributes, xul reference no summary!
... 1410
datepicker.open xul properties, xul reference no summary!
...And 3 more matches
Index - Archive of obsolete content
85
datepicker.type xul attributes, xul reference no summary!
... 86
datepicker.value xul attributes, xul reference no summary!
... 679
datepicker.open xul properties, xul reference no summary!
...And 3 more matches
Forms related code snippets - Archive of obsolete content
date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>
datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*|
datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later.
... |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function
datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createelement("tr"), othead = document.createelement("thead"), ocapt = document.createelement("caption"), odecryear = document.createelement("span"), oincryear = document.createelement("span"), odecrmonth = document.createelement("span"), oincrmonth = document.createelement("span"); var nid = ainstances.length, oth; this.target = otarget; this.display = document.createelement("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; otabl...
...table.parentnode) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = otarget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); }
datepicker.prototype.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) % 7, nend = amonthlengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((7 - nend % 7) % 7); var otd, otr; if (this.otbody) { this.container.removechild(this.otbody); } this.otbody = document.createelement("tbody"); for (var nday, oday, ni...
...hiscal.target.value = (this.innerhtml / 100).tofixed(2).substr(-2) + "\/" + (othiscal.current.getmonth() + 1) + "\/" + othiscal.current.getfullyear(); othiscal.container.parentnode.removechild(othiscal.container); return false; } function buildcalendars () { const afields = document.getelementsbyclassname(sdpclass), nlen = afields.length; for (var nitem = 0; nitem < nlen; new
datepicker(afields[nitem++])); } const /* customizable by user */ sprefs = "zdp"; sdpclass = "date-picker", smonthsnames = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, ...
Numeric Controls - Archive of obsolete content
date and time entry fields the
datepicker and timepicker elements may be used to allow the user to enter dates and times.
...<
datepicker value="2004-03-24"/> <timepicker value="15:30:00"/> the value attribute is used to set the default value; if this attribute is omitted, the field will be initially set to the current date or time.
...while the timepicker only comes is one style, the
datepicker has three different variations.
...<
datepicker type="popup"/> « previousnext » ...
XUL controls - Archive of obsolete content
<colorpicker type="button" color="#cc0080"/> colorpicker reference <
datepicker> a set of textboxes which may be used to allow the entry of a date.
... <
datepicker value="2007/03/26"/>
datepicker reference <
datepicker type="grid"> a
datepicker which displays a calendar grid for selecting a date.
... <
datepicker type="grid" value="2007/02/20"/>
datepicker reference <
datepicker type="popup" > a
datepicker which displays a set of textboxes for date entry, but also has a button for displaying a popup calendar grid.
... <
datepicker type="popup" value="2008/08/24"/>
datepicker reference <description> the description element is used for descriptive text.
Color picker tool - CSS: Cascading Style Sheets
offsetleft; var width = this.alpha_area.clientwidth; if (x < 0) x = 0; if (x > width) x = width; this.color.a = (x / width).tofixed(2); this.updatesliderposition(this.alpha_picker, x); this.updatepreviewcolor(); this.notify('alpha', this.color.a); notify(this.topic, this.color); }; colorpicker.prototype.sethue = function sethue(value) { this.color.sethue(value); this.up
datepickerbackground(); this.updatealphagradient(); this.updatepreviewcolor(); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hexa', this.color.gethexa()); this.notify('hue', this.color.hue); notify(this.topic, this.color); }; // updates when one of saturation/value/lightness changes colorpicker.prototype.updateslv ...
...= function updateslv() { this.up
datepickerposition(); this.updatealphagradient(); this.updatepreviewcolor(); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hexa', this.color.gethexa()); notify(this.topic, this.color); }; /*************************************************************************/ // update positions of various ui elements /*************************************************************************/ colorpicker.prototype.up
datepickerposition = function up
datepickerposition() { var size = this.picking_area.clientwidth; var value = 0; var offset = 5; if (this.picker_mode === 'hsv') value = this.color.value; if (this.picker_mode === 'hsl') value = this.color.lightness; var...
...ction updatealphapicker() { var size = this.alpha_area.clientwidth; var offset = 1; var pos = (this.color.a * size) | 0; this.alpha_picker.style.left = pos - offset + 'px'; }; /*************************************************************************/ // update background colors /*************************************************************************/ colorpicker.prototype.up
datepickerbackground = function up
datepickerbackground() { var nc = new color(this.color); nc.sethsv(nc.hue, 100, 100); this.picking_area.style.backgroundcolor = nc.gethexa(); }; colorpicker.prototype.updatealphagradient = function updatealphagradient() { this.alpha_mask.style.backgroundcolor = this.color.gethexa(); }; colorpicker.prototype.updatepreviewcolor = function updatepreviewcolor() { ...
...*****************************************************************/ colorpicker.prototype.setcolor = function setcolor(color) { if(color instanceof color !== true) { console.log('typeof parameter not color'); return; } if (color.format !== this.picker_mode) { color.setformat(this.picker_mode); color.updatehsx(); } this.color.copy(color); this.updatehuepicker(); this.up
datepickerposition(); this.up
datepickerbackground(); this.updatealphapicker(); this.updatealphagradient(); this.updatepreviewcolor(); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hue', this.color.hue); this.notify('saturation', this.color.saturation); this.notify('value', this.color.value); this.notify('lightnes...
Linear-gradient Generator - CSS: Cascading Style Sheets
etleft; var width = this.alpha_mask.clientwidth; if (x < 0) x = 0; if (x > width) x = width; this.color.a = (x / width).tofixed(2); this.updatesliderposition(this.alpha_picker, x - 1); this.updatepreviewcolor(); this.notify('alpha', this.color.a); notify(this.topic, this.color); }; colorpicker.prototype.sethue = function sethue(value) { this.color.sethue(value); this.up
datepickerbackground(); this.updatealphagradient(); this.updatepreviewcolor(); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hexa', this.color.gethexa()); this.notify('hue', this.color.hue); notify(this.topic, this.color); }; // updates when one of saturation/value/lightness changes colorpicker.prototype.updateslv ...
...= function updateslv() { this.up
datepickerposition(); this.updatealphagradient(); this.updatepreviewcolor(); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hexa', this.color.gethexa()); notify(this.topic, this.color); }; /*************************************************************************/ // update positions of various ui elements /*************************************************************************/ colorpicker.prototype.up
datepickerposition = function up
datepickerposition() { var size = this.picking_area.clientwidth; var value = 0; if (this.picker_mode === 'hsv') value = this.color.value; if (this.picker_mode === 'hsl') value = this.color.lightness; var x = (this.color.s...
...ype.updatealphapicker = function updatealphapicker() { var size = this.alpha_mask.clientwidth; var pos = (this.color.a * size) | 0; this.alpha_picker.style.left = pos + 'px'; }; /*************************************************************************/ // update background colors /*************************************************************************/ colorpicker.prototype.up
datepickerbackground = function up
datepickerbackground() { var nc = new color(this.color); nc.sethsv(nc.hue, 100, 100); this.picking_area.style.backgroundcolor = nc.gethexa(); }; colorpicker.prototype.updatealphagradient = function updatealphagradient() { this.alpha_mask.style.backgroundcolor = this.color.gethexa(); }; colorpicker.prototype.updatepreviewcolor = function updatepreviewcolor() { ...
...*****************************************************************/ colorpicker.prototype.setcolor = function setcolor(color) { if(color instanceof color !== true) { console.log('typeof parameter not color'); return; } if (color.format !== this.picker_mode) { color.setformat(this.picker_mode); color.updatehsx(); } this.color.copy(color); this.updatehuepicker(); this.up
datepickerposition(); this.up
datepickerbackground(); this.updatealphapicker(); this.updatepreviewcolor(); this.updatealphagradient(); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hue', this.color.hue); this.notify('saturation', this.color.saturation); this.notify('value', this.color.value); this.notify('lightnes...
<input type="month"> - HTML: Hypertext Markup Language
html the form that requests the month and year looks like this: <form> <div class="native
datepicker"> <label for="month-visit">what month would you like to visit us?</label> <input type="month" id="month-visit" name="month-visit"> <span class="validity"></span> </div> <p class="fallbacklabel">what month would you like to visit us?</p> <div class="fallback
datepicker"> <div> <span> <label for="month">month:</label> <select id="month" name="month"> ...
.../option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <option>december</option> </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> </select> </span> </div> </div> </form> the <div> with the id native
datepicker uses the month input type to request the month and year, while the <div> with the id fallback
datepicker instead uses a pair of <select> elements.
... // define variables var nativepicker = document.queryselector('.native
datepicker'); var fallbackpicker = document.queryselector('.fallback
datepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text inp...
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content
datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script sc...
...zer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker
datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid col...
XForms Input Element - Archive of obsolete content
(xhtml/xul)
datepicker - used to represent data of type xsd:date (xhtml/xul) calendar - used to represent data of type xsd:date when appearance attribute also has the value 'full' (xhtml/xul) month list - used to represent data of type xsd:gmonth (xhtml only) days list - used to represent data of type xsd:gday (xhtml only) number field - used to represent data of numeric type (fx 3.0 only, xul only) more detail about ...
...
datepicker this widget is similar to a combobox.
Mozilla XForms User Interface - Archive of obsolete content
for example, a xforms input control may appear as a text field or as a
datepicker depending on whether it is bound to a xsd:string type or a xsd:date type.
... checkbox - used for boolean instance data
datepicker - default representation for date data types.
<input type="date"> - HTML: Hypertext Markup Language
html the html looks like so: <form> <div class="native
datepicker"> <label for="bday">enter your birthday:</label> <input type="date" id="bday" name="bday"> <span class="validity"></span> </div> <p class="fallbacklabel">enter your birthday:</p> <div class="fallback
datepicker"> <span> <label for="day">day:</label> <select id="day" name="day"> </select> </span> <span> <label for="mont...
... // define variables var nativepicker = document.queryselector('.native
datepicker'); var fallbackpicker = document.queryselector('.fallback
datepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); var dayselect = document.queryselector('#day'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test w...
type - Archive of obsolete content
see button.type browser.type colorpicker.type
datepicker.type editor.type listcell.type listitem.type menuitem.type notification.type prefwindow.type query.type script.type textbox.type toolbarbutton.type treecol.type ...
Handling common HTML and CSS problems - Learn web development
for cross browser forms, it is probably better to rely on simple form elements, or selectively use advanced form elements only in supporting browsers, or using a library that provides decent cross browser form widgets, such as jquery ui or bootstrap
datepicker.
ARIA Test Cases - Accessibility
- - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - -
datepicker testcases:
datepicker example expected at behavior: markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass ...
<input type="datetime-local"> - HTML: Hypertext Markup Language
06-30t16:30: <form> <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30"> </form> the result here is that: only days in june 2017 can be selected — only the "days" part of the date value will be editable, and dates outside june can't be scrolled to in the
datepicker widget.