How to clear DateTime field?

[dmitriytretyakov]

I try to delete value from input and then click out of the field, system add some default value to field, how can i clear field?

[ziming]

It's a known bug currently.

[deckchan]

@davidhemphill

Will you consider to make a "Clear" button to clear the field?

We sometimes define a field "valid_until" that allow user input empty value which is the meaning of "forever".

This bug is quite bothering.
Appreciate if you can handle this.

[zachgarcia1]

It seems if you set it to a date field you can clear it but date time won't let you.

[ziming]

Also is that it doesn't default to current date time value, only to current date value

[jbrooksuk]

I'm able to empty out a DateTime field, just by clearing its contents:

[ziming]

@jbrooksuk

After clearing the datetime field did you try to click on another field or elsewhere in the background?

Or did you just go to click Update Post right away?

Because I just tested it again after your comment and the value go back if i click on another field or the background. And I'm on the latest nova version.

[zachgarcia1]

yea it doesn't look like @jbrooksuk is on the latest version i'm currently using 2.12.0

[jbrooksuk]

After clearing the datetime field did you try to click on another field or elsewhere in the background?

Or did you just go to click Update Post right away?

Because I just tested it again after your comment and the value go back if i click on another field or the background. And I'm on the latest nova version.

I shall look at this now.

yea it doesn't look like @jbrooksuk is on the latest version i'm currently using 2.12.0

I only just released v2.12.0 😂

[zachgarcia1]

yep just sharing my version updated today @jbrooksuk

[zachgarcia1]

sorry for the slow erasing of fields just trying to show what i've been experiencing, and then like I said up top with the date field this will remove the value once its been set, it seems to only be an issue with the date time field

[dmitriytretyakov]

Yes, it's actual only for DateTime, my version is 2.12.0 and bug exists

[zachgarcia1]

@jbrooksuk where you able to reproduce this issue?

[michielkempen]

I'm currently on Laravel Nova v3.0.2 and I can confirm that this is a bug.

[michielkempen]

Hey @jbrooksuk @davidhemphill, I spent some time debugging this issue and came up with a solution.

There seem to be a few open issues on the flatpickr repository regarding this problem, but no clear solution. However, the problem can be easily overcome in Nova by applying the following changes to the resources/js/components/DateTimePicker.vue file.

<template>
  <input
    :disabled="disabled"
    :class="{ '!cursor-not-allowed': disabled }"
+   @keyup.delete="onClear"
    :value="value"
    ref="datePicker"
    type="text"
    :placeholder="placeholder"
  />
</template>

<script>
import flatpickr from 'flatpickr'
import 'flatpickr/dist/themes/airbnb.css'

export default {
  props: {
    ...
  },

  data: () => ({ flatpickr: null }),

  mounted() {
    this.$nextTick(() => {
      this.flatpickr = flatpickr(this.$refs.datePicker, {
        enableTime: this.enableTime,
        enableSeconds: this.enableSeconds,
        onClose: this.onChange,
        onChange: this.onChange,
        dateFormat: this.dateFormat,
        allowInput: true,
        // static: true,
        time_24hr: !this.twelveHourTime,
        locale: { firstDayOfWeek: this.firstDayOfWeek },
      })
    })
  },

  methods: {
    onChange(event) {
      this.$emit('change', this.$refs.datePicker.value)
    },
+   onClear(event) {
+     if(event.target.value === '') {
+       this.flatpickr.close();
+     }
+   }
  },

  beforeDestroy() {
    this.flatpickr.destroy()
  },
}
</script>

<style scoped>
.\!cursor-not-allowed {
  cursor: not-allowed !important;
}
</style>

The resulting workflow is as follows:

1. You can deselect/select a datetime as before.
2. Once you clear the input field using backspace or delete, the field is cleared and the datepicker is closed.

Any chance you could verify the solution and apply the fix?

Thanks in advance!

[jbrooksuk]

@michielkempen this didn't work for me using Super+Del.

[jbrooksuk]

However, it works if I select all and then delete, but that's only one way to delete it.

[dmitriytretyakov]

However, it works if I select all and then delete, but that's only one way to delete it.

It's doesn't works for me

[deckchan]

How about make a "Clear" button, no matter on calendar or under the field?
Delete the text on a calendar field is not the obvious way, IMO.

And this approach should have no more arguing on deleting the text is work or not.

[dmitriytretyakov]

What about fix?

[zachgarcia1]

still not working on v3.1.0

[ruslansteiger]

There is a workaround in the meantime #2344 (comment) @dmitriytretyakov @zachgarcia1

It is working for me 🙏

[davidraijmakers]

This is still occuring

[dmitriytretyakov]

Please fix this

[zachgarcia1]

still not working on v3.2.1

[jbrooksuk]

Locking as we know this is a bug and is not yet fixed.

[davidhemphill]

Fixed via laravel/nova#907