Possibility to empty the value? Add button or small inline (x) icon.

[schroedermatthias]

Versions

• vue: 2.5.7
• vue-datetime: 1.0.0-beta.8
• luxon: 1.6.2

Description:

Is there a built-in way to empty the date input once a value has been chosen?

Steps To Reproduce:

• Input field is empty.
• Click on input field, select date.
• Date has to be removed again

Suggestion

Add a small inline (x) that clears the value on click.

[Skrolz]

I came here hoping there was a solution to this. I just incorporated this into a large project only to find out I couldn't clear stuff out. Hoping this gets resolved soon, or else I will be creating my own "x" button to do the job unfortunately.

[Tlopasha]

I have the same Problem, I have a solution but it's not the optimal its just a hack,

<div class="btn-group">
	<datetime
			id="tempDate"
			type="date"
			v-model="tempDate"
			input-class="form-control"
			format="dd-MM-yyyy"
			:phrases="{ok: 'ok', cancel: 'cancel'}"
			use24-hour>
	</datetime>
	<span v-if="tempDate" class="glyphicon glyphicon-remove-circle dateClear" @click="ClearDate"></span>
</div>

<script>

    export default {
        name: "test",
        data(){
            return{
              tempDate:null
            }
        },
 methods:{

            ClearDate(){

                this.tempDate= ''

            }
}
    }
</script>

css

.dateClear {
        position: absolute;
        right: 5px;
        top: 0;
        bottom: 0;
        height: 14px;
        margin: auto;
        font-size: 14px;
        cursor: pointer;
        color: #c1c1c1;
    }

[Janqis]

Just put remove icon in 'after' slot

(syntax in pug)

datetime(v-model="value")
        template(slot="after")
            span(v-if="value" v-on:click="value=null")
                font-awesome-icon(icon="trash")