123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426 |
- const version = "1.1.0";
- const namespace = "yearpicker";
- if (!jQuery) {
- alert(`${namespace} ${version} requires jQuery`);
- }
- let defaults = {
- // The Initial Date
- year: null,
- // Start Date
- startYear: null,
- // End Date
- endYear: null,
- // A element tag items
- itemTag: "li",
- //css class selected date item
- selectedClass: "selected",
- // css class disabled
- disabledClass: "disabled",
- hideClass: "hide",
- template: `<div class="yearpicker-container">
- <div class="yearpicker-header">
- <div class="yearpicker-prev" data-view="yearpicker-prev">‹</div>
- <div class="yearpicker-current" data-view="yearpicker-current">SelectedYear</div>
- <div class="yearpicker-next" data-view="yearpicker-next">›</div>
- </div>
- <div class="yearpicker-body">
- <ul class="yearpicker-year" data-view="years">
- </ul>
- </div>
- </div>
- `,
- // Event shortcuts
- onShow: null,
- onHide: null,
- onChange: null,
- };
- const event_click = "click.";
- const event_focus = "focus.";
- const event_keyup = "keyup.";
- const event_selected = "selected.";
- const event_show = "show.";
- const event_hide = "hide.";
- const methods = {
- // Show datepicker
- showView: function showView() {
- const $this = this;
- if (!$this.build) {
- $this.init();
- }
- if ($this.show) {
- return;
- }
- $this.show = true;
- const $template = $this.$template,
- options = $this.options;
- $template
- .removeClass(options.hideClass)
- .on(event_click, $.proxy($this.click, $this));
- $(document).on(
- event_click,
- (this.onGlobalClick = $.proxy($this.globalClick, $this))
- );
- if (options.onShow && $.isFunction(options.onShow)) {
- options.onShow($this.year);
- }
- },
- // Hide the datepicker
- hideView: function hideView() {
- const $this = this;
- if (!$this.show) {
- return;
- }
- // if ($this.trigger(event_hide).isDefaultPrevented()) {
- // return;
- // }
- const $template = $this.$template,
- options = $this.options;
- $template.addClass(options.hideClass).off(event_click, $this.click);
- $(document).off(event_click, $this.onGlobalClick);
- $this.show = false;
- if (options.onHide && $.isFunction(options.onHide)) {
- options.onHide($this.year);
- }
- },
- // toggle show and hide
- toggle: function toggle() {
- if (this.show) {
- this.hideView();
- } else {
- this.show();
- }
- },
- };
- const handlers = {
- click: function click(e) {
- const $target = $(e.target),
- viewYear = this.viewYear;
- if ($target.hasClass("disabled")) {
- return;
- }
- const view = $target.data("view");
- switch (view) {
- case "yearpicker-prev":
- var year = viewYear - 12;
- this.viewYear = year;
- this.renderYear();
- break;
- case "yearpicker-next":
- var year = viewYear + 12;
- this.viewYear = year;
- this.renderYear();
- break;
- case "yearpicker-items":
- this.year = parseInt($target.html());
- this.renderYear();
- this.hideView();
- break;
- default:
- break;
- }
- },
- globalClick: function globalClick(_ref) {
- let target = _ref.target;
- let element = this.element;
- let hidden = true;
- if (target !== document) {
- while (
- target === element ||
- $(target).closest(".yearpicker-header").length === 1
- ) {
- hidden = false;
- break;
- }
- target = target.parentNode;
- }
- if (hidden) {
- this.hideView();
- }
- },
- };
- const render = {
- renderYear: function renderYear() {
- const $this = this,
- options = this.options,
- startYear = options.startYear,
- endYear = options.endYear;
- const disabledClass = options.disabledClass,
- viewYear = $this.viewYear,
- selectedYear = $this.year,
- now = new Date(),
- thisYear = now.getFullYear(),
- start = -5,
- end = 6,
- items = [];
- let prevDisabled = false;
- let nextDisabled = false;
- let i = void 0;
- for (i = start; i <= end; i++) {
- let year = viewYear + i;
- let disabled = false;
- if (startYear) {
- disabled = year < startYear;
- if (i === start) {
- prevDisabled = disabled;
- }
- }
- if (!disabled && endYear) {
- disabled = year > endYear;
- if (i === end) {
- nextDisabled = disabled;
- }
- }
- // check for this is a selected year
- const isSelectedYear = year === selectedYear;
- const view = isSelectedYear ? "yearpicker-items" : "yearpicker-items";
- items.push(
- $this.createItem({
- selected: isSelectedYear,
- disabled: disabled,
- text: viewYear + i,
- //view: disabled ? "yearpicker disabled" : view,
- view: disabled ? "yearpicker-items disabled" : view,
- highlighted: year === thisYear,
- })
- );
- }
- $this.yearsPrev.toggleClass(disabledClass, prevDisabled);
- $this.yearsNext.toggleClass(disabledClass, nextDisabled);
- $this.yearsCurrent.html(selectedYear);
- $this.yearsBody.html(items.join(" "));
- $this.setValue();
- },
- };
- const Yearpicker = (function () {
- function YearPicker(element, options) {
- const $this = this;
- $this.options = $.extend({}, defaults, options);
- $this.$element = $(element);
- $this.element = element;
- $this.build = false;
- $this.show = false;
- $this.startYear = null;
- $this.endYear = null;
- $this.$template = $($this.options.template);
- $this.init();
- }
- YearPicker.prototype = {
- /**
- * constructor
- * configure the yearpicker before initialize
- * @returns {null}
- */
- init: function () {
- const $this = this,
- $element = this.$element,
- options = this.options;
- if (this.build) {
- return;
- }
- $this.build = true;
- const startYear = options.startYear,
- endYear = options.endYear,
- defaultYear = $this.getValue(),
- $template = $this.$template;
- let year = options.year;
- $this.isInput = $element.is("input") || $element.is("textarea");
- $this.initialValue = defaultYear;
- $this.oldValue = defaultYear;
- const currentYear = new Date().getFullYear();
- // set the defaultyear
- year = year || defaultYear || null;
- // set the startyear
- if (startYear) {
- if (year && year < startYear) {
- year = startYear;
- }
- $this.startYear = startYear;
- }
- // set the endyear
- if (endYear) {
- if (year && year > endYear) {
- year = endYear;
- }
- $this.endYear = endYear;
- }
- $this.year = year;
- $this.viewYear = year || currentYear;
- $this.initialYear = year || currentYear;
- $this.bind();
- $this.yearsPrev = $template.find(".yearpicker-prev");
- $this.yearsCurrent = $template.find(".yearpicker-current");
- $this.yearsNext = $template.find(".yearpicker-next");
- $this.yearsBody = $template.find(".yearpicker-year");
- $template.addClass(options.hideClass);
- $element.after($template.addClass(namespace + "-dropdown"));
- $this.renderYear();
- },
- // assign a events
- bind: function () {
- const $this = this,
- $element = this.$element,
- options = this.options;
- if ($.isFunction(options.show)) {
- $element.on(event_show, options.show);
- }
- if ($.isFunction(options.hide)) {
- $element.on(event_hide, options.hide);
- }
- if ($.isFunction(options.click)) {
- $element.on(event_click, options.click);
- }
- if ($this.isInput) {
- $element.on(event_focus, $.proxy($this.showView, $this));
- } else {
- $element.on(event_click, $.proxy($this.showView, $this));
- }
- },
- getValue: function () {
- const $this = this,
- $element = this.$element;
- const value = $this.isInput ? $element.val() : $element.text();
- return parseInt(value);
- },
- setValue: function () {
- const $this = this,
- $element = this.$element,
- options = this.options,
- value = this.year;
- const previousValue = $this.isInput ? $element.val() : $element.text();
- if ($this.isInput) {
- $element.val(value);
- } else {
- $element.html(value);
- }
- if (previousValue != value) {
- if (options.onChange && $.isFunction(options.onChange)) {
- options.onChange($this.year);
- }
- }
- $element.trigger("change");
- },
- trigger: function (type, data) {
- data = data || this.year;
- const e = $.Event(type, data);
- this.$element.trigger(e);
- return e;
- },
- createItem: function (data) {
- const options = this.options,
- itemTag = options.itemTag,
- classes = [];
- const items = {
- text: "",
- view: "",
- selected: false,
- disabled: false,
- highlighted: false,
- };
- $.extend(items, data);
- if (items.selected) {
- classes.push(options.selectedClass);
- }
- if (items.disabled) {
- classes.push(options.disabledClass);
- }
- return `<${itemTag} class="${items.view} ${classes.join(
- " "
- )}" data-view="${items.view}">${items.text}</${itemTag}>`;
- },
- };
- return YearPicker;
- })();
- if ($.extend) {
- $.extend(Yearpicker.prototype, methods, render, handlers);
- }
- if ($.fn) {
- $.fn.yearpicker = function jQueryYearpicker(options) {
- var result = void 0;
- this.each(function (index, element) {
- var $element = $(element);
- var isDestory = options === "destroy";
- var yearpicker = $element.data(namespace);
- if (!yearpicker) {
- if (isDestory) {
- return;
- }
- yearpicker = new Yearpicker(element, options);
- $element.data(namespace, yearpicker);
- }
- if (typeof options === "string") {
- var fn = yearpicker[options];
- if ($.isFunction(fn)) {
- result = fn.apply(yearpicker, args);
- if (isDestory) {
- $element.removeData(namespace);
- }
- }
- }
- });
- return !result ? result : this;
- };
- $.fn.yearpicker.constractor = Yearpicker;
- }
|