I feel should be easy but still does not work, "toDate.getValue();" does not return Ext.date object. I cannot format date.
Error: format is undefined.
Below is my form field.
var toDate = new Ext.form.DateField(
{
fieldLabel: "date"
value: new Date(), name: "abs-to-date",
width: 100,
allowBlank: false
}
And on submission of form, i want to format date.
var toDateTime = toDate.getValue();
console.log(toDate.getValue());
toDateTime.setHours( toHour.getValue(), toMinute.getValue(), 0 );
abs.to = toDateTime.format( Date.patterns.JSONdateTime ); <---------------------
There are 2 different date type in Extjs 4.
1) Date
2) Ext.Date
method "format" is available to Ext.date and toDateTime is object of Date.
following is right syntax.
abs.to = Ext.Date.format(toDateTime, Date.patterns.JSONdateTime );
You're missing a comma after 'fieldLabel'. Code should be:
var toDate = new Ext.form.DateField({
fieldLabel: "date", //<----------
value: new Date(),
name: "abs-to-date",
width: 100,
allowBlank: false
});
Related
I have data with Date fields startDate and stopDate:
data: {
error: '',
config: {rate: 0.00, surcharge: 0.00, startDate: new Date(), stopDate: null, enabled: true},
configurations: []
},
Also I have input field:
<input id="startDate" type="date" v-model="config.startDate">
So while page creation I see warning in console:
vue.js:7629 The specified value "Tue Sep 17 2019 15:52:44 GMT+0700
(\u041A\u0440\u0430\u0441\u043D\u043E\u044F\u0440\u0441\u043A,
\u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0435
\u0432\u0440\u0435\u043C\u044F)" does not conform to the required
format, "yyyy-MM-dd".
Also, input field has no date value just after page has loaded. Seems like initial Date value has not bound to input field.
What is the natural way to bind date value to input field?
thanks for your answers and best regards.
This is a working jsfiddle. I don't receive any error in console.log
HTML
<div id="date">
<p>
New Date: <input id="startDate" type="date" v-
model="config.startDate">
<span>{{config.startDate}}</span>
</p>
</div>
JS
var box = new Vue({
el:'#date',
data:{
config: {rate: 0.00, surcharge: 0.00, startDate: new Date(),
stopDate: null, enabled: true}}
});
https://jsfiddle.net/o6d1x9eb/
According VueJS documentation, v-model="config.startDate" is equals to v-bind:value="config.startDate" v-on:input="config.startDate = $event.target.value".
So, I have two ways:
Store in config variable of data value as String instead of Date and edit it by the input field. By the way, input field returns string value of date in yyyy-mm-dd format.
Use value as Date, filter (or function) to convert Date into String and function to convert String into Date.
So, the way I used is
for inpuut field:
<input id="startDate" type="date"
v-bind:value="config.startDate | inputDateFilter"
v-on:input="config.startDate = getDate($event.target.value)">
and for Vue instance:
filters: {
inputDateFilter: function (date) {
if (!date) {
return '';
}
date = new Date(date);
return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2);
},
// . . .
methods: {
getDate(value) {
if (!value) {
return null;
}
return new Date(value);
},
// . . .
This is does what I want.
I'm using a table component for Vuejs called vue-good-table.
It allows you to format your columns with different formats like string, number and date.
My issue today is related to the date formatting. I'm being able to format the column properly, however, some of the values that come from the database are null, and then it appears a label Invalid Date for those rows that have null dates.
Is there a way to configure those columns as nullable or format them in a way that I prevent this message to be shown? I'd rather leave the table cell empty instead of displaying that label.
The following example shows the scenario that I'm describing
<template>
<vue-good-table
:columns="columns"
:globalSearch="true"
:paginate="true"
:rows="rows">
</vue-good-table>
</template>
<script>
export default {
name: 'Table',
computed: {
columns() {
return [{
field:"fieldA",
label:"fieldA",
type:"number"
},{
field:"fieldB",
label:"fieldB",
type:"date",
inputFormat: 'YYYY/MM/DD',
outputFormat: 'YYYY/MM/DD'
}];
}
},
rows() {
return [{
fieldA: 1,
fieldB: null
},{
fieldA: 1,
fieldB: '2017/01/04'
}];
}
}
</script>
In that case, I would have one field with the date formatted correctly, and another field with a label Invalid Date
Thanks
-- UPDATED --
This problem was fixed in most recent versions.
Edit: I have just realized the formatFn function overrides the input and output format options, since it will only use the function to format the data. Not sure if it's the best aproach, but instead you should probably format the data yourself on the function (or format the data before passing to the table). Here's an example using moment:
{
label: 'Date/Time',
field: 'date',
type: 'date',
formatFn: function (value) {
return value != null ? moment(value, 'DD/MM/YYYY HH:mm:ss').format('DD-MM-YYYY HH:mm:ss') : null
}
}
I had the same issue and I was able to format the data using the formatFn function (https://github.com/xaksis/vue-good-table#formatfn-function).
{
label: 'Date/Time',
field: 'date',
type: 'date',
dateInputFormat: 'DD/MM/YYYY HH:mm:ss',
dateOutputFormat: 'DD-MM-YYYY HH:mm:ss',
formatFn: function (value) {
return value != null ? value : null
}
}
Hope this helps
I am using a datepicker in titanium iOS to read date.
When I am trying to set a value to the date picker t wont work.It is always showing the maxDate.
What is the actual solution for this
//my sample code of picker is follows
var picker2 = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_DATE,
selectionIndicator: true,
minDate: new Date(moment().subtract(120, 'years')),
maxDate: new Date(moment().subtract(18, 'years')),
value: new Date(2014,3,12),
//value: navHistory == 'profilePage' && dateofbirth !=null ? dateofbirth : new Date(moment().subtract(18, 'years')),
top: Ti.Platform.displayCaps.platformHeight / 30,
});
The reason your current solution does not work is because your value is actually a date after your maxDate (hence it will set the value to maxDate). You need to use a date within minDate and maxDate as value for it to work.
For example:
var picker = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_DATE,
selectionIndicator: true,
minDate: new Date(moment().subtract(120, 'years')),
maxDate: new Date(moment().subtract(18, 'years')),
value: new Date(1990,3,12)
});
I have a GridPanel whose columns have 'items' property set to an Ext.form.field.Trigger. I use the trigger field to work like a filter. I have a button in toolbar which should show/hide the Triggers. For this I need to get the 'items' configuration of the Column. Any ideas?
Code
{
xtype: 'gridcolumn',
dataIndex: 'title',
minWidth:100,
flex: 3,
text: 'Title',
layout: 'hbox',
items:[{
xtype: 'trigger',
autoSearch: false,
anyMatch : true
}]
}
I guess u should use ID or itemid in ur controls to get their value where ever u want.
Additionally to create filters you can execute createFilters on the filter feature if u r not getting desired output.
I have found a solution for it. Although not the best but gets the job done
Code
var columns = grid.columns;
if(grid.columns!=undefined){
for(var i =1; i<columns.length; i++){
var column = columns[i];
if(column!=undefined){
var colItems = column.items;
if(colItems!=undefined){
var colItem = colItems.items[0];
if(colItem!=undefined){colItem.setVisible(true);}
}
}
}
}
I have the following date picker
{
xtype: 'datefield',
id: 'FinalDespatchDate',
name: 'FinalDespatchDate',
fieldLabel: 'Part Despatch Date',
labelWidth: 150,
width: 370,
validateOnChange: false,
format: 'd/m/Y'
},
In my model i have
{
mapping:'FinalDespatchDate',
name:'FinalDespatchDate',
type: 'date',
dateFormat:'d/m/Y'
},
if in my model i don't include the dateFormat. The date binds to my date picker but it sends the date in an incorrect format. When i add dateFormat it sends the date in the correct format it just no longer binds to the datepicker. ie the above configuration display nothing in the date picker
Does your data come from server with properly formatted date value ('d/m/Y') in this (non-working) configuration?