MontoyaTech/ignite-html-select
MontoyaTech/ignite-html-select
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

First commit for this plugin.

Browse Source
This commit is contained in:
Matt Mo 2021-07-27 17:52:01 -07:00
parent 47e0a9a38b
commit d8a563df82
1 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
ignite-html-select.js Normal file
View File

@ -0,0 +1,110 @@
import { IgniteTemplate } from "../ignite-html/ignite-template.js";
/**
* Generates a series of years from the starting to the ending point.
* @param {Number} from Starting year.
* @param {Number} to Ending year.
* @param {String} placeholder The placeholder option, it's value will be 0, if set this text will be shown.
* @param {Boolean} descending Whether or not the to year is first and the from year is last.
* @returns This ignite template.
*
* @example
* .years(1950, 2021, true) //Generates a select descending, 2021, 2020, 2019.. ect.
*/
IgniteTemplate.prototype.years = function (from, to, placeholder = null, descending = false) {
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='0'>${placeholder}</option>`;
}
if (descending) {
for (var i = to; i >= from; i--) {
html += `<option value='${i}'>${i}</option>`;
}
} else {
for (var i = from; i <= to; i++) {
html += `<option value='${i}'>${i}</option>`;
}
}
return this.innerHTML(html);
};
/**
* Generates a series of months.
* @param {String} placeholder The placeholder option, it's value will be 0, if set this text will be shown.
* @param {Boolean} shorthand If true the option text will be the shorthand version of the month.
* @returns This ignite template.
*/
IgniteTemplate.prototype.months = function (placeholder = null, shorthand = true) {
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='0'>${placeholder}</option>`;
}
if (shorthand) {
html += `
<option value='1'>Jan</option>
<option value='2'>Feb</option>
<option value='3'>Mar</option>
<option value='4'>Apr</option>
<option value='5'>May</option>
<option value='6'>Jun</option>
<option value='7'>Jul</option>
<option value='8'>Aug</option>
<option value='9'>Sep</option>
<option value='10'>Oct</option>
<option value='11'>Nov</option>
<option value='12'>Dec</option>
`;
} else {
html += `
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
`;
}
return this.innerHTML(html);
}
/**
*
* @param {Number} from The starting day.
* @param {Number} to The ending day.
* @param {String} placeholder The placeholder option if set, it's value will be 0, this will be the text displayed.
* @param {Boolean} descending Whether or not the to day is first and the from year is last.
*/
IgniteTemplate.prototype.days = function (from = 1, to = 31, placeholder = null, descending = false) {
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='0'>${placeholder}</option>`;
}
if (descending) {
for (var i = to; i >= from; i--) {
html += `<option value='${i}'>${i}</option>`;
}
} else {
for (var i = from; i <= to; i++) {
html += `<option value='${i}'>${i}</option>`;
}
}
return this.innerHTML(html);
}