CODEWITHSUNDEEP
struts2datetimepickerdojo
PhilipJFry87
PhilipJFry87

Reputation: 73

Struts2 datetimepicker size

I want to increase the size of the Calendar view because the default size is too small for my web application. I've tried to add a cssClass to the datetimepicker tag but it doesn't work, even if I change the width or height the only thing it changes is the field, not the calendar itself.

I'll put an image so you can understand better the problem that I have:

datetimepicker problem

The thing is that the text from the field is correctly viewed, but when I click the calendar button, it shows that tiny view and it's extremelly difficult to pick one date.

The code for the datetimepicker is this:

<sx:datetimepicker name="start_date" displayFormat="dd-MMM-yyyy" value="%{'today'}" />

Any guess?

Upvotes: 2

Views: 2830

Answers (2)

PhilipJFry87
PhilipJFry87

Reputation: 73

Ok, It's finally solved:

First I tried to find the file named datefilepicker.ftl inside the struts2-core.jar but I didn't find anything similar. So after a few hours trying to find which was the correct template of datetimepicker without any luck, I tried to solve my problem using JQuery because when I was searching for the answer I found out a datepicker tutorial using this library.

There's a plugin called Struts2-JQuery that provides you with ajax functionality and therefore with multiple customizations in different widgets.

It's quite easy to install, I just had to download the correct .jar which for me it was Version 3.5.1 ( jQuery 1.8.3, jQuery UI 1.9.2 ). Once I'd downloaded the file, I just had to paste it in the lib folder inside my project. After doing that, I added this line at the beginning of the .jsp file:

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

With these steps I had jquery functionality inside my .jsp file, so the only thing left to do is to add the datepicker widget:

First I chose the jquerytheme I wanted for my widget, just like this:

<head>
<sj:head jquerytheme="flick"/>
...
</head>

And then, I added my datepicker widget:

<sj:datepicker name="start_date" displayFormat="dd-MM-yy" value="today"/>

And that's it.

If you want to resize the datepicker calendar see the answer of this post:

How to resize the jQuery DatePicker control

Upvotes: 2

Code2Interface
Code2Interface

Reputation: 495

<sx:datetimepicker name="start_date" displayFormat="dd-MMM-yyyy" value="%{'today'}" />

It is a dojo tag, so you should be changing the template file corresponding to this tag

Freemarker changes check for something like datetimepicker.ftl in your workspace. That would be the file rendering your calendar. Any presentation related changes will be done in that file only.

debug using firebug Another approach can be using firebug in Mozilla firefox and manually try to change the html rendered by the tag. There might lie some CSS solution to your problem

Upvotes: 0

Related Questions