Hi there! I’m new in vaadin and I’m trying to develop my older project with vaadin. So I faced many issues with this [date time range picker]
(https://www.daterangepicker.com/) component.
I’m already know how to use this component in vaadin by importing javascript and style sheets see sample class below:
@StyleSheet("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css")
@JavaScript("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js")
@JavaScript("https://cdn.jsdelivr.net/momentjs/latest/moment.min.js")
@JavaScript("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js")
//@JavaScript("./resources/static/js/test-jquery.js")
public class JqueryTestView extends VerticalLayout {
private Button button = new Button("Open Modal");
private H1 title = new H1("Test Page");
private TextField textField = new TextField("Date-time");
@PostConstruct
public void init(){
textField.setPlaceholder("click here");
textField.setMinWidth("285px");
textField.setId("daterange");
button.addClickListener(click->{
var textFieldDialog = new TextField("Date-time");
textFieldDialog.setPlaceholder("click here");
textFieldDialog.setMinWidth("285px");
textFieldDialog.setId("daterange2");
var window = new Dialog();
window.add(textFieldDialog);
window.setCloseOnOutsideClick(false);
window.open();
window.getElement().executeJs("$(function () {\n" +
" $('#daterange2').daterangepicker({\n" +
" timePicker: true,\n" +
" timePicker24Hour: true,\n" +
" timePickerIncrement: 5,\n" +
" autoApply: true,\n" +
" cancelLabel: 'Clear',\n" +
" drops: 'auto'\n" +
" }, function (start, end, label) {\n" +
" const pattern = \"DD.MM.YYYY HH:mm\";\n" +
" return start.format(pattern)+'-'+end.format(pattern);\n" +
" });\n" +
"});").then(event -> {
Notification.show("AFTER EXECUTE JS : "+event.asString(), 3000, Notification.Position.BOTTOM_END);
});
});
var button2 = new Button("GetValue");
button2.addClickListener(click -> {
Notification.show(textField.getValue(), 3000, Notification.Position.TOP_END);
});
add(title, button, textField, button2);
}
protected void onAttach(AttachEvent event) {
super.onAttach(event);
// executing JS should be avoided in constructor
getElement().executeJs("$(function () {\n" +
" $('#daterange').daterangepicker({\n" +
" timePicker: true,\n" +
" timePicker24Hour: true,\n" +
" timePickerIncrement: 5,\n" +
" autoApply: true,\n" +
" cancelLabel: 'Clear',\n" +
" drops: 'auto'\n" +
" }, function (start, end, label) {\n" +
" const pattern = \"DD.MM.YYYY HH:mm\";\n" +
" $('#daterange').val(start.format(pattern)+'-'+end.format(pattern));\n" +
" return start.format(pattern)+'-'+end.format(pattern);\n" +
" });\n" +
"});").then(e-> {
Notification.show("AFTER EXECUTE JS : "+e.asString(), 3000, Notification.Position.BOTTOM_END);
});
}
//"$('#daterange').find( \"input\" ).val(start.format('YYYY-MM-DD')+ ' ' +end.format('YYYY-MM-DD'))"+
}
, component appears and I know how to attach a value to picker, my problem is that even if visually value is inside a text field, actually if try to get a value it will be null. Unfortunately I’m not able to attach screen shots here, but I can share [link to github]
(https://github.com/code-6/tourManager.git) project where you can checkout “rf_new-add-tour-form”, run project, navigate to http://localhost:9105/tours and press on add button. Then new form will appears and by pressing on a “date-time” field picker will appears. Then you can choose a date and value will be inside field, but after press save, date will be null. This is because I’m setting value through javascript.
$(document).ready(function () {
$('#daterange').daterangepicker({
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 5,
autoApply: true,
cancelLabel: 'Clear'
}, function (start, end, label) {
const pattern = "DD.MM.YYYY HH:mm";
$('#daterange').val(start.format(pattern) + '-' + end.format(pattern));
});
});
And a text field component have id “daterange” date.setId("daterange");
In attachments you can find screenshots of how how it looks like and log with empty date.
Please help me to resolve this issue.
I already created another threads ([thread]
(https://vaadin.com/forum/thread/18307184/dialog-bootstrap-datetimerangepicker-appearance-problem)) this is also related to this 3rd party component.
