Skip to content

Commit f9b4afc

Browse files
mProjectsCodemProjectsCode
committed
Date picker part 2 #14 
1 parent f9837af commit f9b4afc

File tree

13 files changed

+364
-288
lines changed

13 files changed

+364
-288
lines changed

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

Lines changed: 116 additions & 76 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎exampleVault/examples.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,9 @@ option(option d)
119119
):other note#multi-select]
120120
```
121121

122-
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]`
122+
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
123+
124+
asdasd
123125

124126
## Error Messages
125127
- `INPUT[text():meta bind/nonExistantFile#title]`

‎exampleVault/other note.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ select: option b
44
multi-select:
55
- option b
66
- option c
7-
date: Wednesday, March 9th 2022
7+
date: Tuesday, September 6th 2022
88
time: 19:20
99
---

‎src/inputFields/DateInputField.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import {AbstractInputField} from './AbstractInputField';
2-
import {DropdownComponent, TextComponent} from 'obsidian';
2+
import {DropdownComponent, moment, TextComponent} from 'obsidian';
33
import {InputFieldMarkdownRenderChild} from '../InputFieldMarkdownRenderChild';
44
import {DateParser} from '../parsers/DateParser';
55
import {MetaBindInternalError} from '../utils/Utils';
6-
import {moment} from 'obsidian';
76

87
export class DateInputField extends AbstractInputField {
98
container: HTMLDivElement | undefined;
@@ -65,6 +64,12 @@ export class DateInputField extends AbstractInputField {
6564
}
6665

6766
this.date = DateParser.parse(value) ?? DateParser.getDefaultDate();
67+
68+
if (!this.date.isValid()) {
69+
this.date = DateParser.getDefaultDate();
70+
this.onValueChange(this.getValue());
71+
}
72+
6873
// console.log(this.date);
6974
this.monthComponent.setValue(this.date.month().toString());
7075
this.dayComponent.setValue(this.date.date().toString());
@@ -81,6 +86,11 @@ export class DateInputField extends AbstractInputField {
8186

8287
public render(container: HTMLDivElement): void {
8388
this.date = DateParser.parse(this.inputFieldMarkdownRenderChild.getInitialValue()) ?? DateParser.getDefaultDate();
89+
if (!this.date.isValid()) {
90+
this.date = DateParser.getDefaultDate();
91+
this.onValueChange(this.getValue());
92+
}
93+
8494
let useUsInputOrder = this.inputFieldMarkdownRenderChild.plugin.settings.useUsDateInputOrder;
8595

8696
container.removeClass('meta-bind-plugin-input-wrapper');

‎src/inputFields/DatePicker/Calender.svelte‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,98 @@
11
<script lang="ts">
2-
import {getDateRows, getWeekDays, uuid} from './DatePickerInputSvelteHelpers.js';
3-
import { createEventDispatcher } from "svelte";
4-
import {moment} from 'obsidian';
2+
import {getDateRows, getWeekDays, uuid} from './DatePickerInputSvelteHelpers.js';
3+
import {createEventDispatcher} from 'svelte';
4+
import {moment} from 'obsidian';
55
6-
const dispatch = createEventDispatcher();
6+
const dispatch = createEventDispatcher();
77
8-
// props
9-
export let selectedDate: moment.Moment;
10-
export let month: number;
11-
export let year: number;
8+
// props
9+
export let selectedDate: moment.Moment;
10+
export let month: number;
11+
export let year: number;
1212
13-
// local vars to help in render
14-
let cells;
13+
// local vars to help in render
14+
let cells;
1515
16-
// function helpers
17-
function onChange(date: number) {
18-
dispatch("dateChange", moment(new Date(year, month, date)));
19-
}
16+
// function helpers
17+
function onChange(date: number) {
18+
dispatch('dateChange', moment(new Date(year, month, date)));
19+
}
2020
21-
$: cells = getDateRows(month, year);
21+
$: cells = getDateRows(month, year);
2222
</script>
2323

2424
<style>
25-
.calendar {
26-
margin-top: 10px;
27-
}
28-
29-
.calendar-header {
30-
display: flex;
31-
flex-wrap: wrap;
32-
gap: 2px;
33-
background: var(--background-primary);
25+
.calendar {
26+
margin-top: 10px;
27+
}
28+
29+
.calendar-header {
30+
display: flex;
31+
flex-wrap: wrap;
32+
gap: 2px;
33+
background: var(--background-primary);
3434
border-radius: var(--meta-bind-plugin-border-radius);
3535
margin-bottom: 2px;
36-
}
36+
}
3737
3838
.calendar-content {
39-
display: grid;
40-
flex-wrap: wrap;
39+
display: grid;
40+
flex-wrap: wrap;
4141
grid-template-columns: repeat(7, 1fr);
42-
gap: 2px;
42+
gap: 2px;
4343
}
4444
45-
.cell {
46-
width: 40px;
47-
height: 30px;
48-
padding: 5px;
49-
display: flex;
45+
.cell {
46+
width: 40px;
47+
height: 30px;
48+
padding: 5px;
49+
display: flex;
5050
justify-content: center;
51-
align-items: center;
52-
border-radius: var(--meta-bind-plugin-border-radius);
53-
}
51+
align-items: center;
52+
border-radius: var(--meta-bind-plugin-border-radius);
53+
}
5454
5555
.content-cell {
5656
cursor: pointer;
5757
}
5858
5959
.cell-text {
60-
margin: auto;
60+
margin: auto;
6161
text-align: center;
6262
}
6363
64-
.selected {
65-
background: var(--background-modifier-success);
66-
}
64+
.selected {
65+
background: var(--background-modifier-success);
66+
}
6767
68-
.highlight:hover {
69-
background: var(--interactive-hover);
70-
}
68+
.highlight:hover {
69+
background: var(--interactive-hover);
70+
}
7171
72-
.selected.highlight:hover {
73-
background: green;
74-
}
72+
.selected.highlight:hover {
73+
background: green;
74+
}
7575
</style>
7676

7777
<div class="calendar">
78-
<div class="calendar-header">
79-
{#each getWeekDays() as day}
80-
<div class="cell header-cell">
78+
<div class="calendar-header">
79+
{#each getWeekDays() as day}
80+
<div class="cell header-cell">
8181
<span class="cell-text">{day}</span>
8282
</div>
83-
{/each}
84-
</div>
85-
86-
<div class="calendar-content">
87-
{#each cells as value (uuid())}
88-
<div
89-
class="cell"
90-
on:click={value ? () => onChange(value) : () => {}}
91-
class:highlight={value}
92-
class:content-cell={value}
93-
class:selected={selectedDate.year() === year && selectedDate.month() === month && selectedDate.date() === value}>
94-
<span class="cell-text">{value || ''}</span>
95-
</div>
96-
{/each}
97-
</div>
83+
{/each}
84+
</div>
85+
86+
<div class="calendar-content">
87+
{#each cells as value (uuid())}
88+
<div
89+
class="cell"
90+
on:click={value ? () => onChange(value) : () => {}}
91+
class:highlight={value}
92+
class:content-cell={value}
93+
class:selected={selectedDate.year() === year && selectedDate.month() === month && selectedDate.date() === value}>
94+
<span class="cell-text">{value || ''}</span>
95+
</div>
96+
{/each}
97+
</div>
9898
</div>

0 commit comments

Comments
 (0)