CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-10 06:26:02 +12:00
Code Issues Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
Gerard Burns 2024-04-22 07:10:00 +01:00
parent 498a562b07
commit d9e7202e3b
3 changed files with 123 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
View file

@ -24,26 +24,32 @@
<Subject heading="Dates as Numbers">
<Section>
A date can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
A datetime value can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
</Section>
<ExampleSection
heading="Examples:"
>
<ExampleLine>
1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
<Block>
{(new Date(946684800000).toLocaleString())}
</Block>
<span class="separator">{"->"} </span><Block>946684800000</Block>
</ExampleLine>
<ExampleLine>
1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
<Block>
{(new Date(1577836800000).toLocaleString())}
</Block>
<span class="separator">{"->"} </span><Block>1577836800000</Block>
</ExampleLine>
<ExampleLine>
Now<span class="separator">:</span> <Block>{timestamp}</Block>
<Block>Now</Block><span class="separator">{"->"} </span><Block>{timestamp}</Block>
</ExampleLine>
</ExampleSection>
</Subject>
<style>
.separator {
margin-right: 5px;
margin: 0 5px;
}
</style>

57
packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
View file

@ -1,9 +1,60 @@
<script>
import { onMount } from "svelte"
import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
let timestamp = Date.now();
onMount(() => {
let run = true;
const updateTimeStamp = () => {
timestamp = Date.now();
console.log(timestamp);
if (run) {
setTimeout(updateTimeStamp, 200)
}
}
updateTimeStamp();
return () => {
run = false;
}
})
</script>
<div>
</div>
<Subject heading="Numbers as Dates">
<Section>
A number value can be used in place of a datetime value, but it will be parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
</Section>
<ExampleSection
heading="Examples:"
>
<ExampleLine>
<Block>946684800000</Block>
<span class="separator">{"->"}</span>
<Block>
{(new Date(946684800000).toLocaleString())}
</Block>
</ExampleLine>
<ExampleLine>
<Block>1577836800000</Block>
<span class="separator">{"->"}</span>
<Block>
{(new Date(1577836800000).toLocaleString())}
</Block>
</ExampleLine>
<ExampleLine>
<Block>{timestamp}</Block>
<span class="separator">{"->"}</span>
<Block>Now</Block>
</ExampleLine>
</ExampleSection>
</Subject>
<style>
.separator {
margin: 0 5px;
}
</style>

65
packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/StringsAsDates.svelte
View file

@ -3,13 +3,13 @@
import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
let timestamp = Date.now();
$: iso = (new Date(timestamp)).toISOString();
onMount(() => {
let run = true;
const updateTimeStamp = () => {
timestamp = Date.now();
console.log(timestamp);
if (run) {
setTimeout(updateTimeStamp, 200)
}
@ -23,28 +23,79 @@
})
</script>
<Subject heading="Dates as Numbers">
<Subject heading="Strings as Dates">
<Section>
A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
A string value can be used in place of a datetime value, but it will be parsed as:
</Section>
<Section>
A <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
</Section>
<ExampleSection
heading="Examples:"
>
<ExampleLine>
1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
<Block>946684800000</Block>
<span class="separator">{"->"}</span>
<Block>
{(new Date(946684800000).toLocaleString())}
</Block>
</ExampleLine>
<ExampleLine>
1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
<Block>1577836800000</Block>
<span class="separator">{"->"}</span>
<Block>
{(new Date(1577836800000).toLocaleString())}
</Block>
</ExampleLine>
<ExampleLine>
Now<span class="separator">:</span> <Block>{timestamp}</Block>
<Block>{timestamp}</Block>
<span class="separator">{"->"}</span>
<Block>Now</Block>
</ExampleLine>
</ExampleSection>
<Section>
An <Block>ISO 8601</Block> datetime string. which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
</Section>
<div class="isoExamples">
<ExampleSection
heading="Examples:"
>
<ExampleLine>
<Block>2000-01-01T00:00:00.000Z</Block>
<span class="separator">{"->"}</span>
<Block>
{(new Date(946684800000).toLocaleString())}
</Block>
</ExampleLine>
<ExampleLine>
<Block>2000-01-01T00:00:00.000Z</Block>
<span class="separator">{"->"}</span>
<Block>
{(new Date(1577836800000).toLocaleString())}
</Block>
</ExampleLine>
<ExampleLine>
<Block>{iso}</Block>
<span class="separator">{"->"}</span>
<Block>Now</Block>
</ExampleLine>
</ExampleSection>
</div>
</Subject>
<style>
.separator {
margin-right: 5px;
flex-shrink: 0;
margin: 0 5px;
}
.isoExamples :global(.block) {
word-break: break-all;
}
.isoExamples :global(.exampleLine) {
align-items: center;
}
</style>