将javascript与gwt小部件链接_Javascript_Gwt_Twitter Bootstrap 3_Datepicker

将javascript与gwt小部件链接

javascript gwt twitter-bootstrap-3

将javascript与gwt小部件链接,javascript,gwt,twitter-bootstrap-3,datepicker,Javascript,Gwt,Twitter Bootstrap 3,Datepicker,我正在使用创建日期选择器 1-引导datepicker js/css文件以弹出datepicker（在web目录中本地化并包含在html文件中） 2-gwt创建文本框小部件，其中应填写日期我面临的问题是，js无法识别我在GWT中创建的文本框，而如果我将文本框直接插入html文件中，则日期选择器正在工作（js正在工作）这是我正在使用的HTML文件 <html> <head> <title>Application</title>

我正在使用创建日期选择器 1-引导datepicker js/css文件以弹出datepicker（在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>

也许问题在于调用日期选择器代码时，

元素尚未创建。您可以尝试在通过id获取输入之前设置超时（看起来有点难看）：

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

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


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

    });

    }-*/;

为了永久解决这个问题，我使用了日期框选择器而不是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 DatePicker=新的日期选择器（）；
//设置用户选择日期时文本框中的值
datePicker.addValueChangeHandler（新的ValueChangeHandler（）{
ValueChange上的公共作废（ValueChangeEvent事件）{
日期=event.getValue（）；
String dateString=DateTimeFormat.getMediumDateFormat（）.format（日期）；
setText（日期字符串）；
}
});
//将小部件添加到页面
RootPanel.get（）.add（日期选择器）；

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

作为解决方法，我在html中插入了输入文本，并开始使用DOM库（（（InputElement）（Element）DOM.getElementById（“airlineCal”））.getValue（）在gwt模块本身中读取它您还可以将样式应用于日期选择器以使其美观

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


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

    });

    }-*/;

// 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);