鏈接JavaScript和GWT部件

我創建使用 1-引導日期選擇器的JS/CSS文件，彈出日期選擇器（localted在web目錄，幷包含在HTML文件） 2 - GWT創建文本框控件日期選擇器，其中日期應填寫鏈接JavaScript和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);

來源

2016-03-22 Qais Ammari

作爲一種解決方法，我在html中插入輸入文本，並開始使用DOM庫（（（InputElement）（Element）DOM.getElementById（「airlineCal」））。getValue（）;） –

爲了永久解決這個問題，我使用日期框選取器而不是使用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);

，以獲取日期值使用日期選擇器的的getValue（）方法返回一個java.util.Date

來源

2016-10-18 09:06:47

在gwt模塊本身中讀取它也可以應用風格的日期選擇器，使其很漂亮 –

問題也許是<input>元素尚未創建，調用日期選擇器代碼時。您可以嘗試通過ID獲取輸入（這看起來有點醜）之前設置超時：

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

來源

2016-03-23 14:48:57

裝入JS後DOM是created.Override此方法，並打電話給你的JS，如果你正在使用UiBinder的

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


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

    }); 

    }-*/;

來源

2016-03-24 09:58:53

鏈接JavaScript和GWT部件

回答

相關問題