0

I'm a DNN beginner. I am currently building a module in which I can display statistics. My DotNetNuke Version is 7.0. The statistic is from Chartjs. For this statistic I would like to implement filters. These filters should be datepickers. As UI element I have now included a textbox with TextMode='Date'. But currently I have problems to set the default value of this field. The default value should be 01.01. of the current year.

I have already tried to set the value via C# server side. Unfortunately without success. I also tried to set the value on the client side via JavaScript. Unfortunately also without success.

These are some lines I tried in JavaScript:

document.getElementById(<%= this.DatumVon.AccessKey %>).value = "01.01.2019";
document.getElementById(<%= this.DatumVon.AccessKey %>).innerText = "01.01.2019";
document.getElementById("DatumVon").value = "01.01.2019";

These are some lines I tried in C# in the method "Page_Load" (server side):

this.DatumVon.Text = "01.01.2019";

I expected the value of the TextBox to be 01.01.2019. However, it currently only contains dd.mmm.yyyy. How can I change this?

Thank you.

Oliver Nybo
  • 560
  • 1
  • 6
  • 24
Ali
  • 410
  • 5
  • 21

2 Answers2

1

There is something wrong with your localization. Please refer to the jQuery UI datepicker documentation (the "Localization" section), this should give you the answer.

Michael Tobisch
  • 1,034
  • 6
  • 15
  • I'm sorry, but somehow I don't understand that answer. Could you make that clear? – Ali Jun 18 '19 at 09:13
  • What you have here is a date format problem. "dd.mmm.yyyy" (note the three m's!) is not a correct date format for your input, and therefore does not fit the given value (which is dd.mm.yyyy). On the other hand, this is (I guess) a German date format, that Javascript does not handle by default. In the documentation you find information about how to localize the date format for the jQuery UI datepicker (which is used by DNN). – Michael Tobisch Jun 18 '19 at 10:53
  • Sorry, somehow the link was lost in my answer - I just corrected that part. – Michael Tobisch Jun 18 '19 at 10:54
  • The mmm in the dateformat ist just a typo. I meant mm. – Ali Jun 19 '19 at 15:25
  • The info that DNN is using the jQuery datepicker is wrong after my guess. It may be that the current DNN version uses the jQuery datepicker. But DNN 7.0 in any case not. DNN 7.0 uses an HTML input tag with type='date' in case of a TextBox with TextMode='Date'. But I tried to use the jQuery datepicker now. This also works quite well. BUT any stylesheets mess up the complete datepicker, so the datepicker is totally ugly. What should I do? I'm desperate... For almost a week I've been annoyed only with this datepicker. – Ali Jun 19 '19 at 15:46
  • I also tried to include some finished css skins for the jQuery datepicker. However, some superordinate DNN css file seems to overwrite the datepicker skin. – Ali Jun 19 '19 at 15:46
  • Do you have any solutions? How were datepickers implemented in DNN 7.0 back then? Was there anything like this in the days of DNN 7.0? I have the feeling that DNN 7.0 does not offer any functionality for a datepicker. Or the DOM trees generated by DNN 7.0 are no longer compliant with current browsers. – Ali Jun 19 '19 at 15:46
  • Before the Telerik datepicker was used, but I don't recommend to use it as it has been kicked out and might cause upgrade issues. I have some places where I used the jQuery UI datepicker, and it drove me mad as well. Please leave me some time to find an example, I am sorry, that I don't have the time at the moment to write a complete answer. It was more a pointing in the right direction. – Michael Tobisch Jun 20 '19 at 16:15
0

wow... I solved it. I made it. Sometimes the solution is right in front of you and you don't see it. Michael Tobisch was absolutely right. When setting the value, the format is very important. I have always used the German format. A DNN TextBox with TextMode="Date" can't handle that. DNN converts this TextBox into an HTML input field. But this input field can only be clear with the format "yyyy-mm-dd". Depending on the geographical position of the client (at least that's what I think) the text displayed in the input field will be formatted. But the value of the input field always has the same format ("yyyy-mm-dd"). So very important here: the displayed text and the actual value have different formats.

Many thanks again to Michael Tobisch for the mental inspiration and the patience with me.

What is also important is that the access to the actual ID of a DNN element works as follows: this.Element.ClientID and not as I assumed before this.Element.AccessKey. This was also buggy.

Ali
  • 410
  • 5
  • 21
  • Ali, I am glad I could help... And sorry, I completely overlooked the ".AccessKey" property above, which of course MUST be ".ClientID". – Michael Tobisch Jun 24 '19 at 11:32