Question

我正在使用创建datepicker 1- bootstrap datepicker js / css文件弹出datepicker（在web目录中本地化并包含在html文件中） 2- gwt创建文本框小部件，其中应填写日期

我面临的问题是js无法识别我在GWT中创建的文本框，而如果我直接在html文件中插入文本框，则datepicker是工作文件（js正在工作）

这是我正在使用的HTML文件

<html>
<head>
    <title>Application</title>

    <link rel="stylesheet" href="resources/css/datepicker.css" rel="stylesheet"/>


</head>
<body>
<script type="text/javascript" language="javascript" src="com.myApp.Users/com.myApp.Users.nocache.js"></script>
<h1>Users Application</h1>
</body>
            <div id="3b2">
                <!-- when adding the below element it is working fine -->
                <!--<input type="text" placeholder="flight date" id="airlineCal" class="input-block-level">-->
            </div>

<!-- Bootstrap core JavaScript
    ================================================== -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="resources/js/bootstrap-datepicker.js"></script>
<script src="resources/js/triphop.js"></script>

<script>
    $(document).ready(function () {

        $("#airlineCal").datepicker({
            format: "dd/mm/yyyy"
        });

    });
</script>
</html>

这就是我创建小部件的方式

final TextBox flightdateTextBox = new TextBox();
flightdateTextBox.getElement().setPropertyString("id", "airlineCal");
RootPanel.get("3b2").add(flightdateTextBox);

Answer 1

问题可能是当调用datepicker代码时，尚未创建<input>元素。您可以尝试在通过id输入之前设置超时（看起来有点难看）：

$(document).ready(function () {
    setTimeout(function() {
        $("#airlineCal").datepicker({
            format: "dd/mm/yyyy"
        });
    }, 3000);    
});

Answer 2

创建DOM后加载JS。如果使用的是UIBinder，请调用此方法并调用JS

@Override
    protected void onAttach() {
        super.onAttach();
        callJS();
    }


    private native void callJS()/*-{
  $(doc).ready(function () {
    $("#airlineCal").datepicker({
        format: "dd/mm/yyyy"
    });

    });

    }-*/;

Answer 3

为了永久解决这个问题，我使用了日期框选择器而不是使用js日期选择器。通过这个我能够访问日期选择器小部件..

// Create a date picker
DatePicker datePicker = new DatePicker();

// Set the value in the text box when the user selects a date
datePicker.addValueChangeHandler(new ValueChangeHandler<Date>() {
  public void onValueChange(ValueChangeEvent<Date> event) {
    Date date = event.getValue();
    String dateString = DateTimeFormat.getMediumDateFormat().format(date);
    text.setText(dateString);
  }
});


// Add the widgets to the page
RootPanel.get().add(datePicker);

为了获取日期值，使用datePicker的getValue（）方法返回java.util.Date

链接javascript与gwt小部件

3 个答案: