Develop Reference

How to add a 'Business Year' condition to the AG Grid filter?

We use AG Grid and I can see that in the date filter we have 'This Week', 'This Quarter', 'This Month', 'This Year' etc. But our year is a business year that runs from April to March. How can I add that option to the filter?

Based on the date filters that you list, I am fairly sure that you are using AdapTable - our AG Grid add-on.
If so, then you simply need to add a Custom Predicate in the AdapTableQLOptions section of AdapTable Options and make it available for all Date column filters.
Based on your question something like this should do the trick:
adaptableQLOptions: {
customPredicateDefs: [
{
id: 'business_year',
moduleScope: ['filter'],
columnScope: {
DataTypes: ['Date']
},
label: 'Business Year',
handler: ({ value, inputs }) => {
const businessYearStart: Date = new Date(2022, 3, 1);
const businessYeaEnd: Date = new Date(2023, 2, 31);
return value >= businessYearStart && value <= businessYeaEnd;
},
},
],
}
This will make that filter appear in Quick Filter bar dropdown for all Column Filters.
See more at: https://docs.adaptabletools.com/guide/adaptable-ql-predicate-custom

buttonText on 'today' view not updating

I'm updating the buttonText for 'today' in views and its not working.
Updating the buttonText for the other buttons works fine.
fullcalendar: {
firstHour: 9,
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month,listMonth,'
},
slotMinutes: 30,
theme:false,
views: {
today: {buttonText: 'Today'},
listWeek: {buttonText: 'Week'},
listDay: {buttonText: 'Day'},
listMonth: {buttonText: 'List'},
month: {buttonText: 'Month'}
},
defaultView: 'month'
},
'today' should be capitalized but its not...

Here's demo using your code: http://jsfiddle.net/ocvpsLgt/ . The "today" button you're seeing is the one defined in the left area of the header settings. It's a standard navigation button defined by fullCalendar which changes the date to the current today. It has nothing to do with the custom view you tried to define which you named as today.
You can't define a view which has the same name as a standard navigation button - if you put that name into the header, fullCalendar will just think you are referring to the standard button, and display that. In any case, it makes no sense to define a view called "Today" - a view describes the layout of the calendar, not a particular date. Today's date can be reached from any type of view. You've already got "listDay" which will cover a single day - any day, including today. I can't see why you'd want another day view, unless it was a different type, such as "agendaDay".
If you just want to capitalise the name of the standard "today" button, then that can be done via the global buttonText setting:
buttonText: { today: "Today" }
Demo: http://jsfiddle.net/ocvpsLgt/1/

Heres for lists as well
buttonText :
{
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
listMonth: 'List Month',
listYear: 'List Year',
listWeek: 'List Week,
listDay: 'List Day'
}
here->https://fullcalendar.io/docs/buttonText

Extjs Set value to end timefield with respect to input in start timefield

I have a question.
I have 2 timeFields in my form, startTime and endTime. On selection of time from startTime I need the endTime to be filled with a value which is 2 hrs greater than the selected value in startTime field.
Can anyone help me out.
I'm using ext 4.2 and sencha architect.
var win = this.getRfRWindow();
var form = win.down('form');
var startTime = win.down('form').down('timefield[name=sTime]');
var endTime = win.down('form').down('timefield[name=eTime]');
endTime.clearValue();
endTime.setMinValue(startTime.getValue());
And I know this is how to set minValue.

I am not 100% sure if this is what you are trying to do but this code snippet will use the value set in one, and set the value in the other to 2 hours later. It will also set the min value to the start time selected.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'Time Card',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'timefield',
name: 'in',
fieldLabel: 'Time In',
increment: 30,
anchor: '100%',
listeners:{
select: function(tf, record, eOpts){
// when selected, we want to use the same functionality as blur or you can change it.
tf.fireEvent('blur',tf);
},
// this is fired when the value is changed in the start field.
blur:function(tf, e,eOpts){
// get the value in the field.
var value = tf.getValue();
// if the value isn't empty, and is valid time.
if (value != ''){
var fullValue = new Date(value),
hours = fullValue.getHours(), // get hours
minutes = fullValue.getMinutes(); // get minutes
//create a new datetime object using hours / minutes from selected value
var timeOut = new Date();
timeOut.setHours(hours+2);
timeOut.setMinutes(minutes);
// get the out and set the value.
var timeOutField = tf.up('panel').down('timefield[name=out]');
timeOutField.setValue(timeOut);
//set min value to what was in the start time.
timeOutField.setMinValue(tf.getValue());
}
}
}
},
{
xtype: 'timefield',
name: 'out',
fieldLabel: 'Time Out',
increment: 30,
anchor: '100%'
}
]
}).show();
}
});
See Fiddle Here:
https://fiddle.sencha.com/#fiddle/16up

Considering you have two time fields in a panel, you only need to listen to select event of the first time field and get the second time field using component query and set its value accordingly.
Here is a working code example:
items: [
{
xtype: 'timefield',
fieldLabel: 'Start Time',
name: 'sTime',
editable: false,
increment: 30,
anchor: '100%',
listeners:{
// This event is fired after user selects a value from drop down menu
select: function(combo, record, eOpts){
// Creating Date object according to new Start date
var dateForNewStartTime = new Date(combo.getValue());
//create a new datetime object using selected time
var dateForEndTime = new Date();
dateForEndTime.setHours(dateForNewStartTime.getHours()+2); // Adding 2 more hours
dateForEndTime.setMinutes(dateForNewStartTime.getMinutes());
// Getting and Setting value (you can change this component query according to your requirements)
var timeOutField = Ext.ComponentQuery.query('timefield[name=eTime]')[0];
timeOutField.setValue(dateForEndTime);
// Setting minimum slectable value for End Time field accordingly
timeOutField.setMinimumValue(combo.getValue());
}
}
},
{
xtype: 'timefield',
fieldLabel: 'End Time',
name: 'eTime',
increment: 30,
editable: false,
anchor: '100%'
}
]

You can use ViewModel + Formulas to achieve your requirement. ViewModels are fundamental blocks in ExtJs and help you do model, control binding. It supports two-way binding, meaning if one changes other follows the change.
In your case you can have a formula to derive EndTime based on StartDate and since these two are model binding, the controls will automatically follow the update in date values.
Look at this sample code I've created to demonstrate the ViewModel + Formula example usage
The same is reproduced here for quicker reference
Ext.define('MyApp.view.TimeViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.timeviewmodel',
data: {
startTime: new Date(),
endTime: new Date()
},
formulas: {
getEndDate: function(get){
console.log(Ext.Date.add(get('startTime'), Ext.Date.HOUR, 2));
return Ext.Date.add(get('startTime'), Ext.Date.HOUR, 2);
}
}
});
Ext.define('dualDatePanel', {
extend: 'Ext.container.Container',
viewModel: {
type: 'timeviewmodel'
},
items: [{
xtype: 'timefield',
bind: '{startTime}'
},
{
xtype: 'timefield',
bind: '{getEndDate}'
}]
});
Ext.create('dualDatePanel', {
renderTo: Ext.getBody(),
width: 100,
height: 32,
emptyText: 'Binding Failed'
});

Change Google-Visualization Timeline Date/Time-Format

I have a problem formatting the horizontal axis in my google timeline chart. The problem is that I have different data sets where the time range can be days or hours or maybe minutes. The timeline chart formats its hAxis on its own but it uses american date format. I want to have the ISO date format (e.g. 22/07/2015) and time like hh:mm. I saw an formating example for the google corechart on the docs: https://developers.google.com/chart/interactive/docs/datesandtimes (last one on page)
I tried to apply it to my problem:
https://jsfiddle.net/ezcxd61m/2/
var options = {
width: 900,
height: 500,
legend: {position: 'none'},
enableInteractivity: false,
chartArea: {
width: '85%'
},
hAxis: {
viewWindow: {
min: new Date(2013, 9, 13),
max: new Date(2015, 0, 3, 1)
},
gridlines: {
count: -1,
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['HH:mm', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
},
minorGridlines: {
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['hh:mm:ss', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
}
}
};
But it seems that it doesn't work for the timeline chart. Can anyone help me?
Thanks,
Rob

I had a similar issue, starting from your first attempt I guess I managed to get what you were asking for. Just change the hAxis in the options var as follows:
hAxis: {
format: 'dd.MM.yyyy HH:MM'
}
I've applied the changes in the url you provided
https://jsfiddle.net/ezcxd61m/2/

You will need to set the hAxis.format() depending on the thresholds you set.
If this threshold is minutes, set the hAxis one way.
If this threshold is hours, set it another, and if its days, or weeks, or months or years set it a different way.
Just check the threshold condition before writing the chart, and apply it to the options object.

Set value of datefield from DB

I have a datefield in my form which is:
{
xtype: 'datefield',
id : 'usap3',
anchor: '100%',
name: 'stockAsOn',
format: 'd/m/Y',
width: 199
}
I get a value from the DB and when I try to set the same in this field, it won't display.
alert(stock_as_on); //17-OCT-14
parsed_stock_as_on = Ext.Date.parse(stock_as_on, "Ymd");
Ext.getCmp('usap3').setValue(parsed_stock_as_on);
I tried the above code after researching through various sources, but in vain.
What should I do to display the datefield with the value set in it?

Just add altFormats: 'd-M-y' to your date field. You don't need to use the Ext.Date.parse function because the setValue will work with a string. But if you want to keep parsing your date, just change the mask to 'd-M-Y'.
So:
{
xtype: 'datefield',
id : 'usap3',
anchor: '100%',
name: 'stockAsOn',
format: 'd/m/Y',
altFormats: 'd-M-y',
width: 199
}
alert(stock_as_on); //17-OCT-14
//parsed_stock_as_on = Ext.Date.parse(stock_as_on, "d-M-y");
Ext.getCmp('usap3').setValue(stock_as_on);