otd[ResourceLoader|default|categories=Azala]|otd.js

(function () {
	const tfa = document.getElementById( 'efemerideak' );
    const tfaHeading = document.getElementById( 'efemerideak-heading' );
	let curYear = tfa.dataset.year;
	let curMonth = tfa.dataset.month;
	let curDay = tfa.dataset.day;
    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    
    function today() {
        const currentDate = new Date();
        const day = currentDate.getDate()
        const month = currentDate.getMonth() + 1
        const year = currentDate.getFullYear();
        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    }
    function humanMonth( m ) {
        return [
            'urtarrila',
            'otsaila',
            'martxoa',
            'apirila',
            'maiatza',
            'ekaina',
            'uztaila',
            'abuztua',
            'iraila',
            'urria',
            'azaroa',
            'abendua'
        ][ m ];
    }

	function fetchTFA(month, day) {
		const url = `/api/rest_v1/page/html/Txantiloi%3A${capitalizeFirstLetter(humanMonth(month))}_${day}`;
		try {
			return fetch( url ).then((r) => r.text()).then(( html ) => {
				const doc = (new DOMParser()).parseFromString(html, "text/html");
				return doc.querySelector( 'body' ).firstChild;
			} );
		} catch ( error ) {
			return Promise.resolve( null );
		}
	};

    const tfaBody = document.getElementById( 'efemerideak-content' );
	const btn = document.createElement( 'input' );
	const click = () => {
        const date = new Date( btn.valueAsNumber );
        const y = date.getFullYear();
        const m = date.getMonth();
        const d = date.getDate()
		fetchTFA( m, d ).then((element) => {
            tfaBody.innerHTML = '';
			tfaBody.append( element );
            tfaHeading.querySelector( 'span' ).textContent = `${y}ko ${humanMonth(m)}ren ${d}a`;
		} );
	}
    btn.type = 'date';
    btn.setAttribute( 'value', `${curYear}-${curMonth.padStart(2, '0')}-${curDay.padStart(2, '0')}` );
    btn.setAttribute( 'max', today() );
    tfaHeading.appendChild(btn);
	btn.addEventListener( 'input', click);
}())

otd[ResourceLoader|hidden|default|categories=Azala]|otd.js|otd.css

#efemerideak input {display:block;}