2016-09-01 4 views
0

Окно выбора даты и текст выглядит следующим образомКак я могу принести выбора даты в текстовом поле

enter image description here

Этот код приведен ниже:

<html:text name="facultyAchievementsForm" property="studentAchivementsDate" readonly="true" styleId="studentAchivements13"></html:text> 
    <script language="JavaScript"> new tcal({ 
             'formname' : 'facultyAchievementsForm', 
             'controlname' : 'studentAchivements13' 
              }); 
    </script> 

Я хочу выбора даты для войдите в текстовое поле, что мне делать?

+0

Почему бы вам не использовать загрузчик. – Noman

ответ

0

Я не знаю точно HTML результат вашего кода, но на основе изображения, публикуемую, кажется, что вы имеют 3 элемента внутри 2 столбцов таблицы:

Метка (дата :) внутри левой ячейки Текстовое поле и значок календаря внутри правой ячейки

В результате HTML будет что-то вроде этого

<table> 
<tr> 
<td><label></label></td> 
<td class="calendar"><input><img></td> 
</tr> 
</table> 

Вы можете использовать некоторые CSS, чтобы поместить тег IMG внутри текстового поля.

Вы можете установить позицию IMG тега абсолютной и использовать топ, оставил свойства.

Вот пример:

td { 
 
    position:relative; 
 
    } 
 
td.calendar input { 
 
\t \t width:200px; 
 
\t \t height:30px; 
 
\t } 
 
\t td.calendar img { 
 
\t \t position:absolute; 
 
\t \t z-index:99; 
 
\t \t left:174px; 
 
\t }
<table> 
 
<tr> 
 
<td><label>Date:</label></td> 
 
<td class="calendar"><input><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAWElEQVRYhe3SQQoAIAhE0bn/pW3VIqGCUEZpPrgS4S0E1D5zE72vC/CH0VMXYABs5g99r/sTpBYgKwH6AOhPKAAdkJUAfQD0JxSADshKgNKABZI41+iAvxpNfqDCtdHKkAAAAABJRU5ErkJggg=="/></td> 
 
</tr> 
 
</table>

+0

Спасибо ** @ Sylvain B **, он сработал. –

0

простое решение:

Использование Date Picker и JQuery UI:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(function() {  
      $(".datePicker").datepicker(); 
     }); 
    }); 
</script> 
<input type="text" class="datePicker" /> 
+0

** @ Syed Noman ** Я пробовал, но только текстовая область приближается, и ничего не происходит на событиях мыши. –

+0

Обновите свой код с помощью HTML и javascript. – Noman

+0

Не забудьте добавить ссылку JQuery UI в свой код, иначе она не будет работать. –

Смежные вопросы