Вводимый текст не работает с бутстраповым средством выбора даты

Я использую angular.js и bootstrap datepicker для получения дат.

Это мой код в HTML:

<div class="form-group col-sm-6 col-md-6 col-lg-6">
   <label for="employee_contract_start" class="req">Inicio de Contrato</label>
   <input type="text" data-parsley-trigger="change" class="form-control data_input" id="employee_contract_start" ng-model="employee.contract_start" value="" required>
</div>

... и JS

$("#employee_contract_start").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true

}).on('show', function(){

    if($(this).val() == '')  {
       $(this).val('14/10/2014').datepicker('update');
    }

});

А теперь поясню:

Когда я вижу (или перезаряжаю) страницу, поле ввода отображается пустым, а дата просто появляется, когда я нажимаю на поле ввода. Я хотел бы, чтобы дата "14/10/2014" появлялась без необходимости нажимать ввод.

Я еще не могу загружать изображения, чтобы лучше объяснить: P

Спасибо!!!


javascript datepicker jquery angularjs bootstrap-datepicker
person smoreno91    schedule 14.10.2014    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Я не собираюсь отвечать на ваш вопрос напрямую, однако недавно мне довелось поработать с бутстрапом datepicker, и с ним было много проблем, особенно при попытке интегрировать его с некоторой логикой Angular.

Затем я обнаружил - angular-bootstrap: "Компоненты Bootstrap, написанные на чистом AngularJS с помощью команда AngularUI", и это значительно упростило работу с Datepicker! Проверьте раздел Datepicker в предоставленной ссылке. Исходный код приведен непосредственно под примерами.

Надеюсь, вы найдете его более интуитивно понятным и подходящим для остальной части вашего приложения Angular.

person Nikolay Melnikov    schedule 14.10.2014
comment
мммм звучит интересно... дай мне проверить - person smoreno91; 15.10.2014
comment
Искренне рад, что вам это тоже было полезно :) - person Nikolay Melnikov; 15.10.2014

arrow_upward
1
arrow_downward

Я правильно понимаю, что вы хотите установить дату по умолчанию как сегодняшнюю дату

Для этого вам нужно будет установить дату на сегодняшнюю дату явно, как это

$("#employee_contract_start").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true

}).on('show', function(){

    if($(this).val() == '')  {
       $(this).val('14/10/2014').datepicker('update');
    }

});

// Now once you have initilized datepicker, you can set the initial date like this---

var currentDate = new Date(); // Here get today's date
$("#employee_contract_start").datepicker("setDate", currentDate); // set default date to be todays date
$('#employee_contract_start').val(currentDate)
person Cute_Ninja    schedule 14.10.2014
comment
Я устанавливаю дату по умолчанию, и она отлично работает, она появляется на странице, но появляется только тогда, когда я нажимаю на ввод. Так что это не решение :/ - person smoreno91; 15.10.2014
comment
добавьте это ---- $('#employee_contract_start').val(currentDate) - person Cute_Ninja; 15.10.2014
comment
удалите обработчик событий на шоу и посмотрите, поможет ли это - person Cute_Ninja; 15.10.2014
comment
я удалил событие, и я тоже не работаю, хахах:/, как я могу поделиться с вами своим кодом? - person smoreno91; 15.10.2014
comment
вы можете поделиться им на jsfiddle - person Cute_Ninja; 15.10.2014
comment
хорошо, мое приложение такое большое, поэтому позвольте мне передать необходимый код, чтобы объяснить вам лучше - person smoreno91; 15.10.2014

arrow_upward
0
arrow_downward

Если вы хотите, чтобы текущая дата отображалась при загрузке страницы, вам нужно будет вручную инициализировать средство выбора даты после загрузки средства выбора даты.

person colonelsanders    schedule 14.10.2014
comment
... но почему дата появляется, когда я нажимаю на вводимый текст? - person smoreno91; 15.10.2014

arrow_upward
0
arrow_downward

Итак, я представляю модуль ADMdtp. Это чистый AngularJs dateTimePicker с множеством замечательных опций:

  • полностью синхронизирован с ngModel, поэтому нет необходимости уничтожать или вручную обновлять dateTimePicker.
  • предварительный выбор диапазона; сделайте столько dateTimePicker, сколько хотите, связанными вместе, и снова не нужно уничтожать или вручную обновлять каждый dateTimePicker.
  • отключающий шаблон; так легко вы можете отключить любой день (дни) недели или месяца, например, все выходные.
  • переход на смену дней. (проклятье, вы можете отключить его в настройках)
  • получить полные сведения о дате, такие как дата в формате UNIX, формат даты и год, месяц, день, час и минута отдельно и ... по атрибуту полных данных.
  • ...

<adm-dtp ng-model="date" full-data="date_full"></adm-dtp>

person MeTe-30    schedule 05.01.2016