How do I calculate age from a given date of birth in ExtJS Framework? - extjs

Am trying to calculate age from a given date of birth in extjs, Anyone one can help?
I tried creating a function but it never worked for me

The method Ext.Date.diff should solve this problem.
In your case the first param should be your "birthday" and the second value the current date. As unit you want the year.
Here is working code:
Ext.Date.diff(new Date('10-20-2000'), new Date(), 'y')
This should return the number 22. So your Age would be 22.
Here is a working example to show this example in an extjs form: sencha fiddle

Related

How to map from an Array into a Google react Chart (React)?

I actually face a problem with react I did not expect so far. Actually I have a google-react-chart Calender and an array, that I have parsed from different Date formats in one. Now i want to parse through my array and to map it's data to my google-react-chart calender. Unfortunatley I did most of my coding on the web in php so far, and guys, I don't have any idea how I can bring this construction to work :))
I tried to replace my hard coded data with a mapping function, but - as you may know - that only leads to a parsing error :)
So my simple question is: How can I process my arrayData to my Google react chart calender?
//did not work
mydateArray.map((item) =>{JSON.parse{item)}
The problem is that you are trying to parse a string, instead of a JSON object.
If you are getting this array from PHP, try passing it as a json_encode($variable), but not with the new Date() class. You can just pass it as the date string itself in the first position and the amount in the second position of the array;
Assuming you have the date and the data as something like this in PHP (before the json_encode):
$variable = [['MM/DD/YYYY', 50126],['MM/DD/YYY', 50126], and so on];
After you pass to React your PHP variable (via fetch or the dataset),
you can do something like:
mydateArray = JSON.parse(phpVariable);
and THEN, you can map it:
mydateArray.map(item => [new Date(item[0]), item[1]);
Just some Date warnings:
- Date in javascript must be constructed using Month/Day/Year, unfortunatelly. There is no createFromFormat, like PHP.
- The date ranges from 0 to 11, so october (10th month) must be written as 09/day/year, and so on.

flatpickr: disable dates previously picked

I am working on a visa calculator and want the user to be able to pick multiple trips (picking entry and exit dates in separate fields) that will be added. I am only using JS.
When creating a new trip, two input fields open up, that get their own individual ids. When showing the calendar, I want to disable all previously picked dates (and dates in between of course). How can I dynamically achieve that?
newFpEntry = flatpickr(#entryDate${entryDateNum},
{maxDate: new Date(entryDate).fp_incr(timeFrameValueCalendar),
disable: [
???
]
});
Hope I described my problem well. I appreciate any idea!
So, I figured something out.
I pushed each new date pair (entry and exit) in form of an object into an array (previously defined), using flatpickr's syntax,
assigning the key from: to the value newEntryDate and the key to: to the value newExitDate
allBlockedDates.push({from: newEntryDate, to: newExitDate});
I inserted the array into flatpickr
newFpEntry = flatpickr(`#entryDate${entryDateNum}`,
{
disable: allBlockedDates
});
Hope this might be helpful for anyone else struggling with a similar problem.

Date Parsing with Timezone AngularJS

In have this line in my code.
<span> {{messages.created_time}}</span>
This is the ouput
2017-04-29T12:46:49+0000
However, I would like the ouput to be :
n minutes ago // if less than one hour following the user timezone
22:46 // if more or equal than one hour following the user timezone
SUN AT 22:46 // if more or equal than a day following the user timezone
APRIL 2 AT 22:46 // if more or equal than a week following the user timezone
I am using angular js.
Thanks
This should be simply done by using moment.js. Just use angular filter and apply your custom logic.
<span> {{messages.created_time | filterfn}}</span>
function filterfn(time){
// all custom logic for span text creation
return $moment(time);
}

Change the kendo calendar month names from shortform to fullform

In the kendo calendar control, the months names in the months view(where all the months of a specific year are listed) are shown in the short form instead of the full name. How can i change the names to full form only in this view. Ex: Mar instead of March.
I tried changing the date format using 'calendar.options.format' property, but it dosen't make any difference. Need help.
The calendar widget is programmed to always use the month abbreviation names. However, you can edit these names in the Kendo culture settings. Just be aware that they will change anywhere in Kendo that uses month abbreviations.
The abbreviations are stored in:
kendo.cultures.current.calendars.standard.months.namesAbbr
which is an array, indexed by the month. So you could set:
kendo.cultures.current.calendars.standard.months.namesAbbr[0] = "January";
kendo.cultures.current.calendars.standard.months.namesAbbr[1] = "February";
// ...etc...
Or, to make things easier, you can just copy the entire un-abbreviated months array to the abbreviated array, instead of setting each individual month:
kendo.cultures.current.calendars.standard.months.namesAbbr = kendo.cultures.current.calendars.standard.months.names;
However, that is still going to affect any other Kendo widgets that rely on the month abbreviations. A cleaner approach would be to make a custom culture for the Calendars to use. So in the initialization script for your page, after you include kendo.min.js, you can do this:
// just do this once on page load. copy current culture to a new one, and replace abbreviated months.
kendo.cultures.currentWithoutMonthAbbreviations = $.extend(true, {}, kendo.cultures.current);
kendo.cultures.currentWithoutMonthAbbreviations.name = "currentWithoutMonthAbbreviations";
kendo.cultures.currentWithoutMonthAbbreviations.calendars.standard.months.namesAbbr = kendo.cultures.currentWithoutMonthAbbreviations.calendars.standard.months.names;
Then the calendar widgets that you want to use full month names in, you can tell it to use your custom culture.
$("#datePicker").kendoDatePicker({
culture: "currentWithoutMonthAbbreviations"
});
You can do it with this script for days. I imagine the same would work for months:
var dayInfo = kendo.culture().calendar.days;
for (var i = 0; i < dayInfo.namesAbbr.length; i++) {
dayInfo.namesShort[i] = dayInfo.namesAbbr[i];
}

Extjs 4 date picker

I am using date picker of extjs 4.
I need to enable only three dates and
to disable everything else. How
do I do it ?
I would suggest starting with the API docs for Ext.menu.DatePicker, which I assume that you are doing.
However, if there are only a total of three static dates ever available, why not use something besides a date picker for the task?
If you are picking from a set of dates that could be stored in an array, I'd suggest reading this Sencha forum post about using DateField along with an array that disables all dates other than those specified in an array as follows:
dateArray = ["06/17/2007", "06/01/2007", "05/17/2007", "05/01/2007"];
dateField = new Ext.form.DateField({
format: "m/d/Y",
disabledDates: ["^(?!" + dateArray.join("|") + ").*$"],
disabledDatesText: "Date not available."
});

Resources