Datepicker: Add clear button

[jain.ashish21]

The clear button and functionality were removed from UI 1.6 rc1+ onwards. But this makes it impossible to clear the existing date, if any, when the control is readonly.

[Jörn Zaefferer]

Could you explain the usecase for this?

[NVRAM]

IIUC, when using: showOn:'both' there is no way for a user to erase the value and specify no date with a blank entry.

But there might be a method I missed, in my case (1.6rc6) I switched to showOn:'button'

[m2x]

Replying to joern.zaefferer:

Could you explain the usecase for this?

example usecase is clearing a date when input field is readonly (the reason for doing it readonly as here: ​http://dev.jqueryui.com/ticket/4079#comment:3)

[boteeka]

Clear functionality is definitely needed. I spent half a day Googling and trying to find some workaround to clear the selected dates. Without this functionality there is no way I can reset the form, and I think this is a serious shortcoming.

Please add this functionality, as it seems a lot of people need it.

[zirconx]

I would really like to see this feature added, too. I might have to switch to a different calendar that supports this.

I've seen some discussion that this feature isn't needed because the user can just clear the field - NOT TRUE. On most of the sites I've worked on that use a date picker the field is READ ONLY. Often times the server expects the date in a certain format so the user isn't allowed to just type in whatever they want - instead they are forced to use the date picker. So we need a clear option please. :-)

[maderic_m]

I think it is necessary to implement this option, given that the field is read only once you enter a date can not be erased, thanks

[boomyjee]

here is my solution, you can use done button as clear with the following hack

$(".datepicker").datepicker({

showButtonPanel: true, closeText: 'Clear',

});

$.datepicker._generateHTML_Old = $.datepicker._generateHTML; $.datepicker._generateHTML = function(inst) {

res = this._generateHTML_Old(inst); res = res.replace("_hideDatepicker()","_clearDate('#"+inst.id+"')"); return res;

}

[keir]

I created a fork of jquery which supports the clear option. You have to enable the button bar and also add { showClearButton : true } to the options.

​http://github.com/keir/jquery-ui/commit/25e55ff73df768360a2260534a4afa6e03f04fb

I sent a pull request to the jquery-ui maintainers; hopefully they will reconsider the removal of this feature and merge my pull request.

[jbcoder2]

Replying to joern.zaefferer:

Could you explain the usecase for this?

Using 2 DatePicker that are tied together to define a date range. Clearing the text from either text input does not clear the date in the underlying DatePicker object or the restrictions that are imposed by the previously selected date.

[Scott González]

Proof of concept for adding a clear button without modifying the existing datepicker: ​http://jsbin.com/ofare/edit

[pfurbacher]

Use case: the input field is read-only. We had to do this because validating users' typed date input became a headache in legacy code. Using the calendar, triggered by clicking on either the input or an icon button, solved the issue in a matter of minutes. However, users want the ability to clear the date field via the pop-up. The alternative is to add a "clear" button next to the calendar's icon button.

[Scott González]

See my comment above about making an extension.

[Ildefonse]

@ scott.gonzalez

Your proof of concept at ​http://jsbin.com/ofare/edit has a major shortcoming. The clear button disappears when you navigate to different months. Why is it not possible to add the clear button back to the datepicker, so that we can enable it with a setting like showClear?

A quick google search shows that there are many people out there that want this. And there are plenty of cases where this could be useful.

[SOCAR]

Hi! I have modified scott.gonzalez version a little bit. Sacrificing the "done" button, I might say that this works for me: ​http://jsbin.com/unude4/5/edit and does not loose the clean filter functionality after changing month etc.

best regards

[IMSoP]

Hi, sorry to add a "me too" comment here, but I'm not clear on the rationale for closing this wontfix; lack of use cases was mentioned, but plenty have been provided here and elsewhere (e.g comments on ​http://blog.unthunk.com/2009/02/09/put-the-clear-button-back-in-datepicker/)

The suggestion of adding as an extension using the "beforeShow" event is not a valid workaround, as Ildefonse points out, because this event is not called when the calendar is redrawn. There would appear to be no way of adding this feature without patching the code unless an extra event or option is added.

This seems to be a widely requested feature, for which two patches have been submitted (​https://github.com/softlab/jquery-ui/commit/4b1f53484df317ec889bf16013a667b6a09248ac and ​https://github.com/keir/jquery-ui/commit/25e55ff73df768360a2260534a4afa6e03f04fb). Are these patches not acceptable, or just stale?

Sorry to be a whinging user, but a clearer explanation of the situation would be very welcome.

Thanks for all your hard work, Rowan

[Scott González]

Replying to IMSoP:

Hi, sorry to add a "me too" comment here, but I'm not clear on the rationale for closing this wontfix; lack of use cases was mentioned, but plenty have been provided here and elsewhere (e.g comments on ​http://blog.unthunk.com/2009/02/09/put-the-clear-button-back-in-datepicker/)

Actually, in that post Lucas even questions the validity of his own use case. Then later in the comments there's a clear explanation from Scott Jehl about how the use case is essentially an abuse of HTML. Not to mention the use case was pretty much "my boss uses the web wrong" (and you can turn off autocomplete).

[IMSoP]

Replying to scott.gonzalez:

Actually, in that post Lucas even questions the validity of his own use case. Then later in the comments there's a clear explanation from Scott Jehl about how the use case is essentially an abuse of HTML. Not to mention the use case was pretty much "my boss uses the web wrong" (and you can turn off autocomplete).

I specifically referred to the comments on that blog post, in which several people put forward different use cases. Most compelling to me is that if you use the altField option, the argument that you can clear the text-field with the keyboard does not apply; if altField is supported, there should be a method of clearing that field. Other related scenarios are when the calendar widget is compulsory - i.e. the input field is a read-only display, so that the user cannot enter invalid values.

[[email protected]…]

Replying to boomyjee:

here is my solution, you can use done button as clear with the following hack

$(".datepicker").datepicker({

showButtonPanel: true, closeText: 'Clear',

});

$.datepicker._generateHTML_Old = $.datepicker._generateHTML; $.datepicker._generateHTML = function(inst) {

res = this._generateHTML_Old(inst); res = res.replace("_hideDatepicker()","_clearDate('#"+inst.id+"')"); return res;

}

Here's a slightly less intrusive version of this hack, which actually adds a seperate clear button. Although it's not configurable in the options, you could of course extend a new datepicker and add the override to that instead, if needs be. Note that I too am suffering from the read-only use case.

(works with jquery-ui-1.8.15)

$(function(){
	//wrap up the redraw function with our new shiz
	var dpFunc = $.datepicker._generateHTML; //record the original
	$.datepicker._generateHTML = function(inst){
		var thishtml = $( dpFunc.call($.datepicker, inst) ); //call the original
		
		thishtml = $('<div />').append(thishtml); //add a wrapper div for jQuery context
		
		//locate the button panel and add our button - with a custom css class.
		$('.ui-datepicker-buttonpane', thishtml).append(
			$('<button class="\
				ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all\
				"\>Clear</button>'
			).click(function(){
				inst.input.attr('value', '');
				inst.input.datepicker('hide');
			})
		);
		
		thishtml = thishtml.children(); //remove the wrapper div
		
		return thishtml; //assume okay to return a jQuery
	};
});

[IMSoP]

Replying to [email protected]…:

Here's a slightly less intrusive version of this hack, which actually adds a seperate clear button...

I haven't had a chance to test it yet, but that looks like a reasonable approach for a workaround if the maintainers won't accept a patch. I think it would be better to use _clearDate('#"+inst.id+"') rather than inst.input.attr('value', ''); if possible, as this will fire additional triggers, such as clearing the altField.

[kounterfeit]

So....How about this use case, where would you backspace?? Oh ... no-where?? Really?!??!

I really dont understand why this was removed and hasn't been brought back even when there have been several requests over the last few years to bring it back with many acceptable use cases.

Is the jQuery UI team suggesting I change my whole UI?

(( SCREENSHOT REMOVED, TOP SECRET ))

How's the above screen shot for a practical use case?

I can't see why if it was an option, people who didn't want it could just disable it? Instead of removing ALL functionality in one hit and saying "Oh, you had a practical use case? We don't care."

[Tiggrstaar]

One quick way you can add the clear feature even on read only fields is to add the following code to your existing datepicker control:

	}).keyup(function(e) {
		if(e.keyCode == 8 || e.keyCode == 46) {
			$.datepicker._clearDate(this);
		}
	});

This will enable people to highlight(which they can even on RO fields) and then use the backspace or delete to remove the date using the internal _clearDate function.

[kwutzke]

OMG, why isn't this functionality available? It IS necessary for calendars with associated inputs that cannot be typed to. Don't ask me, but sometimes such requirements exist, so jQuery should (MUST!) support this.

You make everybody using jQuery (and PrimeFaces etc.) fiddle with workarounds. Very undesirable. Please reopen.

[martin.meridius]

Seriously, this is a hugely missed feature!
Please reconsider opening this enahancement as this way the only chance for us is to use hack by Tiggrstaar from comment 21 (thank you), and the user has to remember to press backspace/delete instead of just clicking the button.

[hybris]

• double post, sorry

[hybris]

"seems like overkill since a user can simply clear out the field value manually. Plus, clearing the input would make the input invalid if the field is required. It’s best to encourage users to pick a date, not clear the field."

that is the reasonable thought behind the removing. Not all fields are required. Asuming an empty field might be invalid is wrong!

"a user can simply clear out the field value manually"

It is not a good usable choice, while a user clears out the input, the calendar can be an obstruction, the input sometimes might be covered by the calendar.

Most of us use the calendar to avoid wrong format type and it is very important don't let the user think about the right date format we want (and let the user free to write it). "It’s best to encourage users to pick a date, not clear the field." (?!) The best is to encourage users to not use manually the date input field at all. So, since they can choose a date by touch or by click, they shoud be able to clear the date by touch or by click

It is better to let us choose what is invalid field or not :)

The clear option should be part of the datepicker.

[jayknight]

This simple plugin can add a clear button to any field (not just dates): ​https://github.com/jk3us/jquery-clearable.