link javascript 使用 gwt 小部件

Question

我正在使用创建日期选择器 1- bootstrap datepicker js/css 文件弹出日期选择器（位于 web 目录中并包含在 html 文件中） 2- gwt 创建应填写日期的文本框小部件

我面临的问题是 js 无法识别我在 GWT 中创建的文本框，而如果我直接在 html 文件中插入文本框，则日期选择器是工作文件 ( 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

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

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

Answer 2

在DOM之后加载你的JS是created.Override这个方法，如果你使用的是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() 方法 return java.util.Date

link javascript 使用 gwt 小部件

link javascript with gwt widget

javascript

gwt

datepicker

twitter-bootstrap-3