custom flatpickr styling, tidy up

This commit is contained in:
Martin McKeaveney 2020-09-09 13:44:36 +01:00
parent fc923cb883
commit e6840bcffc
6 changed files with 26 additions and 17 deletions

View File

@ -73,7 +73,6 @@
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"fast-sort": "^2.2.0", "fast-sort": "^2.2.0",
"feather-icons": "^4.21.0", "feather-icons": "^4.21.0",
"flatpickr": "^4.6.6",
"lodash": "^4.17.13", "lodash": "^4.17.13",
"mustache": "^4.0.1", "mustache": "^4.0.1",
"posthog-js": "1.3.1", "posthog-js": "1.3.1",

View File

@ -11,7 +11,6 @@ import copy from "rollup-plugin-copy"
import css from "rollup-plugin-css-only" import css from "rollup-plugin-css-only"
import replace from "rollup-plugin-replace" import replace from "rollup-plugin-replace"
import json from "@rollup/plugin-json" import json from "@rollup/plugin-json"
import fs from "fs"
import path from "path" import path from "path"

View File

@ -1,21 +1,39 @@
<script> <script>
import Flatpickr from "svelte-flatpickr" import Flatpickr from "svelte-flatpickr"
import { Label, Input } from "@budibase/bbui" import { Label, Input } from "@budibase/bbui"
import 'flatpickr/dist/flatpickr.css' import "flatpickr/dist/flatpickr.css"
const PICKER_OPTIONS = {
enableTime: true
}
export let label export let label
export let value export let value
const PICKER_OPTIONS = {
enableTime: true,
// element: "#date-picker"
}
</script> </script>
<div class="bb-margin-m"> <div class="bb-margin-m">
<Label small forAttr={'datepicker-label'}>{label}</Label> <Label small forAttr={'datepicker-label'}>{label}</Label>
<Flatpickr <Flatpickr
options={PICKER_OPTIONS}
placeholder={label} placeholder={label}
options={PICKER_OPTIONS}
bind:value bind:value
/> />
</div> </div>
<style>
:global(.flatpickr-input) {
width: 100%;
min-width: 0;
box-sizing: border-box;
color: var(--ink);
border-radius: 5px;
border: none;
background-color: var(--grey-2);
padding: var(--spacing-m);
font-size: var(--font-size-xs);
margin: 0;
outline-color: var(--blue);
}
</style>

View File

@ -8,8 +8,6 @@
<title>Budibase Builder</title> <title>Budibase Builder</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> -->
<link rel='icon' type='image/png' href='/_builder/favicon.png'> <link rel='icon' type='image/png' href='/_builder/favicon.png'>
<link rel='stylesheet' href='/_builder/bundle.css'> <link rel='stylesheet' href='/_builder/bundle.css'>

View File

@ -2957,7 +2957,7 @@ find-up@^3.0.0:
dependencies: dependencies:
locate-path "^3.0.0" locate-path "^3.0.0"
flatpickr@^4.5.2, flatpickr@^4.6.6: flatpickr@^4.5.2:
version "4.6.6" version "4.6.6"
resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.6.tgz#34d2ad80adfa34254e62583a34264d472f1038d6" resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.6.tgz#34d2ad80adfa34254e62583a34264d472f1038d6"
integrity sha512-EZ48CJMttMg3maMhJoX+GvTuuEhX/RbA1YeuI19attP3pwBdbYy6+yqAEVm0o0hSBFYBiLbVxscLW6gJXq6H3A== integrity sha512-EZ48CJMttMg3maMhJoX+GvTuuEhX/RbA1YeuI19attP3pwBdbYy6+yqAEVm0o0hSBFYBiLbVxscLW6gJXq6H3A==

View File

@ -3,17 +3,12 @@ const validateJs = require("validate.js")
const newid = require("../../db/newid") const newid = require("../../db/newid")
validateJs.extend(validateJs.validators.datetime, { validateJs.extend(validateJs.validators.datetime, {
// The value is guaranteed not to be null or undefined but otherwise it
// could be anything.
parse: function(value, options) { parse: function(value, options) {
// return +moment.utc(value);
return new Date(value).getTime() return new Date(value).getTime()
}, },
// Input is a unix timestamp // Input is a unix timestamp
format: function(value, options) { format: function(value, options) {
return new Date(value).toISOString() return new Date(value).toISOString()
// var format = options.dateOnly ? "YYYY-MM-DD" : "YYYY-MM-DD hh:mm:ss";
// return moment.utc(value).format(format);
} }
}); });