JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

JavaScript

enyo.kind({
	name: "ex.DatePicker",
	kind: "onyx.DatePicker",
	
	day: "",
	month: "",
	year: "",

	observers: {
		updateValue: ["day", "month", "year"]
	},

	updateValue: function() {
		if(this.day !== "" && this.month !== "" && this.year !== "") {
			this.set("value", new Date(this.year, this.month, this.day));
		}
	},
	valueChanged: enyo.inherit(function(sup) {
		return function() {
			if(!this.value) {
				this.set("day", "");
				this.set("month", "");
				this.set("year", "");
			} else {
				if(!(this.value instanceof Date)) {
					this.value = new Date(this.value);
				}

				this.day = this.value.getDate();
				this.month = this.value.getMonth();
				this.year = this.value.getFullYear();
			}

			sup.apply(this, arguments);
		};
	}),
	initDefaults: function() {
		// Fall back to en_us as default
		var months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];

		//Attempt to use the g11n lib (ie assume it is loaded)
		if (enyo.g11n) {
			this._tf = new enyo.g11n.Fmts({locale:this.locale});
			months = this._tf.getMonthFields();
		}

		this.setupPickers(this._tf ? this._tf.getDateFieldOrder() : 'mdy');

		this.dayHiddenChanged();
		this.monthHiddenChanged();
		this.yearHiddenChanged();

		//Fill month, year & day pickers with values
		var d = this.value || new Date();
		for (var i=0,m; (m=months[i]); i++) {
			this.$.monthPicker.createComponent({content: m, value:i, active: this.value && i==d.getMonth()});
		}

		// intentionally allowing selection here so the picker is scrolled to the right year
		// picker button will still be overriden later if necessary
		var y = d.getFullYear();
		this.$.yearPicker.setSelected(y-this.minYear);

		var maxDay = this.value? this.monthLength(d.getYear(), d.getMonth()) : 31;
		for (i=1; i<=maxDay; i++) {
			this.$.dayPicker.createComponent({content:i, value:i, active: this.value && i==d.getDate()});
		}

		if(!this.value)...