Date picker alignRight argument

Author: mProjectsCode

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

@@ -121,7 +121,7 @@ option(option d)
 ):other note#multi-select]
 ```
 
-Lorem ipsum dolor sit amet, `INPUT[date():other note#date]` consectetur adipiscing elit. Pellentesque sit amet porttitor arcu. Quisque scelerisque dolor augue, et posuere nulla bibendum nec. `INPUT[date():other note#date]` Curabitur sed rhoncus nisl. Maecenas nisi justo, viverra vel tempus vel, hendrerit at metus. `INPUT[date_picker:other note#date]`  asdasd asdasdasd
+Lorem ipsum dolor sit amet, `INPUT[date():other note#date]` consectetur adipiscing elit. Pellentesque sit amet porttitor arcu. Quisque scelerisque dolor augue, et posuere nulla bibendum nec. `INPUT[date():other note#date]` Curabitur sed rhoncus nisl. Maecenas nisi justo, viverra vel tempus vel, hendrerit at metus. `INPUT[date_picker():other note#date]`  asdasd asdasdasd
 
 asdasd
 

exampleVault/examples.md

@@ -1,9 +1,9 @@
 ---
-title: asdasds sdf sasdfnosdijn  sdaskdjasbokbfosdasdasdasd asd asdasda f
-select: option b
+title: asdasds sdf sasdfnosdijn  sdaskdjasbokbfosdasdasdasd asd asd
+select: option a
 multi-select:
-  - option b
+  - option a
   - option c
-date: Monday, June 4th 2029
+date: Wednesday, June 6th 2029
 time: 19:20
 ---

exampleVault/other note.md

@@ -0,0 +1,16 @@
+import {AbstractInputFieldArgument} from './AbstractInputFieldArgument';
+import {InputFieldArgumentType, InputFieldType} from '../parsers/InputFieldDeclarationParser';
+
+export class AlignRightInputFieldArgument extends AbstractInputFieldArgument {
+	identifier: InputFieldArgumentType = InputFieldArgumentType.ALIGN_RIGHT;
+	allowedInputFields: InputFieldType[] = [
+		InputFieldType.DATE_PICKER,
+	];
+	value: boolean = true;
+	requiresValue: boolean = false;
+	allowMultiple: boolean = false;
+
+	parseValue(valueStr: string): void {
+		this.value = (valueStr.toLowerCase() === 'true');
+	}
+}

src/inputFieldArguments/AlignRightInputFieldArgument.ts

@@ -6,6 +6,7 @@ import {MinValueInputFieldArgument} from "./MinValueInputFieldArgument";
 import {MaxValueInputFieldArgument} from "./MaxValueInputFieldArgument";
 import {OptionInputFieldArgument} from "./OptionInputFieldArgument";
 import {TitleInputFieldArgument} from "./TitleInputFieldArgument";
+import {AlignRightInputFieldArgument} from './AlignRightInputFieldArgument';
 
 
 export class InputFieldArgumentFactory {
@@ -22,6 +23,8 @@ export class InputFieldArgumentFactory {
 			return new OptionInputFieldArgument();
 		} else if (argumentIdentifier === InputFieldArgumentType.TITLE) {
 			return new TitleInputFieldArgument();
+		} else if (argumentIdentifier === InputFieldArgumentType.ALIGN_RIGHT) {
+			return new AlignRightInputFieldArgument();
 		} else {
 			throw new MetaBindParsingError(`unknown argument \'${argumentIdentifier}\'`);
 		}

src/inputFieldArguments/InputFieldArgumentFactory.ts

@@ -12,6 +12,8 @@
 	export let dateFormat: string = 'dddd, MMMM Do YYYY';
 	export let dateChangeCallback: (date: Moment) => void;
 
+	export let alignRight: boolean;
+
 	let date: number;
 	let month: number;
 	let year: number;
@@ -68,7 +70,6 @@
 	.date-picker {
 		position:      absolute;
 		top:           35px;
-		left:          0;
 		display:       inline-block;
 		background:    var(--background-secondary);
 		border-radius: var(--meta-bind-plugin-border-radius);
@@ -134,7 +135,7 @@
 	</div>
 	{#if showDatePicker}
 		<div class="date-picker-close-layer" on:click={() => showDatePicker = false}></div>
-		<div class="date-picker">
+		<div class="date-picker" style="{alignRight ? 'left: auto; right: 0;' : 'right: auto; left: 0;'}">
 			<div class="date-picker-header">
 				<button class="month-switch-button" on:click={prevMonth}>Prev</button>
 				<div class="date-picker-header-text">

src/inputFields/DatePicker/DatePicker.svelte

@@ -1,9 +1,10 @@
 import {InputFieldMarkdownRenderChild} from '../../InputFieldMarkdownRenderChild';
 import {AbstractInputField} from '../AbstractInputField';
-import {MetaBindInternalError} from '../../utils/Utils';
+import {isTruthy, MetaBindInternalError} from '../../utils/Utils';
 import DatePicker from './DatePicker.svelte';
 import {moment} from 'obsidian';
 import {DateParser} from '../../parsers/DateParser';
+import {InputFieldArgumentType} from '../../parsers/InputFieldDeclarationParser';
 
 export class DatePickerInputField extends AbstractInputField {
 	container: HTMLDivElement | undefined;
@@ -68,6 +69,7 @@ export class DatePickerInputField extends AbstractInputField {
 		this.component = new DatePicker({
 			target: container,
 			props: {
+				alignRight: this.inputFieldMarkdownRenderChild.getArgument(InputFieldArgumentType.ALIGN_RIGHT)?.value,
 				selectedDate: this.date,
 				dateFormat: this.inputFieldMarkdownRenderChild.plugin.settings.preferredDateFormat,
 				dateChangeCallback: (date: moment.Moment) => this.datePickerValueChanged(date),

src/inputFields/DatePicker/DatePickerInputField.ts

@@ -38,7 +38,8 @@ export default class MetaBindPlugin extends Plugin {
 					context.addChild(new InputFieldMarkdownRenderChild(
 						codeBlock,
 						InputFieldMarkdownRenderChildType.INLINE_CODE_BLOCK,
-						text, this,
+						text,
+						this,
 						context.sourcePath,
 						this.markDownInputFieldIndex,
 					));

src/main.ts

@@ -24,6 +24,7 @@ export enum InputFieldArgumentType {
 	MAX_VALUE = 'maxValue',
 	OPTION = 'option',
 	TITLE = 'title',
+	ALIGN_RIGHT = 'alignRight',
 
 	INVALID = 'invalid',
 }
@@ -106,9 +107,9 @@ export class InputFieldDeclarationParser {
 
 
 		if (useTemplate) {
-			console.log(templateName);
+			// console.log(templateName);
 			const template = InputFieldDeclarationParser.templates.filter(x => x.identifier === templateName).first()?.template;
-			console.log(template);
+			// console.log(template);
 			if (template) {
 				inputFieldDeclaration.bindTarget = inputFieldDeclaration.bindTarget || template.bindTarget;
 				inputFieldDeclaration.isBound = inputFieldDeclaration.isBound || template.isBound;