Open datetimepicker только с иконкой

Question

В настоящее время я использую Trent Richardson's datetimepicker в проекте. Это связано с текстового поля так, что при нажатии кнопки в текстовом поле, ловильного всплывает, и вы можете выбрать время, или вручную ввести что-то в

Мой вопрос:. Как добавить значок «внутри» текстовое поле или только на краю текстового поля, чтобы вы могли щелкнуть в текстовом поле , не открывая дату/время, выбирающий, или не открывайте дату/время со значком, который затем заполнит текстовое поле на ваш выбор? Таким образом, у вас есть выбор вручную ввести время без выбора сборщика или просто с помощью сборщика.

У этой подборки есть время, но мне нужно использовать jQuery, а не bootstrap для этого проекта.

Я нашел this question, который аналогичен, но запускает сборщик от и значок и текстовое поле.

Answer 1

Я обновил скрипку для единственного значка datepicker show;

http://jsfiddle.net/uDVwx/33/

Jquery код

$(document).ready(function() { 

    $(function() { 

     $("#from-datetime").datetimepicker({ 
      showOn: 'both', 
      buttonImage: 'http://testsite.shadownetwest.com/datepicker4/development-bundle/demos/images/calendar.gif', 
      buttonImageOnly: true, 
      changeMonth: true, 
      changeYear: true 
     }) .click(function() { 
     $("#ui-datepicker-div").hide(); 
    }); 

     $(".ui-datepicker-trigger ").click(function(){$("#ui-datepicker-div").show()}); 

    }); 

}); 

HTML код

<fieldset id="fieldset"> 
    <dl> 
     <dt><label for="from-datetime">From: </label></dt> 
     <dd><input type="text" value="" id="from-datetime" name="from-datetime"/></dd> 
    </dl> 

</fieldset> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script> 

<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script> 

Answer 2

Вы должны иметь возможность привязать событие onclick к кнопке к созданию объекта datepicker. Например,

$(document).ready(function() { 
    $("#myButton").click = initiate; 
}); 

function initiate() { 
    $("#datepickerarea").datepicker(); 
} 

Have кнопку (или что угодно) с id="myButton", и когда ее нажатии, она будет порождать новый DatePicker. Если вы хотите, чтобы кнопка была переключателем, вам нужно будет отслеживать состояние datepicker, а затем удалить ее, если она уже существует.

function initiatie() { 
    if($("#filter_date").datepicker("widget").is(":visible")) { 
     $("#datepickerarea").datepicker("destroy"); 
    } else { 
     $("#datepickerarea").datepicker(); 
    } 
} 

EDIT: Datepicker не будет инициализироваться, пока вы НЕ РАСПРОСТРАНЯЕТЕ его инициализировать. Этот код прекратит запуск datepicker, потому что мы привязываем событие (в частности событие onclick), чтобы начать создание datepicker. Если никто не нажимает кнопку, датапикер просто не запустится

EDIT2: извинения, моя память о том, как работает датпикер, было немного глупо. Вы должны инициализировать datepicker как элемент INLINE, запустив создание на div вместо поля ввода. т.е.

<div id="datepickerarea"></div> 
<input type="text" id="myinputbox" /> 

и JS

$("#datepickerarea").datepicker({ altField: "myinputbox"}); 

Это вызовет DatePicker как более постоянного элемента, и помещает все, что пользователь выбирает в поле ввода.