Skip to content

Commit

Permalink
feat: Enable Naive DateTime Fields
Browse files Browse the repository at this point in the history
Allow a DateTime to represent a naive_datetime that does not have a timezone and does not use browser timezones to configure the values (#36)
  • Loading branch information
staylorwr committed Nov 2, 2020
1 parent e6af641 commit 4b96d70
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 12 deletions.
6 changes: 3 additions & 3 deletions assets/src/assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ textarea, select, input, button, .checkbox { outline: none; z-index: 10}
}

.form-input {
@apply .bg-white .border .border-white .px-2 .text-gray-darker;
@apply .bg-white .border .border-white .px-2 .text-gray-darkest;
}

.form-control-focus {
Expand All @@ -210,15 +210,15 @@ textarea, select, input, button, .checkbox { outline: none; z-index: 10}
}

.form-input-bordered {
@apply .bg-white .border .border-gray-dark .px-2 .text-gray-darker;
@apply .bg-white .border .border-gray-dark .px-2 .text-gray-darkest;
}

.form-input.search {
@apply .pl-8;
}

.form-select {
@apply .bg-white .border .pl-3 .pr-8 .text-black .shadow;
@apply .bg-white .border .pl-3 .pr-8 .text-black .border-gray-dark;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
Expand Down
23 changes: 22 additions & 1 deletion assets/src/components/Form/DateTime.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
class="w-full form-control form-input form-input-bordered"
:date-format="pickerFormat"
:placeholder="placeholder"
:twelve-hour-time="twelveHourTime"
@change="handleChange"
/>
</template>
Expand Down Expand Up @@ -39,6 +40,10 @@ export default {
pickerFormat () {
return this.field.options.picker_format || 'Y-m-d H:i:S';
},
twelveHourTime () {
return !this.field.options.twenty_four_hour_time || true;
}
},
Expand All @@ -48,16 +53,32 @@ export default {
if (this.value !== '') {
this.localizedValue = this.fromUTC(this.value);
return;
}
if (this.naiveDateTime) {
this.localizedValue = this.value;
}
},
handleChange (value) {
if (this.naiveDateTime) {
const now = DateTime.local();
const dt = DateTime.fromISO(value).setZone(now.zoneName, {
keepLocalTime: true
});
this.value = `${dt.toFormat('yyyy-M-dd')}T${dt.toFormat('TT')}`;
this.localizedValue = dt.toLocaleString(DateTime.DATETIME_MED);
return;
}
this.value = value;
this.localizedValue = this.fromUTC(this.value);
},
fromUTC (value) {
return DateTime.fromISO(this.value).toLocaleString(DateTime.DATETIME_FULL);
return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_FULL);
}
}
};
Expand Down
11 changes: 7 additions & 4 deletions assets/src/mixins/InteractsWithDateTimes.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,16 @@ const formatKeys = {
const InteractsWithDateTimes = {
computed: {
format () {
if (!this.field.options.format) {
return DateTime.DATE_FULL;
}
return formatKeys[this.field.options.format] || formatKeys['datetime_short'];
const key = this.naiveDateTime ? 'datetime_med' : 'datetime_full';
return this.field.options.format ? formatKeys[this.field.options.format] : formatKeys[key];
},

naiveDateTime () {
return this.field.options.naive_datetime || false;
},

formattedDate () {

return DateTime.fromISO(this.field.value).toLocaleString(this.format);
}
}
Expand Down
18 changes: 14 additions & 4 deletions lib/ex_teal/fields/date_time.ex
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ defmodule ExTeal.Fields.DateTime do

def component, do: "date-time"

def filterable_as, do: ExTeal.FieldFilter.DateTime

@doc """
Set the format of the flatpickr datetime picker.
Expand Down Expand Up @@ -44,7 +42,7 @@ defmodule ExTeal.Fields.DateTime do
en_US -> Oct 14, 1983
fr -> 14 oct. 1983
:full
:full
en_US -> October 14, 1983
fr -> 14 octobre 1983
Expand All @@ -56,13 +54,25 @@ defmodule ExTeal.Fields.DateTime do
%{field | options: Map.put_new(options, :format, value)}
end

@doc """
Specify that the field is a naive datetime. Using this function, the field
will render and set the value without converting from the users local time
to UTC.
"""
def naive_datetime(%Field{options: options} = field),
do: %{field | options: Map.put_new(options, :naive_datetime, true)}

@impl true
def filterable_as, do: ExTeal.FieldFilter.DateTime

@impl true
def value_for(%Field{} = field, model, _view) do
case Map.get(model, field.field) do
nil ->
nil

%NaiveDateTime{} = naive ->
DateTime.from_naive!(naive, "Etc/UTC", Tzdata.TimeZoneDatabase)
naive

val ->
val
Expand Down

0 comments on commit 4b96d70

Please sign in to comment.