I'm trying to use angular strap datepicker
When I select the date, it returns string like "2013-10-21T00:00:00.000Z"
But when I set this string to variable he doesn't react...
i tried this ways
$scope.var1="2013-10-14T00:00:00.000Z";
$scope.var1= {date: new Date("2013-10-14T00:00:00.000Z")};
$scope.var1="08/10/2012";
Here is plunker
How to send date to him?
And is there any way to interact with it? Or i must use only var1 assigned as his model?
The string like 2013-10-14T00:00:00.000Z represents by new Date().
To store form, you can do that by create custom directive:
directive
app.directive('datetimez', function() {
return {
restrict: 'A',
require : 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat:'dd/MM/yyyy',
}).on('changeDate', function(e) {
console.log(e.date);
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});
HTML
<input id="inputDatepicker" class="input-small" type="text" datetimez ng-model="var1" data-date-format="dd/mm/yyyy" >
See demo Plunker
Hopfully this is helpful to someone else... I just spent 20 min looking for this.
HTML:
<input type="date" id="date" ng-model="object.date">
CONTROLLER:
.controller('yourController', function($scope) {
$scope.object = {
date: new Date()
}
});
Related
I am new to Angularjs. I have put 2 Datepickers. I need that When I select date from first datepicker then the smaller dates from that date should be disabled in second Datepicker. I am unable to set "minDate" for second Datepicker directive.
Below is my code :
HTML Code :
<div ng-controller='TestController'>
<label>From Date :</label>
<input type="text" id="1" datepicker="" ng-init="variable=''"
ng-model="startDate" ng-change="test()" />
<label>To Date :</label>
<input type="text" id="2" callFuc="test()" datepicker1=""
ng-model="endDate" />
</div>
Js Code:
app.controller('TestController', function($scope, $window) {
$scope.test = function() {
$scope.variable = $scope.startDate;
$window.alert("From date is" + $scope.variable);
};
});
app.directive('datepicker', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$('#1').datepicker({
minDate: 0,
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
app.directive('datepicker1', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$('#2').datepicker({
minDate: scope.test(),
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
I am able to disable past dates in first Datepicker using minDate : "0".
But I am unable to set minDate properly for the second Datepicker. I am not able to fetch selected date from the First Datepicker and pass it to "datepicker1" directive. Any help or suggestion will be appreciated.
Update
I have updated code. Kindly review it.
https://plnkr.co/edit/ohCFzpwLGgFPPH49jybq?p=preview
The datepicker directive needs to watch for changes and update minDate as needed:
app.directive('datepicker1', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
scope.$watch(attr.minDate, function(value) {
el.datepicker({
minDate: value,
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
});
}
};
});
Usage:
<label>To Date :</label>
<input type="text" min-date="variable" datepicker1
ng-model="endDate" />
I had datepicker using jquery. It works when the page is loaded because i set the default date in my controller. Picking a date is ok but the problem is when you get the value using angular js its not updated, always the default value. Anyone how to update the value when date is selected and set by jquery. Really appreciate your help and thanks in advance.
html
<input type="text" id="date1" name="date1" ng-model="data.date1">
<input type="text" id="date2" name="date2" ng-model="data.date2">
<button type="button" ng-click="get()">Test Value</button>
jquery
$('#date1').datepicker({
language: 'en',
autoClose:true,
dateFormat: 'd MM yyyy',
onSelect: function (fd, date, picker) {
}});
$('#date2').datepicker({
language: 'en',
autoClose:true,
dateFormat: 'd MM yyyy',
onSelect: function (fd, date, picker) {
}});
angular js
var app = angular.module('app', []);
app.controller('MainController', function($scope, $http){
$scope.data = {};
// default date
$scope.data.date1 = new Date();
$scope.data.date2 = moment(new Date()).add(1, 'days');
$scope.get = function(){
console.log($scope.data.date1);
console.log($scope.data.date2);
}});
If you are about to use datepicker more than one time, I suggest to create directive and just use it.
Directive
app.directive('datepicker', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
$(function(){
element.datepicker({
dateFormat:'dd/mm/yy',
onSelect:function (date) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
HTML
<input type="text" ng-model="date1" datepicker />
<input type="text" ng-model="date2" datepicker />
For more detail, just check this Plunker
I have two custom datepicker directives. One is called startDatePicker directive and the second is endDatePicker. I'm passing model from one to another which is fine, however when I pass date as string it does not display the date. I know it shouldn't because datepicker expects date object and it cannot convert it to date object automatically. Because my backend server returns dates as strings I need to convert to date objects. For that I use model.$formatter in my directive to convert string to date object and then send it to the view so the date can be selected and displayed. The date is getting selected, but it's not getting displayed..
To simulate the issue I have defined two variables in my controller. These two will be used for datepicker models as well. The first variable gets selected and displayed in the datepicker, but second only gets selected, but not displayed. What I'm doing wrong?
$scope.startDate = moment.utc("2016/12/25 00:00:00")._d;
$scope.endDate = "2016/12/25 00:00:00";
I have setup plunker to show the issue http://plnkr.co/edit/trEkwuO06VMJ1HdCkl5w?p=preview
Complete directive below
angular.module('ui.bootstrap.demo').directive('endDatepicker', function() {
return {
restrict: 'A',
scope: {
ngModel: "=",
minStartDate: "=",
},
require: 'ngModel',
replace: true,
templateUrl: 'datepicker-template.html',
link: function(scope, element, attrs, ngModel) {
ngModel.$formatters.push(function getJsonDate(date) {
if (!date) return null;
console.log("Unformatted date " + date)
var newDate = moment.utc(date)._d;
console.log("Formatter fired " + newDate)
return newDate
});
scope.popupOpen = false;
scope.openPopup = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.popupOpen = true;
};
console.log(scope.endDate);
scope.$watch('minStartDate', function(newValue,oldValue){
if (newValue) {
console.log(newValue)
scope.dateOptions.minDate = newValue;
}
})
scope.dateOptions = {
startingDay: 1,
minDate: moment.utc()._d
}
scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.opened = true;
};
}
};
});
This can be a confusing issue.
Right there will be two ngModel controllers associated with the endDatepicker directive.
One for ng-model here:
<div end-datepicker ng-model="endDate" min-start-date="startDate"></div>
And one for ng-model in the template:
<input type="text" class="form-control" ... ng-model="ngModel" ...
Both controllers will work with the same model, but you need to add the formatter to the correct one.
When you require the controller in your directive you will get the ngModel controller for the first one, but you need the controller for the ngModel on the input where the formatted value is to be shown.
Instead of requiring the controller the following should work:
link: function(scope, element, attrs, ngModel) {
var inputModelController = element.find('input').controller('ngModel');
inputModelController.$formatters.push(function getJsonDate(date) {
// Code
});
I have Following Directive , how can i implement ng-change with it . the directive is working but ng-change only works when i manually change value of text box not when i change it using date picker
app.directive('datepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
$(function () {
element.persianDatepicker({
formatDate: "YYYY/0M/0D",
onSelect: function (date) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
and in my HTML
<input datepicker type="text" id="EndDate" ng-model="Filter.EndDate" class="form-control" ng-change="DateSelect()" />
DateSelect() only runs when i change value of text box manually
Edited
ng-change is directive only for user input. Try to use $watch instead. Here are good answers:
Angular - ng-change not firing when ng-model is changed
When to use $watch or ng-change in Angularjs
Is there a way in angular JS to get Timestamp from a date obtained by a form?
<label for="start">From:</label>
<input type="date" ng-model="startDate" />
What will I have to write in the directive to transform this data? I didn't find anything about this particular issue,
Regards
Since you are using input type as date, the string in model should be compatible with Date object in javascript. So you can do
var timestamp = new Date($scope.startDate).getTime()
Use a directive to change the value from view to model.
http://jsfiddle.net/bateast/Q6py9/1/
angular.module('app', [])
.directive('stringToTimestamp', function() {
return {
require: 'ngModel',
link: function(scope, ele, attr, ngModel) {
// view to model
ngModel.$parsers.push(function(value) {
return Date.parse(value);
});
}
}
});
To use in a controller you can do something like this:
myApp.controller('TimestampCtrl', ['$scope', function($scope) {
$scope.toTimestamp = function(date) {
var dateSplitted = date.split('-'); // date must be in DD-MM-YYYY format
var formattedDate = dateSplitted[1]+'/'+dateSplitted[0]+'/'+dateSplitted[2];
return new Date(formattedDate).getTime();
};
}]);
And can be used like this:
<div ng-controller="TimestampCtrl">
The timestamp of <input ng-model="date"> is {{ toTimestamp(date) }}
</div>