This is what am trying
fromdate:any = moment.utc.format(yyyy mm dd hh mm )
OnButtonExport(){
FileName: '{{fromdate}}'
}
And same as to date , how could i achieve fromadate and todate as filename.Thanks in advance
method exportDataAsCsv accept a lot of params, one of these is: fileName.
you can apply any name.
List of all properties here: https://www.ag-grid.com/javascript-data-grid/csv-export/#csvexportparams
function getParams() {
return {
fileName: `from: ${new Date()}, to: ${new Date()}`,
};
}
function onBtnExport() {
gridOptions.api.exportDataAsCsv(getParams());
}
Related
I need to display the date format depending on saved settings. I call axios to check saved date format:
axios
.get('/api/user/')
.then(response => (this.date_format = response.data.dateformat))
Then I added filters:
filters: {
moment: function (date) {
return moment(date).format(this.date_format);
}
},
And display it in HTML:
<p class="card-title"> Date of Birth:
<span[[dob | moment]]</span>
</p>
If I display [[data_format]] it shows correctly "DD/MM/YYYY". But when I try to console.log(this.date_format) console shows Undefined.
How to replace FormatNeeded in return moment(date).format(FormatNeeded); with this.date_format?
I finally found out how to solve the problem. When I call API, I set date_format to a global variable (probably not the correct term):
axios
.get('/api/user/')
.then(response => (this.date_format = response.data.dateformat))
.then(response => (window.date_format = this.date_format))
Then in filters, I use window.date_format not this.date_format:
filters: {
moment(date) {
var format_elem = window.date_format;
return moment(date).format(format_elem);
}
}
I have a graphql file with a date in ISO format. I would like to pass a variable instead of hardcoding the date. I would like to use Date.toISOstring() or some get current date method.
GRAPHQL FILE
let today = Date.toISOString() //or DateNow()
query guide {
tv {
guide(date: "2022-08-10T00:00:00Z <-replace--${today}") {
entries {
channel {
show{
......
}
}
}
}
}
}
Is this possible?
Use a GraphQL variable and pass it to your query. Here are the adjustment you have to make to the query. I am guessing the name of the date scalar here (DateTime), it might as well simply be String. Check the documentation of the API to get the correct name.
query guide($date: DateTime!) {
tv {
guide(date: $date) {
entries {
channel {
show{
......
}
}
}
}
}
}
If you use Svelte Apollo for example, you can pass the variables like this:
const guide = query(GUIDE_QUERY, {
variables: { date: new Date().toIsoString() },
});
data() {
return {
datePickerOptions: {
disabledDate(date) {
// console.log(form.installation_date); // undefined form
return date < this.form.ins_date ? this.form.ins_date : new Date();
},
},
}
This is saying form undefined i can understand can't initiaize form input inside data return how can i achieve this. disable other date if greater than first input date
please guide
As I said in my comment, you can't have a function returning something in your data so you have to shift your logic somewhere else. You can put that function in your methods:
data() {
return {
datePickerOptions: {
disabledDate: this.isDateDisabled
},
// rest of data
...
methods: {
isDateDisabled(date) {
return date < new Date(this.ruleForm.date1);
},
I am new to Vue.js
While rendering the html, I am invoking a Vue.filter. It should show a date in another format.
Below is my js file :
var details = new Vue({
el: '#ajax-article-detail',
data: {
message: 'Hello Vue.js!'
},
methods: {
showName: function() {
console.log('Calling showName...');
return 'Im Event';
}
}
});
Vue.filter('parseDate', function(date, format) {
if (date) {
//console.log(moment(String(date)).format(format));
return moment(String(date)).format(format);
}
});
and in html, I am calling like {{${start_date} | parseDate('ddd, Do MMM YYYY')}}
and as a response, I am getting same statement.
means, I am getting {{${start_date} | parseDate('ddd, Do MMM YYYY')}} as it is in html.
Can anyone please suggest what I did wrong ?
Thank you.
I have changed your code by adding the filter property within the Vue component creation.
var details = new Vue({
el: '#ajax-article-detail',
data: {
message: 'Hello Vue.js!'
},
methods: {
showName: function() {
console.log('Calling showName...');
return 'Im Event';
}
},
filters: {
parseDate: function(date, format) {
console.log('value passed: ' + date); //check the browser console if it is passed
if (date) {
//console.log(moment(String(date)).format(format));
return moment(String(date)).format(format);
}
}
});
Then use the filter like this-
{{2018-12-19 16:46:00 | parseDate('<your_date_format>') }}
However, you need to check if you are passing the value correctly. Try passing some hard coded string value first and check the console window.
i need to create a Dojo widget that lets users specify date & time. i found a sample implementation attached to an entry in the Dojo bug tracker. It looks nice and mostly works, but when i submit the form, the value sent by the client is not the user-selected value but the value sent from the server.
What changes do i need to make to get the widget to submit the date & time value?
Sample usage is to render a JSP with basic HTML tags (form & input), then
dojo.addOnLoad a function which selects the basic elements by ID, adds dojoType
attribute, and dojo.parser.parse()-es the page.
Thanks in advance.
The widget is implemented in two files. The application uses Dojo 1.3.
File 1: DateTimeCombo.js
dojo.provide("dojox.form.DateTimeCombo");
dojo.require("dojox.form._DateTimeCombo");
dojo.require("dijit.form._DateTimeTextBox");
dojo.declare(
"dojox.form.DateTimeCombo",
dijit.form._DateTimeTextBox,
{
baseClass: "dojoxformDateTimeCombo dijitTextBox",
popupClass: "dojox.form._DateTimeCombo",
pickerPostOpen: "pickerPostOpen_fn",
_selector: 'date',
constructor: function (argv) {},
postMixInProperties: function()
{
dojo.mixin(this.constraints, {
/*
datePattern: 'MM/dd/yyyy HH:mm:ss',
timePattern: 'HH:mm:ss',
*/
datePattern: 'MM/dd/yyyy HH:mm',
timePattern: 'HH:mm',
clickableIncrement:'T00:15:00',
visibleIncrement:'T00:15:00',
visibleRange:'T01:00:00'
});
this.inherited(arguments);
},
_open: function ()
{
this.inherited(arguments);
if (this._picker!==null && (this.pickerPostOpen!==null && this.pickerPostOpen!==""))
{
if (this._picker.pickerPostOpen_fn!==null)
{
this._picker.pickerPostOpen_fn(this);
}
}
}
}
);
File 2: _DateTimeCombo.js
dojo.provide("dojox.form._DateTimeCombo");
dojo.require("dojo.date.stamp");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit._Calendar");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dijit.form.Button");
dojo.declare("dojox.form._DateTimeCombo",
[dijit._Widget, dijit._Templated],
{
// invoked only if time picker is empty
defaultTime: function () {
var res= new Date();
res.setHours(0,0,0);
return res;
},
// id of this table below is the same as this.id
templateString:
" <table class=\"dojoxDateTimeCombo\" waiRole=\"presentation\">\
<tr class=\"dojoxTDComboCalendarContainer\">\
<td>\
<center><input dojoAttachPoint=\"calendar\" dojoType=\"dijit._Calendar\"></input></center>\
</td>\
</tr>\
<tr class=\"dojoxTDComboTimeTextBoxContainer\">\
<td>\
<center><input dojoAttachPoint=\"timePicker\" dojoType=\"dijit.form.TimeTextBox\"></input></center>\
</td>\
</tr>\
<tr><td><center><button dojoAttachPoint=\"ctButton\" dojoType=\"dijit.form.Button\">Ok</button></center></td></tr>\
</table>\
",
widgetsInTemplate: true,
constructor: function(arg) {},
postMixInProperties: function() {
this.inherited(arguments);
},
postCreate: function() {
this.inherited(arguments);
this.connect(this.ctButton, "onClick", "_onValueSelected");
},
// initialize pickers to calendar value
pickerPostOpen_fn: function (parent_inst) {
var parent_value = parent_inst.attr('value');
if (parent_value !== null) {
this.setValue(parent_value);
}
},
// expects a valid date object
setValue: function(value) {
if (value!==null) {
this.calendar.attr('value', value);
this.timePicker.attr('value', value);
}
},
// return a Date constructed date in calendar & time in time picker.
getValue: function() {
var value = this.calendar.attr('value');
var result=value;
if (this.timePicker.value !== null) {
if ((this.timePicker.value instanceof Date) === true) {
result.setHours(this.timePicker.value.getHours(),
this.timePicker.value.getMinutes(),
this.timePicker.value.getSeconds());
return result;
}
} else {
var defTime=this.defaultTime();
result.setHours(defTime.getHours(),
defTime.getMinutes(),
defTime.getSeconds());
return result;
}
},
_onValueSelected: function() {
var value = this.getValue();
this.onValueSelected(value);
},
onValueSelected: function(value) {}
});
It sounds like you want to use getValue. The convention now is to use _getValueAttr and then call attr("value") but I think that started in Dojo 1.4 and this code would need to be ported to use those new patterns.
Noe that value should be a Javascript Date object which would best be sent to the server using dojo.date.stamp.toISOString()
This began to work fine after i added a "serialize" method to DateTimeCombo.js which builds exactly the output format i want.
This seems odd to me, since there is already a serialize implementation in _DateTimeTextBox.js that should output the value in the required ISO format.