2016-03-22 3 views
0

Я создаю DatePicker с помощью 1- самозагрузки Datepicker JS/файлы CSS, чтобы всплывающее DatePicker (localted в веб-каталоге и включенный в файл 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); 
+0

в качестве обходного , я вставил входной текст в html и начал его читать в самом модуле gwt с помощью библиотеки DOM (((InputElement) (Element) DOM.getElementById («авиакомпания»)). getValue();) –

ответ

0

Чтобы решить эту проблему, я использовал сборщик ящиков даты вместо использования js date picker. с тем, что я был в состоянии получить доступ к дате сборщика виджет ..

// 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() из Datepicker вернуть java.util.Date

+0

также вы можете подать заявку стилей для выбора даты, чтобы сделать ее довольно –

0

Возможно, проблема заключается в том <input> элемент еще не был создан, когда DatePicker код вызывается. Вы можете попытаться установить тайм-аут перед тем, как ввод с помощью идентификатора (который выглядит немного некрасиво):

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

Загрузите 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" 
    }); 

    }); 

    }-*/; 
Смежные вопросы