date picker year input

Author: mProjectsCode

exampleVault/.obsidian/plugins/obsidian-meta-bind-plugin/main.js

@@ -4,6 +4,6 @@ select: option b
 multi-select:
   - option b
   - option c
-date: Thursday, September 22nd 2022
+date: Friday, September 10th 2004
 time: 19:20
 ---

exampleVault/other note.md

@@ -27,12 +27,13 @@
 	}
 
 	.calendar-header {
-		display:       flex;
-		flex-wrap:     wrap;
-		gap:           2px;
-		background:    var(--background-primary);
-		border-radius: var(--meta-bind-plugin-border-radius);
-		margin-bottom: 2px;
+		display:         flex;
+		justify-content: space-around;
+		flex-wrap:       wrap;
+		gap:             2px;
+		background:      var(--background-primary);
+		border-radius:   var(--meta-bind-plugin-border-radius);
+		margin-bottom:   2px;
 	}
 
 	.calendar-content {
@@ -43,7 +44,7 @@
 	}
 
 	.cell {
-		width:           40px;
+		min-width:       40px;
 		height:          30px;
 		padding:         5px;
 		display:         flex;

src/inputFields/DatePicker/Calender.svelte

@@ -13,14 +13,14 @@
 	export let dateChangeCallback: (date: moment.Moment) => void;
 
 	// state
-	let date;
-	let month;
-	let year;
-	let showDatePicker;
+	let date: number;
+	let month: number;
+	let year: number;
+	let showDatePicker: boolean;
 
 	// so that these change with props
 	$: {
-		// console.log('update date picker', selectedDate);
+		console.log('update date picker', selectedDate);
 		date = selectedDate.date();
 		month = selectedDate.month();
 		year = selectedDate.year();
@@ -49,6 +49,14 @@
 		month -= 1;
 	}
 
+	function yearChange(value: any) {
+		const v = value.target.value;
+		const vNum = Number.parseInt(v);
+		if (!Number.isNaN(vNum)) {
+			year = vNum;
+		}
+	}
+
 	function onDateChange(d: { detail: moment.Moment }) {
 		showDatePicker = false;
 		selectedDate = d.detail;
@@ -79,7 +87,7 @@
 		background:    var(--background-secondary);
 		border-radius: var(--meta-bind-plugin-border-radius);
 		border:        var(--meta-bind-plugin-border-width) solid var(--background-modifier-border);
-		padding:       5px 10px;
+		padding:       5px 5px 5px 7px;
 		cursor:        pointer;
 		width:         fit-content;
 		display:       inline-block;
@@ -96,13 +104,28 @@
 
 	.date-picker-header {
 		display:         flex;
-		justify-content: center;
+		gap:             5px;
 		align-items:     center;
+		justify-content: space-around;
 	}
 
 	.date-picker-header-text {
-		flex:       1;
-		text-align: center;
+		flex:            1;
+		text-align:      center;
+		display:         flex;
+		gap:             5px;
+		align-items:     center;
+		justify-content: center;
+		width:           min-content;
+	}
+
+	.date-picker-header-text-year {
+		width:   60px;
+		padding: 5px;
+	}
+
+	.date-picker-header-text-month {
+		height: min-content;
 	}
 
 	.month-switch-button {
@@ -121,7 +144,9 @@
 			<div class="date-picker-header">
 				<button class="month-switch-button" on:click={prev}>Prev</button>
 				<div class="date-picker-header-text">
-					{getMonthName(month)} {year}
+					<span class="date-picker-header-text-month">{getMonthName(month)}</span>
+					<input class="date-picker-header-text-year" type="number" value="{year.toString()}"
+						   on:input="{yearChange}">
 				</div>
 				<button class="month-switch-button" on:click={next}>Next</button>
 			</div>

src/inputFields/DatePicker/DatePicker.svelte

@@ -21,14 +21,17 @@ export function getMonthName(index: number): string {
 
 export function getDateRows(monthIndex: number, year: number): number[] {
 	const days: number = moment(new Date(year, monthIndex)).daysInMonth(); // amount of days in month
-	const rows: number[] = (new Array(42)).fill(undefined); // empty 42 long array
+	let rows: number[] = (new Array(42)).fill(undefined); // empty 42 long array
 	const startIndex: number = getWeekDay(new Date(year, monthIndex, 1)); // index offset based on weekday of first day in month
 
 	for (let i = 0; i < days; i++) {
 		rows[i + startIndex] = i + 1;
 	}
 
-	return rows[rows.length - 7] ? rows : rows.slice(0, -7);
+	rows = rows[rows.length - 7] ? rows : rows.slice(0, -7); // slice last week if it is empty
+	rows = rows[rows.length - 7] ? rows : rows.slice(0, -7); // slice last week if it is empty
+
+	return rows;
 }
 
 // first day of the week is monday where I live

src/inputFields/DatePicker/DatePickerInputSvelteHelpers.ts

@@ -2,18 +2,35 @@
 <!--adapted from @javalent's code: https://discord.com/channels/686053708261228577/840286264964022302/902949764209987654-->
 <script lang="ts">
 	import {setIcon} from 'obsidian';
+	import {onMount} from 'svelte';
 
-	export let iconName: String = '';
+	export let iconName: string = '';
+	export let iconSize: number = 20;
 
-	function icon(node: HTMLElement, icon: string) {
-		setIcon(node, icon);
-	}
+	let iconEl: HTMLElement;
+
+	onMount(() => {
+		setIcon(iconEl, iconName, iconSize);
+	});
 </script>
 
 <style>
+	.icon-wrapper {
+		display:  inline-block;
+		position: relative;
+		width:    20px;
+	}
 
+	.icon {
+		position: absolute;
+		height:   20px;
+		width:    20px;
+		bottom:   -5px;
+	}
 </style>
 
 {#if iconName.length > 0}
-	<span use:icon={iconName} style=""></span>
+	<div class="icon-wrapper">
+		<div bind:this={iconEl} class="icon"></div>
+	</div>
 {/if}