How to clear a date input field?

How to clear a date input field?


In a simple demo app I have a couple of date-fields, using RichWidgets\Input_Calendar.

But how can I (in a simple way) remove an earlier entered date value? I guess the presented calender should somehow let me erase the presented date (21-01-2008) and show the value similar to the second date-field in the screen shot. Is this feature hidden somewhere, or just missing?

I ran into this before and with some help solved this by adding an icon, calling some JavaScript ...

function ClearTextDate(datefield)
$('.' + datefield).val('');

But isn't a more simple solution available?????

Hi Charley, 

There are two possible options:

  • You can select the content of the input and delete it by hand.
  • You can create an action that erases the value of your variable holding the date and refresh the calendar input with an ajax refresh.

Kind regards,

Remco Dekkinga

Hi Remco,

This doesn't seem to work.

It revolves around a similar issue I was experiencing whereby I wanted to set the default value of one calendar to the value selected in another.  I had two Date variables bound to the two TextInputs.  I thought I could set the Date2 variable to the Date1 variable in an onChange and do an AJAX refresh of the Input2 text box.  In fact this does work and the second textbox shows the selected date from Calendar 1 but what happens then is that the Calendar2 widget somehow loses its connection with its textbox and will not popup anymore.

In Charley's case, we can set the Date2 variable to NullDate() (and set the Input widget "NullValue" property to the same) and the associated textbox shows blank but the problem remains that its Calendar widget stops working.

If you can explain how to get around that issue, Charley has his solution.

Hi Lester,

If you refresh only the input widget, the calendar will loose his connection. You should have a container around the combination of the input and the calendar widget and then the ajax-refresh should refresh the container.

The calendar js is then rebuild and bound to the new input widget.

Kind regards,

Remco Dekkinga.

Thanks Remco,

That is the answer I needed.  +1

When refreshing a textbox or any other element, they receive an other runtime ID. Since the calendar widget has not been refreshed, he is still looking for the 'old' runtime id.



Thanks Niels,

This makes sense.

So a runtime Id should never be cached if you are updating anything with AJAX!

Hi all, thnx for your replies!

I've implemented some JavaScript and AJAX refresh, and that works fine ... it lets me clear the entered date.

However Remco, I don't understand your suggestion

  • You can select the content of the input and delete it by hand.

When I select the date as shown in above screen shot I cannot erase it using Del, Backspace or any other key. Could you please explain how I can delete it by hand? Thnx.

Hi Charley,

I'm not sure why you can't delete. I've tried to reproduce the behavior you have, but I was unable.

I'm using Chrome and I have an input widget with an Input_Calendar widget pointing to it. When I set the input widget to Enabled = False, I don't get the calendar and when the widget is set to Enabled = True, I can click in the input and change the value by hand.

Remco, I think we're having some confusion here :-)

I've disabled AND enabled the input widget, and yes, when it's disabled the calender does not appear and when enabled again the calender appears when clicking the input widget, and yes. then I can change the date value using the calender ... but by using the calender only! There is no way I can put the cursor in the input widget itself and clear the content ... and that's what I'm looking for.

What I see is that when I click the input widget, the calender is shown and the input widget itself is disabled. The only way I managed to place the cursor in the input widget and edit the date manually, was by deleting the RichCalendar widget.

Considering your example, presuming the date 2016/10 is stored in the database and displayed on the screen. How can you delete/erase this date, thus removing it from the database when saving?

Hi Charley,

The date was the date of today and with the cursor and the back-button i was able to edit the input field. I pressed the backspace button several times, which removed most of the date.

I believe that the issue you are facing is related to the browser or the CSS/Javascript of the theme.

can you create a small application where you only have one input and calendar widget with only the SilkUi theme and see if the problem still occurs. If the problem still exists, can you then share your test oml and the browser(s) you tested?

Kind regards,

Remco Dekkinga

Thnx again, and hereby my test app ... just default setting. Problem still occurs.

Deploying ... Initial screen ...

Clicking in the date field and selecting a date ...

And not able to remove the date anymore.

This is the version of Chrome I'm using ... the latest one I guess.

"Schiet mij maar lek" :-)

Very strange, I downloaded your testapp and it's working fine for me...

What you could do is create an icon next to the text box and when clicking that icon you clear the TypedValue.
But it's strange...

Thnx Niels, and in another app I did add an icon to clear the date field but I hoped there was a more simple solution for me :-)

I don't know if it matters .. i'm using the latest version, version 10. Perhaps you're using another, older version?

Hi Charles,

I'm also able to use the calendar and I'm able to erase data from the input with the cursor and backspace/delete. It's not read-only.

This is indeed a very strange behaviour.

Which version of the Platform are you running? I've tried 9.1 and 10, both work correctly with the default SilkUI implementation.

Kind regards,

Remco Dekkinga

Hi Remco,

I'm working in my personal cloud,, a week or so ago upgraded to version 10, and I also upgraded Service Studio to version 10  .... no adjustments done after the instrallation what so ever.

I'm a rather newbie to OuySystems .. you're talking about SilkUI ... I'm using the theme LondonFixed (that's what I goy automatically creating the new application). That's the same?

I tried switching to the older Chicago theme, but that didn't help.

When you take a look at the console of chrome, are there any javascript errors appearing?

Completely clear Niels.

Hmmm. It has nothing to do with version 10, since i am using it.

Lets try something else:

- Can you reference silkUIFramework?
- Select the Calendar widget, silk has available.

Try using the Calendar widget from SILK instead of Richwidgets. What's the result?

Hmmm ... thought I allready replied on your latest post Niels, but something went wrong obviously.
What have I done/tried since yesterday evening ....

I installed SilkUI and the Lisbon template, used the calendar control and it worked fine! (in Chrome)

I then, and I should have done that earlier, I tried the demo app in Edge and 'oldie' Internet Explorer, and again no problem.

So it looks like *my version off) Chrome in combination with the standard theme (LondonFixed) is causing the problem. Anyone else experiencing this? I may not hope so, because I guess there are a lot of Chrome users  around :-)

To be sure, I have installed Firefox as well, and erasing the date is no problem.

Anybody any idea what can be wrong with (my version of) Chrome?

What is your version of chrome?

I have the same version. Very strange. Already tried to reinstall Chrome?
(first delete it and isntal it again, not repair.)

I guess I'll have to try something like that Niels, thanks for the help so far.