Ticket #3999 (closed enhancement: wontfix)

Opened 6 years ago

Last modified 15 months ago

Datepicker: Add clear button

Reported by: jain.ashish21 Owned by:
Priority: minor Milestone: 1.6
Component: ui.datepicker Version: 1.6rc5
Keywords: clear button Cc: jain.ashish21@…
Blocking: Blocked by:

Description

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.

Change History

comment:1 follow-ups: ↓ 3 ↓ 9 Changed 6 years ago by joern.zaefferer

  • Milestone changed from TBD to 1.next

Could you explain the usecase for this?

comment:2 Changed 6 years ago by 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'

comment:3 in reply to: ↑ 1 Changed 6 years ago by 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)

comment:4 Changed 5 years ago by 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.

comment:5 Changed 5 years ago by 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. :-)

comment:6 Changed 5 years ago by 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

comment:7 follow-up: ↓ 18 Changed 5 years ago by 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;

}

comment:8 Changed 4 years ago by 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.

comment:9 in reply to: ↑ 1 Changed 4 years ago by 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.

comment:10 Changed 4 years ago by scott.gonzalez

  • Type changed from bug to enhancement
  • Summary changed from Clear button and functionality removed to Datepicker: Add clear button

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

comment:11 Changed 4 years ago by 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.

comment:12 Changed 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to wontfix

See my comment above about making an extension.

comment:13 Changed 4 years ago by 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.

comment:14 Changed 4 years ago by 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

comment:15 follow-up: ↓ 16 Changed 3 years ago by 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

comment:16 in reply to: ↑ 15 ; follow-up: ↓ 17 Changed 3 years ago by scott.gonzalez

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).

comment:17 in reply to: ↑ 16 Changed 3 years ago by 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.

comment:18 in reply to: ↑ 7 ; follow-up: ↓ 19 Changed 3 years ago by timothy.morgan3@…

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
	};
});
Last edited 3 years ago by timothy.morgan3@… (previous) (diff)

comment:19 in reply to: ↑ 18 Changed 3 years ago by IMSoP

Replying to timothy.morgan3@…:

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.

comment:20 Changed 3 years ago by 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."

Last edited 3 years ago by kounterfeit (previous) (diff)

comment:21 Changed 3 years ago by 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.

Last edited 3 years ago by Tiggrstaar (previous) (diff)

comment:22 Changed 2 years ago by scott.gonzalez

  • Milestone changed from 1.next to 1.6

comment:23 Changed 2 years ago by 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.

comment:24 Changed 2 years ago by 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.

comment:25 follow-up: ↓ 26 Changed 23 months ago by hybris

  • double post, sorry
Last edited 23 months ago by hybris (previous) (diff)

comment:26 in reply to: ↑ 25 Changed 23 months ago by 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 an invalid field or not :)

The clear option should be part of the datepicker.

Last edited 23 months ago by hybris (previous) (diff)

comment:27 Changed 15 months ago by jayknight

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

Note: See TracTickets for help on using tickets.