KendoUI DateTimePicker with Wicket 8

[Pravin]

Hi, As I'm new to Wicket as well as with KendoUI, I find out that the KendoUI is best for my application. I'm implementing the TextField<Date> which has the value from KendoUI DateTimePicker. Its possible earlier as we are implementing it from wicket-datetime , as wicket is upgraded to 8.1 it was not supporting. So can you please provide a sample example or way to implement it. 

As I successfully tried this example http://www.7thweb.net/wicket-jquery-ui/kendo/datetimepicker/KendoDateTimePickerPage

but its not using the textfield.

Thanks in advance.

 Pravin.

[Maxim Solodovnik]

Why do you need TextField?

Everything works as expected without it :))

[Pravin]

As I've to store that value into DB.

[Maxim Solodovnik]

TextField is not required for this :)

You can get value from com.googlecode.wicket.kendo.ui.form.datetime.DateTimePicker 

[Pravin]

Thanks Maxim. 

Sure but I'm new to this all so I'm not aware of how to do. I'll definitely try it. If possible can you give me simple code snippet so I can get an idea about that.

Thanks, Pravin.

[Maxim Solodovnik]

You already have several examples:

1) examples from 7thweb

2) openmeetings examples

Could you be more specific? (and better share your code)

What piece of code doesn't work for you?

[Maxim Solodovnik]

If I were you, I would 

1) Create wicket quickstart application: http://wicket.apache.org/start/quickstart.html

2) Put this code in it http://www.7thweb.net/wicket-jquery-ui/kendo/datetimepicker/KendoDateTimePickerPage?0

3) check the result

If something doesn't work as expected:

1) share quickstart via Github/Bitbucket etc.

2) ask specific question

At our project we are using Ajax version of kendo DateTimePicker (based on java8 LocalDateTime to avoid time zone issues)

All code you have shared should be replaced with something like

final DateTimePicker datetimepicker = new DateTimePicker("datetimepicker", Model.of(new Date()), "EEE dd MMM yyyy", "HH:mm:ss");

I would not hardcode date/time patterns, but this should be your decision :)

On Thursday, November 22, 2018 at 3:19:06 PM UTC+7, Pravin wrote:

Thanks for the reply.

Please find below details:

public class DateTimePickerOptionsCreator {
  private ClientConfigBean _clientConfigBean;

  public DateTimePickerOptionsCreator(ClientConfigBean clientConfigBean) {
    _clientConfigBean = clientConfigBean;
  }

  public DateTimePickerOptions invoke() {
    DateTimePickerOptions options = new DateTimePickerOptions();
    ResourceReference icon = new PackageResourceReference(CatalogBasePage.class, "css/images/icon1.png");
    Map<DefaultSettingTypeEnum, String> defaultSettings = _clientConfigBean.getDefaultSettings();
    String dateFormat = defaultSettings.get(DefaultSettingTypeEnum.dateOnlyFormat);
    String jqueryUIDate = new SimpleDateFormatToJQueryUIFormatConverter(dateFormat).invoke();

    CharSequence charSequence = RequestCycle.get().urlFor(icon, null);

    String timeFormat = defaultSettings.get(DefaultSettingTypeEnum.timeOnlyFormat);
    String jqueryUITime = new SimpleDateFormatToJQueryUIFormatConverter(timeFormat).invoke();
    options.showOn("button")
            .buttonImage(charSequence)
            .buttonImageOnly(true)
            .dateFormat(jqueryUIDate)
            .timeFormat(jqueryUITime);
    return options;
  }
}

public class DateTimePickerTextFieldCreator implements Serializable {


  private ClientConfigBean _clientConfigBean;
  private IConverter _dateConverter;

  public DateTimePickerTextFieldCreator(ClientConfigBean clientConfigBean, IConverter dateConverter) {
    _clientConfigBean = clientConfigBean;
    _dateConverter = dateConverter;
  }


  public TextField<Date> invoke(final String dateInputId, final IModel<Date> model) {
    DateTimePickerBehavior dateTimePickerBehavior = getDateTimePickerBehavior();

    TextFieldWithCasperJsAnnotation<Date> dateTimePickerTextField = new TextFieldWithCasperJsAnnotation<Date>(dateInputId, model, Date.class) {
      @Override
      public <C> IConverter<C> getConverter(Class<C> type) {
        return _dateConverter;
      }
    };

    dateTimePickerTextField.add(dateTimePickerBehavior);
    return dateTimePickerTextField;
  }

  public DateTimePickerBehavior getDateTimePickerBehavior() {
    final DateTimePickerOptions dateTimePickerOptions = getDateTimePickerOptions();
    return new DateTimePickerBehavior(dateTimePickerOptions) {

      /**
       * This hack was implemented to assign DateTimePicker to input text field in case input was loaded by ajax.
       * jqWicket stands on the assumption that DateTimePicker should be initialised on DOM ready jQuery event.
       * In case we use ajax input will not get initialised.
       *
       * @param component
       */
      @Override
      public void afterRender(Component component) {
        super.afterRender(component);
        Response response = component.getResponse();

        StringBuilder script = new StringBuilder()
                .append("<script>")
                .append("function startDateTimePicker() {\n")
                .append(" var $input = $(\"#").append(component.getMarkupId()).append("\");\n")
                .append("if ($ && $.timepicker && $input.length > 0) { \n")
                .append(" if (!$input.hasClass('hasDatepicker')) {")
                .append("  $input.datetimepicker(").append(dateTimePickerOptions.toString()).append(");")
                .append(" }")
                .append(" return true;")
                .append("} \n")
                .append(" setTimeout(startDateTimePicker, 500);")
                .append("}\n")
                .append("startDateTimePicker();")
                .append("</script>");
        response.write(script);
      }
    };
  }

  public DateTimePickerOptions getDateTimePickerOptions() {
    return new DateTimePickerOptionsCreator(_clientConfigBean).invoke();
  }
}

these are working on wicket 7 as there is wicket-datetime compatible and available, but when I'm upgraded to wicket 8 this is not available so I want to move to KendoUI datetimepicker, as its best suitable (for me, m thoughts). so the invoke method return the TextField of type Date.

So I'm trying to do same. 

I tried the examples from your mentioned sites but they are not upto my requirement(As I'm new to wicket and kendo as well).

Thanks, Pravin.

[Pravin]

Hi Maxim,

Thanks for your reply.

As I'm successfully implemented your mentioned demos. And that's working fine for me. But if you see these below lines I'm returning the TextField. How this can be achieved in that demo.

Just a simple I want to return a TextField from DateTimePicker. Is there any possibility.

Thanks, Pravin.

[Maxim Solodovnik]

This is something I hardly understand

Your final goal is to get TextField? Or to get user input as java.util.Date/java.time.LocalDateTime/etc. ?

In case it is Ok to have beutiful date/time picker and finally get Date/DateTime java object

all you need to do:

1) create kendo DateTime

2) add it to the Form

3) get java object after form is submitted

[Pravin]

Thanks Maxim.

I'll try it.

[Maxim Solodovnik]

Please share your code if something will not work :)