How to filter the grid data(Ng-grid) on the basis of selection date range via AngularJS - angularjs

Actually I have a combo box with values "Last seven days", "Last three days" and "Today", I want to apply the filter on the basis of selected value date range by current date

If the filterOptions of the grid are not working for you then try keeping your full set of data in one array and the filtered set in another. Set the gridOptions.data to your filtered set. Apply a function when the user makes a selection from the dropdown that sets your filtered set to whatever you want. Something like this:
<select ng-model="filterValue"><option value=1>Last 7 days</option></select>
$scope.allItems = [{someDate:'10/21/14'},{someDate:'11/2/14'},{someDate:'10/24/14'}];
$scope.filteredItems = [];
$scope.filterValue;
$scope.$watch("filterValue", function() {
// filter your dataset here
if($scope.filterValue == 1) { // Last 7 days
angular.forEach(allItems,function(value) {
// Use something like moment.js to do date arithmetic
if(date in last 7 days) {
$scope.filteredItems.push(value);
}
});
}
};
$scope.gridOptions = { data: 'filteredItems' ....};

Below is the solution for filtering the data of the grid view on the basis of selected Date options from the combo box as described in the problem statement:
Here durationFilter() is the function call on the change of the value in the combo box
$scope.durationFilter = function () {
var currentDate = new Date();
var difDate = new Date();
$scope.filteredItems = [];
switch ($scope.selectedItem.id) {
case 1:
$scope.range = 1;
break;
case 2:
$scope.range = 3;
break;
case 3:
$scope.range = 7;
break;
default:
$scope.range = 0;
$scope.filteredItems = [{ 0: new Date() }];
$scope.gridOptions.filterOptions.filterText = '';
break;
}
for (var i = 0; i < $scope.range; i++) {
currentDate.subtractDays(i);
difDate = currentDate;
$scope.difDate = $filter('date')(difDate, 'MM/dd/yyyy');
$scope.filteredItems.push($scope.difDate);
currentDate = new Date();
}
$scope.searchingFilters.filteredDate = $scope.filteredItems;
$scope.setFilterText();
};
$scope.setFilterText = function () {
$scope.gridOptions.filterOptions.filterText = 'Submit Time:' + $scope.searchingFilters.filteredDate[0] + '|' + $scope.searchingFilters.filteredDate[1] + '|' +
$scope.searchingFilters.filteredDate[2] + '|' + $scope.searchingFilters.filteredDate[3] + '|' + $scope.searchingFilters.filteredDate[4] +
'|' + $scope.searchingFilters.filteredDate[5] + '|' + $scope.searchingFilters.filteredDate[6] + ';';
}

Related

Display day with hours in Angularjs

Here are date and time.
Date 2018-05-25T10:35:04.000Z
Expected Output = 3 days 12 hours
I want to display date and time same like as a give above. Currently, I am using moment.js. Is there any way to display like above?
Alternatively to Zvi's suggestion, you could use the AngularJS date filter
Say in your controller you have 2 dates:
app.controller('AppCtrl', function($scope) {
ctrl = this;
ctrl.date1 = new Date("2018-05-22T22:35:04.000Z");
ctrl.date2 = new Date("2018-05-25T10:35:04.000Z");
});
And in HTML, you'd display the difference with the date filter:
{{ctrl.date2 - ctrl.date1 | date:"dd 'days' HH 'hours'"}}
Here's a working JSFiddle example
You can use this moment-precise-range.
Here's full example:
calcDiff = (date : string) => {
let diff_in_string = '';
let original_date = moment(date);
let date_time_now = moment();
let diff_in_object: any = moment-presice.preciseDiffBetweenDates(original_date, date_time_now, true);
if (diff_in_object.days > 0) {
diff_in_string = diff_in_string + diff_in_object.days + ' ';
if (diff_in_object.days === 1) {
diff_in_string += 'Day '
} else {
diff_in_string += 'Days '
}
}
if (diff_in_object.hours > 0) {
if (diff_in_object.days > 0) {
diff_in_string += 'and ' + diff_in_object.hours + ' '
} else {
diff_in_string += diff_in_object.hours + ' '
}
if (diff_in_object.hours === 1) {
diff_in_string += 'Hour '
} else {
diff_in_string += 'Hours '
}
}
diff_in_string += 'ago'
return diff_in_string;
}
You should consider using The HumanizeDuration library (you can check this answer).
It allows you to translate in any language you want the difference between two dates the way you want.
For example :
var yourdate= moment().set({'year': 2018, 'month': 5, 'day': 22});
var today = moment();
var duration = moment.duration(today.diff(yourdate));
var humanized = humanizeDuration(duration, { units: ['d', 'h'], language: language, round: true });
You can also format it with spacers, etc.

Angularjs: automatically update date diff?

I'm using angular 1.6.1 and I would like to update date diff automatically.
Here is the service that calculate date diff
angular.module("utils", [])
.service('utils', function ($location) {
this.correctDate = function(date) {
var s = date.replace('T', ' ');
return s.replace('.000Z', ' ');
}
this.dateDiff = function(date) {
var oneMinute = 60*1000;
var oneHour = 60*60*1000;
var oneDay = 24*60*60*1000;
var oneWeek = 24*60*60*1000*7;
var oneMonth = 24*60*60*1000*30;
var now = new Date();
var d = new Date(date);
var tNow = now.getTime();
var tDate = d.getTime();
if((tNow - tDate) / oneMonth >= 1){
return Math.floor((tNow - tDate) / oneMonth) + " months";
}
if((tNow - tDate) / oneDay >= 1){
return Math.floor((tNow - tDate) / oneDay) + " days";
}
if((tNow - tDate) / oneHour >= 1){
return Math.floor((tNow - tDate) / oneHour) + " hours";
}
if((tNow - tDate) / oneMinute >= 1){
return Math.floor((tNow - tDate) / oneMinute) + " minutes";
}
return "now";
}
})
Here is the view
<div class="post__date">
<time class="published">
{{dateDiff(correctDate(article.createdAt))}}
</time>
</div>
Now date diff is updated only if I make a click anywhere in app and I even don't understand why. So I have 2 questions :
1) Why does date diff is updated everytime I click anywhere in my angular app ? (Does angular trigger a full digest everytime I click anywhere in app ?)
2) How to update automatically date diff ?

If element exists by data attribute

I have a number of spans being created with ng-repeat:
<div class="row" id="year-1">
<span class="event" ng-repeat="(key, event) in events" event data-start={{event.date_start}} data-end={{event.date_end}} data-key={{key}} data-type={{event.role}}>
{{event.title}} - {{event.date_start}}
</span>
</div>
I have a directive for event which does a number of things to manipulate each span created accordingly. One of the things is to check is there are other spans with data-type="X".
In my directive, if I do the following, I get all the span's with class 'event':
var parentid = angular.element(document.getElementById('year-1'));
var typeExists = parentid[0].querySelectorAll('.event')[0];
But if I try to narrow it down to data-type="X" such as the following, I get undefined.
var typeExists = parentid[0].querySelectorAll('.event[data-type="' + attr.type + '"]')[0];
Am I overlooking something? Full directive:
angular.module("app").directive("event", function() {
return {
link: function(scope, element, attr) {
var getStart = attr.start.split('-'),
getEnd = attr.end.split('-'),
getKey = attr.key;
getHeight = element[0].offsetHeight;
var parentid = angular.element(document.getElementById('year-1')),
backgroundParent = angular.element(document.getElementsByClassName('year-current'));
// get the month event starts with
var monthStart = angular.element(document.querySelectorAll('[data-location="' + getStart[1] + '"]'));
// get the month event ends with
var monthEnd = angular.element(document.querySelectorAll('[data-location="' + getEnd[1] + '"]'));
// how many events do we have
var eventcount = angular.element(document.getElementsByClassName('event'));
// get width of events container
var eventsContainer = angular.element(document.getElementById('events'));
// does this type exist already, if so get its top
var typeExists = parentid[0].querySelectorAll('.event')[0];
console.log(typeExists);
if(monthStart.length > 0) {
// how many days in start month
var daysStart = getDaysInMonth(getStart[1], getStart[0]),
daysStartPercent = (getStart[2] / daysStart.length);
// how many days in end month
var daysEnd = getDaysInMonth(getEnd[1], getEnd[0]),
daysEndPercent = (getEnd[2] / daysEnd.length);
// determine left starting %
var elementLeft = ((monthStart[0].offsetLeft + (monthStart[0].clientWidth * daysStartPercent)) / eventsContainer[0].clientWidth) * 100;
// determine width in %
var elementRight = ((monthEnd[0].offsetLeft + (monthEnd[0].clientWidth * daysEndPercent)) / eventsContainer[0].clientWidth) * 100;
var width = (elementRight - elementLeft);
// get the background color for this role
var background = angular.element(document.querySelector('.role[data-type="' + attr.type + '"]'))[0].getAttribute('data-background');
element.css({
'left': elementLeft + '%',
'top' : parentid[0].offsetHeight + 'px',
'width': width + '%',
'background': background
});
element.addClass('stretchRight');
parentid.css({'height': parentid[0].offsetHeight + getHeight + 'px'});
backgroundParent.css({'height': parentid[0].offsetHeight + getHeight + 'px'});
} else {
element.css({ 'display': 'none' });
}
}
}
});
I was able to recreate the problem you saw and found that you need to change your line from this:
var typeExists = parentid[0].querySelectorAll('.event[data-type="' + attr.type + '"]')[0];
to this:
var typeExists = parentid.querySelectorAll('.event[data-type="' + attr.type + '"]')[0];
Remove the [0] from your parentid reference because you only have a single element with ID of year-1 which means it's not an array.

Angular JS radio lists and dropdowns. Issue with dropdowns changing value of radio list value when triggered

I think I have a logic issue with my Angular that I need some help on.
We have a service that connects to a DB that gets saved values so our Angular form can get the values and use them. That is all set up.
My issue is, in our form we have 1 radio button list using an ng-repeat to generate the list and 3 dropdown lists. Our dropdown lists are triggering and update function to update the values of themselves. We are showing and hiding the dropdown menus based on the radio button lists selection (I will post the code). This should be noted we are using Umbraco CMS that this control is being used for, but this is not the actual issue.
The issue is, we console our response the value of the radio button list outputs fine to the selection we chose, BUT when I select one of the dropdown list items, the value of the dropdown list returns to the previously selected value. Any help figuring this out would be greatly appreciated.
Code is below:
my.controller.js
angular.module("umbraco")
.controller("Our.GalaxyEventSelectorController", function ($scope, $routeParams, notificationsService, GalaxyEventSelectorResource) {
$scope.emptyList = [{}];
$scope.ETypeRadio = { 0: "NA", 1: "RepeatingTimedEvent", 2: "RepeatSingleDayEvent", 3: "SingleTimedEvent" };
GalaxyEventSelectorResource.getEventById($routeParams.id, $scope.model.alias).then(function (response) {
// console.log("REsponse: " + response);
console.log("intial load on DOM load")
var resp = (response.data.indexOf("{") > -1 ? angular.fromJson(JSON.parse(response.data)) : "");
$scope.previousSelectedTypeOfEvent = (resp == "" ? "" : resp.TypeOfEvent);
$scope.previousSelectedEventTypeId = (resp == "" ? 0 : resp.EventTypeId);
$scope.previousSelectedEventName = (resp == "" ? "" : resp.EventName);
$scope.previousSelectedEventId = (resp == "" ? 0 : resp.EventId);
$scope.previousSelectedEventDate = (resp == "" ? "" : resp.EventDate);
//This loads the selection the initial time.
$scope.selectedTypeOfEvent = $scope.previousSelectedTypeOfEvent; //THIS Gets the previous radio button selection
//init EventTypeId dropdown
var initIdx = 0;
$scope.getEventTypeIds(true, initIdx);
}).then(function() {
//init Name dropdown
var initIdx = -1;
$scope.getEventNames(true, initIdx, $scope.previousSelectedEventTypeId);
}).then(function () {
//init EventIds and Dates dropdowns
var initIdx = -1;
$scope.getEventIdsAndDates(true, initIdx, $scope.previousSelectedEventName);
$scope.getEventDatesOnly(true, initIdx, $scope.previousSelectedEventName);
}).then(function () {
// init model values
$scope.typeOfEventRadioSelected($scope.previousSelectedTypeOfEvent);
$scope.updateModelValue(
$scope.previousSelectedTypeOfEvent,
$scope.previousSelectedEventTypeId,
$scope.previousSelectedEventName,
$scope.previousSelectedEventId,
$scope.previousSelectedEventDate);
});
$scope.updateModelValue = function (typeOfEvent, eventTypeId, eventName, eventId, eventDate) {
$scope.model.value = {
TypeOfEvent: typeOfEvent,
EventTypeId: eventTypeId,
EventName: eventName,
EventId: eventId,
EventDate: eventDate
}
console.log("Scope load and scope change");
console.log($scope.model.value);
};
//not used...attempting to make the visual nice onscreen but causes unpredictable loss of data. could be useful
$scope.addSpacesToCamelCase = function(txt) {
return txt.replace(/([a-z])([A-Z])/g, "$1 $2");
}
$scope.typeOfEventRadioSelected = function(selectedTypeOfEvent) {
//triggered when radio button selected.
var typeOfEvent = selectedTypeOfEvent;
var eventTypeId = $scope.selectedGalaxyEventTypeId != null
? $scope.selectedGalaxyEventTypeId.EventTypeId
: "";
var eventName = "";
var eventId = "";
var eventDate = "";
var initIdx = -1;
$("#GalaxyEventNameDdl").show();
$("#GalaxyEventIdDdl").show();
$("#GalaxyEventDatesDdl").show();
switch (selectedTypeOfEvent) {
case "NA":
$scope.getEventNames(false, initIdx, eventTypeId);
$scope.GalaxyEventIdsAndDates = $scope.initial;
$scope.GalaxyEventDates = $scope.initial;
$("#GalaxyEventNameDdl").hide();
$("#GalaxyEventIdDdl").hide();
$("#GalaxyEventDatesDdl").hide();
break;
case "RepeatingTimedEvent":
//$scope.getEventNames(false, initIdx, eventTypeId);
eventName = $scope.selectedGalaxyEventName != null
? $scope.selectedGalaxyEventName.EventName
: "";
$scope.GalaxyEventIdsAndDates = $scope.initial;
$scope.GalaxyEventDates = $scope.initial;
$("#GalaxyEventIdDdl").hide();
$("#GalaxyEventDatesDdl").hide();
break;
case "RepeatSingleDayEvent":
//$scope.getEventNames(false, initIdx, eventTypeId);
eventName = $scope.selectedGalaxyEventName != null
? $scope.selectedGalaxyEventName.EventName
: "";
$scope.getEventDatesOnly(false, initIdx, eventName);
eventDate = $scope.selectedGalaxyEventDates != null
? $scope.selectedGalaxyEventDates.EventDate
: "";
$scope.GalaxyEventIdsAndDates = $scope.initial;
$("#GalaxyEventIdDdl").hide();
break;
case "SingleTimedEvent":
//$scope.getEventNames(false, initIdx, eventTypeId);
eventName = $scope.selectedGalaxyEventName != null
? $scope.selectedGalaxyEventName.EventName
: "";
$scope.getEventIdsAndDates(false, initIdx, eventName);
eventId = $scope.selectedGalaxyEventId != null
? $scope.selectedGalaxyEventId.EventId
: "";
eventDate = $scope.selectedGalaxyEventDates != null
? $scope.selectedGalaxyEventDates.EventDate
: "";
$scope.GalaxyEventDates = $scope.initial;
$("#GalaxyEventDatesDdl").hide();
break;
}
$scope.updateModelValue(
typeOfEvent,
eventTypeId,
eventName,
eventId,
eventDate
);
};
$scope.eventTypeIDSelected = function (selectedEventTypeId) {
console.log("Event Type ID selected");
//triggered when EventTypeId dropdown is changed. update the datatype value & provide names in name dropdown
var initIdx = -1;
$scope.getEventNames(false, initIdx, selectedEventTypeId.EventTypeId);
$scope.GalaxyEventIdsAndDates = $scope.initial;// NOT WORKING TO WIPE THE LIST...WHY?
$scope.GalaxyEventDates = $scope.initial; // NOT WORKING TO WIPE THE LIST...WHY?
$scope.updateModelValue(
$scope.selectedTypeOfEvent,
selectedEventTypeId.EventTypeId,
"",
"",
"");
};
$scope.eventNameSelected = function (selectedName) {
//triggered when eventName dropdown is changed. update the datatype value & provide dates and ids in dropdowns
var initIdx = -1;
$scope.getEventIdsAndDates(false, initIdx, selectedName.EventName);
$scope.getEventDatesOnly(false, initIdx, selectedName.EventName);
$scope.updateModelValue(
$scope.selectedTypeOfEvent,
$scope.selectedGalaxyEventTypeId.EventTypeId,
selectedName.EventName,
"",
"");
};
$scope.eventIdSelected = function (selectedEventId) {
//triggered when eventId dropdown is changed. update the datatype value & init date dropdown
var initIdx = -1;
$scope.getEventDatesOnly(false, initIdx, $scope.selectedGalaxyEventName.EventName);
$scope.updateModelValue(
$scope.selectedTypeOfEvent,
$scope.selectedGalaxyEventTypeId.EventTypeId,
$scope.selectedGalaxyEventName.EventName,
selectedEventId.EventId,
selectedEventId.EventDate);
};
$scope.eventDatesSelected = function (selectedEventDate) {
//triggered when eventDate dropdown is changed. update the datatype value & init Id dropdown
var initIdx = -1;
$scope.getEventIdsAndDates(false, initIdx, $scope.selectedGalaxyEventName.EventName);
$scope.updateModelValue(
$scope.selectedTypeOfEvent,
$scope.selectedGalaxyEventTypeId.EventTypeId,
$scope.selectedGalaxyEventName.EventName,
"",
selectedEventDate.EventDate);
};
$scope.getEventTypeIds = function (initVal, idx) {
GalaxyEventSelectorResource.getEventIds().then(function (eventTypeIds) {
$scope.GalaxyEventTypes = eventTypeIds.data;
console.log("successfully retrieved galaxyeventids");
//console.log("Event Type IDs:", eventTypeIds.data[0]);
if (initVal) {
$scope.GalaxyEventTypes.some(function (x, i) {
if (x.EventTypeId == $scope.previousSelectedEventTypeId) {
idx = i;
return true;
}
});
}
$scope.selectedGalaxyEventTypeId = $scope.GalaxyEventTypes[idx];
},
function (data) {
console.log("failed to retrieve galaxyeventids");
});
};
$scope.getEventNames = function (initVal, idx, eventTypeId) {
GalaxyEventSelectorResource.getEventNamesByEventId(eventTypeId).then(function (eventNames) {
$scope.GalaxyEventNames = eventNames.data;
console.log("successfully retrieved galaxyeventnames");
if (initVal) {
$scope.GalaxyEventNames.some(function (x, i) {
if (x.EventName == $scope.previousSelectedEventName) {
idx = i;
return true;
}
});
}
$scope.selectedGalaxyEventName = $scope.GalaxyEventNames[idx];
},
function (data) {
console.log("failed to retrieve galaxyeventnames");
});
};
$scope.getEventIdsAndDates = function(initVal, idx, eventName) {
GalaxyEventSelectorResource.getEventIdsAndDatesByEventName(eventName).then(function (eventIds) {
$scope.GalaxyEventIdsAndDates = eventIds.data;
console.log("successfully retrieved galaxyIdsanddates");
if (initVal) {
$scope.GalaxyEventIdsAndDates.some(function(x, i) {
if (x.EventId == $scope.previousSelectedEventId) {
idx = i;
return true;
}
});
}
$scope.selectedGalaxyEventId = $scope.GalaxyEventIdsAndDates[idx];
},
function(data) {
console.log("failed to retrieve galaxyIdsanddates");
});
};
$scope.getEventDatesOnly = function (initVal, idx, eventName) {
GalaxyEventSelectorResource.getEventDatesByEventName(eventName).then(function (eventDates) {
$scope.GalaxyEventDates = eventDates.data;
console.log("successfully retrieved galaxydates");
if (initVal) {
$scope.GalaxyEventDates.some(function (x, i) {
if (x.EventDate == $scope.previousSelectedEventDate) {
idx = i;
return true;
}
});
}
$scope.selectedGalaxyEventDates = $scope.GalaxyEventDates[idx];
},
function (data) {
console.log("failed to retrieve galaxydates");
});
};
EventSelector.html
<div ng-controller="Our.GalaxyEventSelectorController">
<h5>Select Type of Event</h5>
<!--<div>-->
<div ng-repeat="n in ETypeRadio">
<!-- need to use ng-click as an ng-change on an ng-repeat element does not work -->
<!-- <input type="radio" ng-model="selectedTypeOfEvent" name="tOfE" ng-click="typeOfEventRadioSelected(selectedTypeOfEvent)" ng-value="{{n}}" value="{{n}}" />{{n}}-->
<input type="radio" ng-model="selectedTypeOfEvent" name="tOfE" ng-click="typeOfEventRadioSelected(selectedTypeOfEvent)" ng-value="{{n}}" value="{{n}}" />{{n}}
</div>
<!--</div>-->
<h5>Galaxy Event Type</h5>
<select ng-model="selectedGalaxyEventTypeId" ng-change="eventTypeIDSelected(selectedGalaxyEventTypeId)" ng-options="eventType.EventTypeId + ' - ' + eventType.EventTypeIdDescription for eventType in GalaxyEventTypes track by eventType.EventTypeId"></select>
<br/>
<div id="GalaxyEventNameDdl">
<h5>Galaxy Event Name</h5>
<select ng-model="selectedGalaxyEventName" ng-change="eventNameSelected(selectedGalaxyEventName)" ng-options="name.EventName for name in GalaxyEventNames">
<option value=""> --- Select Event Name ---</option>
</select>
<br />
</div>
<div id="GalaxyEventIdDdl">
<h5>Galaxy Event Id</h5>
<select data-ng-model="selectedGalaxyEventId" ng-change="eventIdSelected(selectedGalaxyEventId)" ng-options="id.EventId + ' - ' + id.EventDate for id in GalaxyEventIdsAndDates track by id.EventId">
<option value=""></option>
</select>
<br />
</div>
<div id="GalaxyEventDatesDdl">
<h5>Galaxy Event Date</h5>
<select data-ng-model="selectedGalaxyEventDates" ng-change="eventDatesSelected(selectedGalaxyEventDates)" ng-options="date.EventDate for date in GalaxyEventDates">
<option value=""></option>
</select>
</div>
We have a .resource.js but this is just performing gets to load our original data from our service.
angular.module("umbraco.resources").factory("GalaxyEventSelectorResource", function ($http) {
var galaxyEventService = {};
galaxyEventService.getEventIds = function () {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetAllEventTypeIDs");
};
galaxyEventService.getEventById = function (id, propertyType) {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventById?id=" + id + "&propertyType=" + propertyType);
};
galaxyEventService.getEventNamesByEventId = function(eventId) {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventNamesByEventId?eventId=" + eventId);
};
galaxyEventService.getEventIdsAndDatesByEventName = function(eventName) {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventIdsAndDatesByEventName?eventName=" + eventName);
};
galaxyEventService.getEventDatesByEventName = function(eventName) {
return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventDatesByEventName?eventName=" + eventName);
};

Angularjs Directive with ngModel

I've got a javascript function that we use in a legacy system that alters the format of an input field as you type;
function checkValidDate(dateStr) {
if (dateStr && dateStr != '') {
dateStr = dateStr.replace('/', '');
dateStr = dateStr.replace('/', '');
var d_f_m = dateStr;
var d_f_d = dateStr;
var d_f_y = dateStr;
var err_msg = '';
var d_s_day = d_f_d.slice(0, 2);
d_s_day = d_s_day + "/";
var d_s_month = d_f_m.slice(2, 4);
d_s_month = d_s_month + "/";
var d_s_year = d_f_y.slice(4, 8);
//Now we check the year to see if it is only 2 digis, if is, add 2 more
if (d_s_year.length == 2) {
d_s_year = '19' + d_s_year;
}
return d_s_day + d_s_month + d_s_year;
} else {
return null;
}
}
I've been trying to convert this function to an angularjs directive using ngModel but I just can't seem to sort it out. Would anyone know how to convert this to an angular directive?
Many thanks!
Not sure if you wanted it validated as you type or after you leave a field. Either can work, though the below is implemented to validate after you leave the field (lose focus).
The existing algorithm was used, though it looks like it handles only very specific cases (i.e. 2 digit day, 2 digit month, 2-4 digit year) and could be improved. For the moment, it was copied as is. JSFiddle is here http://jsfiddle.net/pSh4R/18/
HTML:
<div ng-app='app'>
Please enter a date
<br/>
<input type='text' dateformat ng-model='myDate'></input>
(Hit TAB when done)
<hr/>
Model Value : {{myDate}}
</div>
Directive Declaration:
var app = angular.module('app',[]);
app.directive('dateformat', function(){
return {
restrict : 'A',
scope : {
dateStr : '=ngModel'
},
link : function(scope, element){
element.bind('focusout', function (){
scope.$apply(function(){
scope.dateStr = checkValidDate(scope.dateStr);
});
});
function checkValidDate(dateStr) {
if (dateStr && dateStr != '') {
dateStr = dateStr.replace('/', '');
dateStr = dateStr.replace('/', '');
var d_f_m = dateStr;
var d_f_d = dateStr;
var d_f_y = dateStr;
var err_msg = '';
var d_s_day = d_f_d.slice(0, 2);
d_s_day = d_s_day + "/";
var d_s_month = d_f_m.slice(2, 4);
d_s_month = d_s_month + "/";
var d_s_year = d_f_y.slice(4, 8);
//Now we check the year to see if it is only 2 digis, if is, add 2 more
if (d_s_year.length == 2) {
d_s_year = '19' + d_s_year;
}
return d_s_day + d_s_month + d_s_year;
} else {
return null;
}
}
}
};
})
There are a billion ways to do what you want. Here is a quick solution I threw together to get your started:
JS:
var app = angular.module('myApp', []);
app.directive('dateValidator', function() {
return function(scope, element, attrs) {
// Watch for changes to the date model
scope.$watch('date', function(newVal, oldVal) {
if (!angular.equals(newVal, oldVal)) {
var formattedDate = checkValidDate(newVal);
if (formattedDate) {
element.text(formattedDate);
}
}
});
});
});
HTML:
<input type="text" date-validator date="myDate" ng-model="myDate" />
I recommend that you write a custom angular validator. There are some good articles on it. Here is one that I like:
Form Validation with AngularJS
The form and its containing fields have special properties appended to them that you can leverage for binding expressions and client-side validation:
$pristine, $dirty, $valid, $error

Resources