Clear Button

[benbjohnson]

Clear Button

[amsul]

Thanks! Yes, it's something in the works within the next couple builds

[vjpr]

+1

[timknight]

+1

Something like the rounded "x" on the far right side of the input (similar to OSX search fields) might make a nice default.

[amsul]

@timknight Ooh! Finding the right place to position it in was the issue I was having. I think this is the way to go :)

[timknight]

@amsul I was playing with the concept and found that using the times (×) character and then just styling the link with 100% border radius with some little padding tweaks can pull it off for the most part. I hope it helps. Really looking forward to this added feature.

[amsul]

Yeah that's what I had in mind.. But it seems like I've come across an issue.

It's important that I don't modify too much of the existing DOM by doing things like wrapping the input element in a <span>. It causes a whole bunch of issues with styling of siblings and children elements.

So this means there's no way to position it on the right side - relative to the width of the input field. I can base it on the demo styling which means it would look like this:

But without styling it looks this - which is unacceptable for a plugin that's meant to "work out of the box".

[amsul]

I think it would be more suitable as an extension using the API. Similar to the "from" & "to" calendars.

[timknight]

@amsul I was definitely wondering if there were going to be some positioning issues with that especially since it requires a relatively positioned container.

I think since this datepicker allows the user to change the state of an input field, it's important that they be able to reverse the change if they made a mistake. What about doing something simple and then create an advanced sample using the API? For instance... instead of the "X" on the input, perhaps the default "clear" button is within the popup itself if the field isn't blank? You could allow the button to be disabled through an option and have an example of what you did with the "X" in the documentation in case someone wants to use that to expand their own version.

[amsul]

@timknight yes, I like that idea. I'll be working on a new build sometime next week. Thanks for the suggestions!

[timknight]

Thanks @amsul. Suggestions are always the easy part... you have the tough job.

[amsul]

So, I started out just fiddling around with a few ideas of how to fit another button onto the calendar. That lead me to re-write quite a bit of the CSS to make the picker more responsive and mobile friendly with more button(s).

I'd love to get some feedback.. Here's what it looks like: http://jsfiddle.net/amsul/ZVzSQ/4

[timknight]

@amsul, nicely done! I like what you've done so far. The only thing that stuck out to me as strange was the calendar sliding up from the main window even in larger resolutions, but all-in-all a position progression toward responsiveness.

[TheSisb]

+1 Really need a clear button. BTW amsul I'm looking into making pickadate work with 3 select boxes, any way we can communicate?

[amsul]

I've been updating the script to add the clear button, but I need to resolve a few other issues alongside - so it'll all come as part of version 2.0 (since it will be significant update).

@TheSisb Sure, give me a shout at [email protected] :)

[amsul]

@timknight I agree it looks a bit odd at first - I've actually grown to like it more. But for those who prefer the classic layout, I'm going to be adding it as a separate theme.

[amsul]

I just managed to pushed out version 2.0 http://amsul.github.com/pickadate.js

And it has a clear button! :)

[amsul]

Here's an example for custom styling: http://amsul.github.com/pickadate.js/docs.htm#api_clear

Is it possible to remove the clear button?