Вот html для поля даты:
<div class='form-group'>
<label>Check out</label>
<input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out">
</div>
<script>
$('#check-out').datepicker();
</script>
В поле ввода отображается датапикер. Однако если я сделаю это в своем контроллере:
console.log($scope.checkOut);
Я получаю undefined in the javascript console.
Как это решить?
Есть ли лучший способ использовать bootstrap-datepicker с angularjs?
Я не хочу использовать angular-ui/angular-strap, так как мой проект раздувается библиотеками javascript.
Как указывает @lort, вы не можете получить доступ к модели datepicker с вашего контроллера, потому что у datepicker есть своя собственная область.
Если вы установили: ng-model="parent.checkOut"
и определите в контроллере: $scope.parent = {checkOut:''};
вы можете получить доступ к параметру datepicker, используя: $scope.parent.checkOut
Я использую bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/ и angularjs, у меня была такая же проблема с ng-model, поэтому я получаю значение даты ввода с помощью функции jquery bootstrap, ниже - код в моем контроллере, он работал у меня.
HTML
<input class="form-control" name="date" id="datetimepicker" placeholder="select date">
контроллер
$(function() {
//for displaying datepicker
$('#datetimepicker').datetimepicker({
viewMode: 'years',
format: 'DD/MM/YYYY',
});
//for getting input value
$("#datetimepicker").on("dp.change", function() {
$scope.selecteddate = $("#datetimepicker").val();
alert("selected date is " + $scope.selecteddate);
});
});
Вы пробовали загрузку AngularUI? В нем есть все модули bootstrap, переписанные в angular (включая datepicker): http://angular-ui.github.io/bootstrap/
Я сам нашел решение для этого. Я просто передаю название модели директиве (которую я нашел большую часть онлайн). Это изменит значение модели при изменении даты.
<input data-ng-model="datepickertext" type="text" date-picker="datepickertext" />{{datepickertext}}
angular.module('app').directive('datePicker', function() {
var link = function(scope, element, attrs) {
var modelName = attrs['datePicker'];
$(element).datepicker(
{
onSelect: function(dateText) {
scope[modelName] = dateText;
scope.$apply();
}
});
};
return {
require: 'ngModel',
restrict: 'A',
link: link
}
});
Я использую Angular JS 1.5.0 и Bootstrap 3 Datetimepicker от https://eonasdan.github.io/bootstrap-datetimepicker/
После некоторого времени и борьбы я наконец нашел решение, как заставить его работать для меня:)
JSFiddle: http://jsfiddle.net/aortega/k6ke9n2c/
Код HTML:
<div class="form-group col-sm-4" >
<label for="birthdate" class="col-sm-4">Birthday</label>
<div class="col-sm-8">
<div class="input-group date" id="birthdate" ng-model="vm.Birthdate" date-picker>
<input type="text" class="form-control netto-input" ng-model="vm.Birthdate" date-picker-input>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group col-sm-4">
<label for="birthdateText" class="col-sm-4">Model:</label>
<div class="col-sm-8">
<input type="text" class="form-control netto-input" ng-model="vm.Birthdate">
</div>
</div>
</body>
App.js:
Просто контроллер, устанавливающий атрибут viewmodels Birtdate:
var app = angular.module('exampleApp',[]);
app.controller('ExampleCtrl', ['$scope', function($scope) {
var vm = this;
vm.Birthdate = "1988-04-21T18:25:43-05:00";
}]);
Первая директива инициализирует datetimepicker и слушает событие dp.change.
При изменении - обновляется и ngModel.
// DatePicker -> NgModel
app.directive('datePicker', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
$(element).datetimepicker({
locale: 'DE',
format: 'DD.MM.YYYY',
parseInputDate: function (data) {
if (data instanceof Date) {
return moment(data);
} else {
return moment(new Date(data));
}
},
maxDate: new Date()
});
$(element).on("dp.change", function (e) {
ngModel.$viewValue = e.date;
ngModel.$commitViewValue();
});
}
};
});
Вторая директива - просмотр ngModel и запуск события onChange при изменении. Это также обновит значение представления datetimepicker.
// DatePicker Input NgModel->DatePicker
app.directive('datePickerInput', function() {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
// Trigger the Input Change Event, so the Datepicker gets refreshed
scope.$watch(attr.ngModel, function (value) {
if (value) {
element.trigger("change");
}
});
}
};
});
У меня одна и та же проблема и разрешаю это
добавлен в html часть
<input class="someting" id="datepicker" type="text" placeholder="Dae" ng-model=""/>
и простой в вызове контроллера
$scope.btnPost = function () {
var dateFromHTML = $('#datepicker').val();
Один из способов: установите поле идентификатора на вход, затем вызовите document.getElementById('input_name'). значение, чтобы получить значение поля ввода.
Используя this datepicker У меня была такая же проблема. Я решил это с помощью небольшого трюка.
В теге ввода я добавил новый атрибут (dp-model):
<input class="form-control dp" type="text" dp-model="0" />
<input class="form-control dp" type="text" dp-model="1" />
...
И затем в js файле я принудительно привязал привязку следующим образом:
$scope.formData.dp = []; // arrays of yours datepicker models
$('.dp').datepicker().on('changeDate', function(ev){
$scope.formData.dp[$(ev.target).attr('dp-model')] = $(ev.target).val();
});
Это сработало для меня:
установить
ng-model="date"
на вашем контроллере angular:
$scope.date = '';
$('#check-out').datepicker().on('changeDate', function (ev) {
$scope.date= $('#check-out').val();
$scope.$digest();
$scope.$watch('date', function (newValue, oldValue) {
$scope.date= newValue;
});
});
Моя реальная проблема заключалась в том, что значение модели не отражалось до изменения другого компонента в области.
im, используя этот, и мой код:
this.todayNow = function () {
var rightNow = new Date();
return rightNow.toISOString().slice(0,10);
};
$scope.selecteddate = this.todayNow();
$(function() {
//for displaying datepicker
$('.date').datepicker({
format: 'yyyy-mm-dd',
language:'fa'
});
//for getting input value
$('.date').on("changeDate", function() {
$scope.selecteddate = $(".date").val();
});
});
Чтобы решить эту проблему, у меня есть мой HTML-код:
<div class='input-group date' id='datetimepicker1'>
<input type='text' ng-model="date.arrival" name="arrival" id="arrival"
class="form-control" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Моя ng-модель не будет обновляться, поэтому я использовал ее, чтобы исправить ее:
$("#datetimepicker1").on("dp.change", function (e) {
$scope.date.arrival = $("#arrival").val(); // pure magic
$('#datetimepicker2').data("DateTimePicker").minDate(e.date); // this line is not relevant for this example
});