hello there's I want to convert 03-04-2017 12:00AM to 2017-12-01 12:00:00
how can I do it in Ext Js
currently my code is:
this.ToDatePicker = Ext.create('Ext.form.field.Text', {
xtype: 'textfield',
name: 'name',
labelAlign: 'top',
fieldLabel: 'Date Time',
value: Ext.Date.format(new Date(), "d-m-Y h:iA"),
listeners: {
scope: this,
afterrender: function (c) {
c.getEl().on('click', function (e) {
console.log(e.target)
NewCssCal_DisableAfterToday(Ext.get(e.target).dom.id, 'ddmmyyyy', 'dropdown', true, 12)
});
}
}
});
this.ToCalenderIcon = new Ext.Container({
html: "<img class='calIcons' src='public/touchWorldCssJs/images/cal.gif'/>",
scope: this,
padding: '27 5 5 5',
listeners: {
scope: this,
afterrender: function (c) {
c.getEl().on('click', function (e) {
if (Ext.get(e.target).hasCls('calIcons')) {
console.log(Ext.get(e.target).dom.id);
NewCssCal_DisableAfterToday(me.ToDatePicker.inputEl.id, 'ddmmyyyy', 'dropdown', true, 12)
}
});
}
}
});
this.ToCalenderIcon after rendering this set date formate like 03-04-2017 12:00AM So I need to convert this to 2017-12-01 12:00:00
The AM/PM notion isn't supported by JavaScript natively as far as I could tell, so you'll have to do the parsing according to the specified format through Ext.Date.
In your toDatePicker, you explicitly format the date to be "d-m-Y h:iA".
To get that back into a different format you need to first parse it (as JavaScript's native Date can't parse the resulting string):
Ext.Date.format(Ext.Date.parse("03-04-2017 12:00AM", "d-m-Y h:iA"), "d-m-Y h:i:s")
I hope that's what you were looking for.
If you're instead interested how to make the 3rd of April look like the first of December, you should just write 1st of December in the first place.
Related
How can I disable all calendar dates and enable from dynamic array?
For example, I have array
['1.12.21', '25.11.21', '3.12.21', '8.10.21']
I should disable all dates exceptdates from array - how can I do this?
You can use the Ext.form.field.Date disabledDates configuration, and setDisabledDates method to update it, see in the documentation. The array you specify here will be interpreted as a regular expression, so in your case you can set up a negated condition to disable all but some dates.
Try the code below, also this working fiddle. This works in classic toolkit, I don't know how to do it in modern.
Ext.application({
name: 'Fiddle',
launch: function () {
const enabledDatesArray = ['01.10.21', '06.10.21', '15.10.21'];
const disabledDatesRegex = '^(?!'+enabledDatesArray.join('|')+').*$';
Ext.create('Ext.panel.Panel', {
width: 400,
renderTo: Ext.getBody(),
items: [{
xtype: 'datepicker',
format: 'd.m.y',
disabledDates: [disabledDatesRegex]
}]
});
}
});
Extjs binding value not getting cleared when the user clears the date field box manually ( user changes date field to blank )
I cannot post the code but i found a similar fiddle
In this fiddle i want the value to be cleared when i clear the datefield manually , instead what is happening is the display field keeps showing the old value
it would be great help if some one could provide me the solution
You could use specialkey event for the datefield to achieve the required result.
You can check here with working fiddle.
Note you can put your logic based on your requirement. I have just create simple example.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
viewModel: {
data: {
dateFrom: null,
}
},
items: [{
xtype: 'datefield',
emptyText: 'Date From',
bind: '{dateFrom}',
listeners: {
specialkey: function (field, e) {
if (e.getKey() == e.DELETE || e.getKey() == e.BACKSPACE) {
field.up('panel').getViewModel().set('dateFrom', null);
}
}
}
}, {
xtype: 'displayfield',
bind: {
value: '{dateFrom}'
}
}]
});
}
});
I need to display only a Date Collection object as a data source in my UI Grid.
Do I need to define a field under ColumnDefs in this case? Also, I need to include a column to delete that particular row, in this case Delete the current Date object.
How can I accomplish this? Below is my code
editor.mySeasonBreaks = {
data: "editor.mySeasons",
columnDefs:
[{ field: "????", visible: true, displayName: "Season Break" },
{
name: 'delete',
displayName: "",
cellTemplate: "<button ng-click="editor.delete(row.entity)" />"
}]
};
In the above code, editor.mySeasons is just a date array object.
Thanks in advance
You could create an object-array with your dates and define the columns as needed. This way you got more control and its easy to adjust/expand.
Now for your row-deletion I created a Plunkr thats showcases a possible solution.
As you suggest you need to add a cellTemplate that references your delete-function
cellTemplate: "<button ng-click=\"grid.appScope.delete(row)\">DELETE ROW</button>"
To access that function, you need to add it to your gridDefinition and ther property is called appScopeProvider
Possible setup would be
appScopeProvider: {
delete : function(row) {
editor.mySeasons.forEach(function(entry, index){
if(entry.myDate === row.entity.myDate) {
editor.mySeasons.splice(index, 1);
}
});
},
}
This is not recommended scenario, but you can use something like this:
$scope.myData=['2015-22-07', '2017-10-08', '2020-17-02'];
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{
displayName: 'Date Array',
cellTemplate: '<div class="ngCellText ng-class="col.colIndex()">{{row.entity}}</div>'
}
]
};
You can test it here.
There are issues with sorting and probably something else.
It's better IMO to translate your array of dates to array of objects:
var res = [];
myData.forEach(function(el){
res.push({date: el});
});
Then specify column as usual:
{ field: 'date', visible: true, displayName: 'Season Break' }
I am using extjs datefield
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
items: [{
xtype: 'datefield',
fieldLabel: 'From',
maxValue: new Date()
}, {
xtype: 'datefield',
fieldLabel: 'To',
}]
});
when using this code in extjs 4 it works perfectly to disable all dates after today's date , It done by using maxValue= now Date() .In extjs 5 the user can't select any day after today's date but it is not disable.
How can I disable these dates ??
Thanks in advance
Not sure you can... the invalid days have been given the right classes, and have all the correct setup. But the HTML is different.
In Ext4, the template for rendering a date cell is
'<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',
But in Ext5, the template is
'<div hidefocus="on" class="{parent.baseCls}-date"></div>',
The other problem is that the SASS code for the styles still assumes that the cell is a A tag, not a DIV
// include the element name since :hover causes performance issues in IE7 and 8 otherwise
a.#{$prefix}datepicker-date:hover {
color: $datepicker-item-color; // needed to override color for prevday/nextday
background-color: $datepicker-item-hover-background-color;
}
In short, this appears to be a bug in ExtJS 5 - the Javascript widget has been converted, but the CSS isn't. I suggest raising the bug with them.
I am trying to implement file upload feature using extjs 4.1.0. Whereas I want to restrict users to select only image files(jpg,png,gif). Is there any filter which can be applied so that users will only be able to see and then select the types of the files mentioned above?
You could stuff like this as well :
{
xtype: 'filefield',
buttonText: '....',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'image/*' // or w/e type
});
}
}
}
See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.VTypes VAlidation types for an example of a custom type. You could use a regexp to specify alphaMask as well.
{
xtype: 'fileuploadfield',
name: 'file',
fieldLabel: 'Photo',
labelWidth: 50,
allowBlank: false,
buttonText: 'SelectPhoto',
anchor: '100%',
reset: function () {
var me = this,
clear = me.clearOnSubmit;
if (me.rendered) {
me.button.reset(clear);
me.fileInputEl = me.button.fileInputEl;
me.fileInputEl.set({
accept: 'image/*'
});
if (clear) {
me.inputEl.dom.value = '';
}
me.callParent();
}},
listeners:{
change: 'fileInputChange',
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'image/*'
});
}
},
regex: /(.)+((\.png)|(\.jpg)|(\.jpeg)(\w)?)$/i,
regexText: 'Only PNG and JPEG image formats are accepted'
}
regex adds client side validation, to which a form bind can be put on whatever form or action you are planning on doing.