gportela85/datetimefield

A DateTime Field UX for 5.x and 6.x that is also compatible with Architect 3.x.

datetimefield's Issues

Empty value in record leads to error in setValue method of picker

Hi,

If we bind a record with a field containing null as value for the datetime picker, the setValue() (or better the setSeconds(0) function) in Line 276 of DateTimePicker.js fails. Null is passed from the viewmodel record in the binding. For now, we created some kind of default pointing to a new date of today, but for new forms with a bunch of empty fields and one date-time-picker field predefined with the value of today this is not desired. Is it possible to check in the setValue method for null? Perhaps we simply miss a thing ?

Greetings

Olli

when the date edit control in the right edge the time silder control is being hide by screan width

when the date editor control in the right edge, the time silder control can't ajust screan width to layout left to date picker,this made the time silder control invisible.

Thanks.

"submitFormat" doesn't work or there's no this option

It always sends time formatted as "2016-07-17T15:00:00".

Time not initialized on first show

When I click on the datetimefield object for the first time and it is shown to the user, the time sliders and time label is set to 00:00, even though the time is something else (ie 09:40). However, if the panel is hidden and then shown again, the time sliders and label is correct.

In order to get it to work for my needs I modified/added the following code. I'm sure there is probably a better way, or I'm doing something wrong. Thoughts?

 setValue: function(value) {
        var me = this;
        value.setSeconds(0);
        this.value = new Date(value);
        me.initTimePanel(value);  //Special Fix to Init the Time component.
        return this.update(this.value);
    },
initTimePanel: function(value) {
        var me = this;
        me.hourSlider.setValue(value.getHours());
        me.minuteSlider.setValue(value.getMinutes());

        var minutePrefix = value.getMinutes() < 10 ? '0' : '',
            hourPrefix = value.getHours() < 10 ? '0' : '',
            label = me.hourSlider.up().down('toolbar').down('label');

        label.setText(hourPrefix + value.getHours() + ':' + minutePrefix + value.getMinutes());
    },

As a separate issue (maybe related). How should I properly install the the .js files to work with my code. right now I've put the files in the following folder: ext/ux/...
I also tried to build the package with with a "sencha package build" and get the following errors:

C:\app\packages\date-time-picker>sencha package build
Sencha Cmd v5.1.3.61
[INF] Processing Build Descriptor : default
[ERR] Failed to resolve dependency Ext.form.field.Date for file Ext.ux.DateTimeF
ield
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.form.field.Date
[ERR] Total time: 1 second
[ERR] The following error occurred while executing this line:
C:\app\packages\date-time-picker\.sencha\package\build-impl.xml:140: The following error occurred while executing this line:
C:\app\packages\date-time-picker\.sencha\package\js-impl.xml:32: com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.form.field.Date

Thanks for your help! Except for my few quirks, this solution works great for my needs. Hopefully you can provide me some pointers or use my noted issues to make the solution better.

Best Regards,
Wesley
Using ExtJS 5.1.1

Time background in DateTimePicker is transparent

When using classic theme, time label background in DateTimePicker is transparent. As a result, time becomes unreadable when there is some other text behind it.

Resize layout make reference to datetimefield change to datetimefield-picker

See gif below

startDate and endDate is the same type of datetimefield

If i callout the picker before resize, the reference to datetimefield change to datetimefield-picker, if i resize first , all things works right,event if i do resize many times.

resize code

onToggleNavigationSize:function () {
var me = this,
refs = me.getReferences(),
navigationList = refs['navigationTreeList'],
wrapContainer = refs['mainContainerWrap'],
collapsing = !navigationList.getMicro(),
new_width = collapsing ? 60 : 250;

    if (Ext.isIE9m || !Ext.os.is.Desktop) {
        Ext.suspendLayouts();

        refs.logo.setWidth(new_width);

        navigationList.setWidth(new_width);
        navigationList.setMicro(collapsing);

        Ext.resumeLayouts(); // do not flush the layout here...

        // No animation for IE9 or lower...
        wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
        wrapContainer.updateLayout();  // ... since this will flush them
    }
    else {
        if (!collapsing) {
            // If we are leaving micro mode (expanding), we do that first so that the
            // text of the items in the navlist will be revealed by the animation.
            navigationList.setMicro(false);
        }

        // Start this layout first since it does not require a layout
        refs.logo.animate({dynamic: true, to: {width: new_width}});

        // Directly adjust the width config and then run the main wrap container layout
        // as the root layout (it and its chidren). This will cause the adjusted size to
        // be flushed to the element and animate to that new size.
        navigationList.width = new_width;
        wrapContainer.updateLayout({isRoot: true});
        navigationList.el.addCls('nav-tree-animating');

        // We need to switch to micro mode on the navlist *after* the animation (this
        // allows the "sweep" to leave the item text in place until it is no longer
        // visible.
        if (collapsing) {
            navigationList.on({
                afterlayoutanimation: function () {
                    navigationList.setMicro(true);
                    navigationList.el.removeCls('nav-tree-animating');
                },
                single: true
            });
        }
    }
} 

this plugin is suit for form but grid editor is good layout

this plugin is suit for form control but in grid editor is not good layout

setReadOnly method

There is one more issue: using viewModel bind on readOnly config causes error: Cannot bind readOnly on Ext.ux.DateTimePicker - missing a setReadOnly method

Here is the fiddle: bind: {readOnly: {readOnly}}

Since readOnly binding is as important as value binding I suggest another override to DateTimePicker:

• using base class for form fields

setReadOnly: function (readOnly) { var me = this, inputEl = me.inputEl, old = me.readOnly; readOnly = !!readOnly; me[readOnly ? 'addCls' : 'removeCls'](me.readOnlyCls); me.readOnly = readOnly; if (inputEl) { inputEl.dom.readOnly = readOnly; } else if (me.rendering) { me.setReadOnlyOnBoxReady = true; } if (readOnly !== old) { me.fireEvent('writeablechange', me, readOnly); }}

How to work in extjs 6.2 app with cmd 6.5

This is my steps:

1. download the zip file ,add to extjs 6.2 workspace, example: e:\Dev\ext-workspace\packages\local\DateTimeField-master\
2. modify the creator in package.json
3. sencha.exe package build
4. copy the E:\Dev\ext-workspace\build\DateTimeField\DateTimeField.pkg file to my project
5. sencha.exe package add DateTimeField.pkg
6. sencha.exe app watch

but when require 'Ext.ux.DateTimeField' , sencha report errors
[ERR] C2008: Requirement had no matching files (Ext.ux.DateTimeField) -- E:\Dev\DM\LocalAdmin\classic\src\view\eventlog\EventLogList.js:13:332
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: Failed to find any files for E:\Dev\DM\LocalAdmin\classic\src\view\eventlog\EventLogList.js::ClassRequire::Ext.ux.DateTimeField
[ERR] at org.apache.tools.ant.dispatch.DispatchUtils.execute(Dispatch
[ERR] Utils.java:106)
[ERR]
[ERR] Total time: 5 minutes 51 seconds
[ERR] Error during rebuild : The following error occurred while executing this line:
E:\Dev\DM\LocalAdmin.sencha\app\watch-impl.xml:4: The following error occurred while executing this line:
E:\Dev\DM\LocalAdmin.sencha\app\build-impl.xml:386: The following error occurred while executing this line:
E:\Dev\DM\LocalAdmin.sencha\app\init-impl.xml:436: com.sencha.exceptions.ExBuild: Failed to find any files for E:\Dev\DM\LocalAdmin\classic\src\view\eventlog\EventLogList.js::ClassRequire::Ext.ux.DateTimeField
[INF] Refresh complete in 4 sec. at 10:52:11

NAN is shown when changing the time pickers

There is no error on console but it shows NAN to the hour and minutes. Then when I click on the dates, the whole dates show NAN.

I used the same code as the example.

{
                     xtype: 'datetimefield',
                    todayText: 'Select Current Date',
                    hourText: 'H',
                    minuteText: 'Min',
                    width: 300,
                    id: 'chart_range_one_id',
}

Disable ToolTip for Today's button

How can i disable tooltip for today's button in DateTimePicker

Day of Week columns not showing when rendering to TD tag

This code here:

<span id="test"></span>
<script>
Ext.require('Ext.ux.DateTimeField');
Ext.onReady(function () {
    var newPublicationDateX = Ext.create('widget.datetimefield',{
        format : 'm/d/Y h:i A',
        value : new Date(),
            minValue: '12/01/2015 04:00 PM',
        maxValue: '12/31/2016 05:30 PM',
        hourText: 'H',
        minuteText: 'Min',
        width: 300,
        renderTo: document.getElementById('test')
    });
});

works just fine, but if you try and render it to a TD, it doesn't display.

<table><tr><td id="test"></td></tr></table>
<script>
Ext.require('Ext.ux.DateTimeField');
Ext.onReady(function () {
    var newPublicationDateX = Ext.create('widget.datetimefield',{
        format : 'm/d/Y h:i A',
        value : new Date(),
            minValue: '12/01/2015 04:00 PM',
        maxValue: '12/31/2016 05:30 PM',
        hourText: 'H',
        minuteText: 'Min',
        width: 300,
        renderTo: document.getElementById('test')
    });
})

Attached is a screenshot of the erroneous result.

Error in console

Opening DateTimePicker after invalidating datefield throws an error in console:

Uncaught TypeError: currentDate.getHours is not a function

Disable/Enable leaves DateTimeField still disabled

I am just doing a simple disable then enable on the datetimefield bsaed on the value in a combo, e.g.

if(newValue === "custom") {
    field.nextSibling('datetimefield').enable();
 } else {
    field.nextSibling('datetimefield').disable();
});

However after being disabled, then re-enabled, the main body panel remains masked so you cannot select anything.

I will look at the code now and see if I can find a fix and post it, but thought I would mention this anyway.

Cmd 6.5.2.15
ExtJS 6.5.2.463

minValue config doesn't apply to Time, just Date

Hi Guilherme, I've been using your plugin and works great for ExtJs 5. Now I found myself in a situation that I need to set a mininum time value.
The situation is simple: I have a "from_date" field and a "to_date" field. I just don't want to allow user pick in "to_date" field a value lesser than "from_date".
Using "minValue" you can set a minimum date, behaviour inherited from Ext.form.field.Date. But doesn't apply for time pickers.

• Maybe a new config "minTimeValue" or so could be a nice add-on to restrict the Time pickers by setting "minValue" config on time sliders.
• Maybe this behaviour could be added to "minValue" config, allowing me to bind "from_date" value config to "to_date" minValue config.

What do you think about? I can help you with this improvement, time values are very tricky.
Thanks for your time,

How Can I use it in Ext.create('Ext.form.Panel')

when i use this like

Ext.create('Ext.form.Panel', {
frame: true,
width: 300,
maxHeight: 330,
autoScroll: true,
layout: 'anchor',
bodyPadding: '5 5 0',
defaults: {
msgTarget: 'side',
autoFitErrors: false,
anchor: '100%',
labelWidth: 80,
xtype: 'textfield'
},
items: [{
xtype: 'datetimefield',
fieldLabel: 'Label',
format: 'm/d/Y H:i'
}]
});

---

and the chrome console show error like
Uncaught TypeError: Cannot read property 'timePicker' of undefined

need help

layout problem

about layout problem

hi, i'm trying to use your datetimefield js on extjs 6 and the problem i found was like the picture

and i think it's the css problem but I'm not sure...
so i add the scss code like

.x-slider-vert .x-slider-thumb { width: 20px; height: 20px; margin-bottom: -10px; font: 12px/1 ExtJS; margin-left: 15px; }

Problem building with Cmd 6.5?

Hi there,

Are you aware of any problems building a project with the DateTimeField with Cmd 6.5 (with/without Architect 4) ? I am getting this dependency error which disappears if I remove the extension from the project:

[INF] Processing Build Descriptor : default (testing environment) [ERR] Cannot satisfy requirements for "ux"!

I am using v1.8 of the extension and have updated it in Architect. I have removed and re-added it again but as soon as it's part of my project the build fails.

Any suggestions / advice ?

Many thanks
Tim

Transparent datetimer .

kindly give the solution as it related to datetimepicker

Thanks
Nishanth

Empty value in record leads to error in update method of picker

This is similar to #22.
ExtJS version 6.2.1, DateTimeField commit 7077467.

We have a form with a DateTimeField bound to a date field of a model which is initially undefined.
When you click the picker the following error is thrown in the console:

ext-all-sandbox-debug.js:190363 Uncaught TypeError: Cannot read property 'getMonth' of null
at constructor.update (ext-all-sandbox-debug.js:190363)
at constructor.setHtml (ext-all-sandbox-debug.js:69906)
at constructor.onBindNotify (ext-all-sandbox-debug.js:53535)
at constructor.notify (ext-all-sandbox-debug.js:99573)
at constructor.react (ext-all-sandbox-debug.js:99768)
at constructor.notify (ext-all-sandbox-debug.js:97199)
at constructor.onTick (ext-all-sandbox-debug.js:97230)
at ext-all-sandbox-debug.js:6896
at ext-all-sandbox-debug.js:7093

Line 190363 is in the update method of Ext.picker.Date:
if (!forceRefresh && active && me.el && active.getMonth() === date.getMonth() && active.getFullYear() === date.getFullYear()) {.

To me this looks like a bug in ExtJS 6.2.1 because active isn't checked using Ext.isDate but maybe I'm wrong or you could work around it.

Stop working when ID is assigned

Not sure if a bug, but a the very moment you try to assign an id in the field, the picker stop working.

In this example, I just add and ID into the official example (https://fiddle.sencha.com/#fiddle/17cd&view/editor):

Ext.Loader.setPath("Ext.ux.DateTimePicker", "https://rawgit.com/gportela85/DateTimeField/datetimefield-4.2.x/src/DateTimePicker.js");
Ext.Loader.setPath("Ext.ux.DateTimeField", "https://rawgit.com/gportela85/DateTimeField/datetimefield-4.2.x/src/DateTimeField.js");

Ext.application({
    name: 'Fiddle',
    requires: [
        'Ext.ux.DateTimeField'
    ],
    launch: function () {
        Ext.widget("datetimefield", {
            id: 'anyId',
            fieldLabel: 'Date & Time',
            format: 'd/m/Y h:i A',
            value: new Date(),
            renderTo: Ext.getBody()
        });
    }
});

Having an id attribute is quite important in order to get the instance, like for example with Ext.getCmp().

demo

Add demo link to documentation. Supported different versions and themes.

Sencha Cmd error on build - callParent has no target

Using Sencha Cmd v5.1.3.61 to build my project (ie. sencha app build), I get the following error:

[WRN] C1014: callParent has no target (me.callParent in Ext.ux.DateTimeField.mim
icBlur) -- C:\app\ext\src\ux\DateTimeField.js:36

Running with ExtJS 5.1.1

Date is not showing if the field has a listner (spcial key event)

Hi, i'm using you're component, nd it's great. Thanks.

I have an object like this:
{
xtype: 'datetimefield',
name: 'testDate',
itemId: 'testDate',
format: 'Y-m-d H:i:s',
listeners: {
specialkey: 'onFieldSpecialKeyEnter'
}
}
In this case the selection of the date time does not work properly, the value is not updated in the Date Field. If i remove the filter your component works great..

I've tried to debug without success. Is there a way you can test this behaviour?

I'm, using sencha extJs v.5.1.0.107

Many thanks

Extjs5 not work

this plugin is not work in extjs5,Look forward to solve the problem，thx

workaround for Ext JS 4.1.1.1

Sorry folks, I think this is not the right place to do this, but I could'nt create a pull request.

I'm trying to using the component on Ext JS 4.1.1 (I can't upgrade the solution to 4.2 or other right now), but is throwing a "superMethod is undefined" exception.

There's anything I can do "unnoficially" to use this UX component?

Thanks and sorry for my bad english.

Support for ExtJS 6.5

At least so that Sencha Architect accepts it as it seems to be working fine.
Thanks!

Time selector stay behind on first load

No effect with grid editor

I use extjs6.0. Within a grid panel, this package seems not work.

    editor: {
        xtype: 'datefield',
        format: 'Y-m-d H:i:s'
    }

ViewModel binding problem

When binding to ViewModel, value is updated correctly only if date portion changes. If you change only time, the value is unpredictable. See https://fiddle.sencha.com/#fiddle/1eia

how can I put your DateTimeField into use in none architect extjs5 app.

hi , author ,

thanks very much for your 'DateTimeField' , but I got trouble using it . would you please give some help ?

My extjs5 app was generated from sencha cmd tool , no use of Architect , and nothing else .

And I have copied the 2 js files 'DateTimeField.js' and 'DateTimePicker.js' to the right place of my ext package.
but I am getting trouble , the datetime component does not show correctly. Do I miss something ?

ps : I only copied the 2 files above into my project, the other files were ignored .

wrong width

Hi,

i have small fields in my app and the pickers width is inherited from the field. So in my case it´s better to define no width for the picker. Perhaps it´s a good idea to make this configurable:

    createPicker: function() {
        var me = this,
            parentPicker = this.callParent(),
            config = Ext.merge(me.initialConfig, parentPicker.initialConfig);

            if (config.renderTo) {
                delete config.renderTo;
            }
        delete config.width;

        return Ext.create('Ext.ux.DateTimePicker', config);
    }

override hourText and minuteText

hi, It's me again.~
Now I'm using this datatimefield and it was useful,but I still can't override the hourText and minuteText.
I mean that I don't want change the values in your JS file.It was stupid.
So I think there was a little change in the code will solve the problem.

---

I change the file DateTimePicker.js

fieldLabel: me.hourText
to
fieldLabel: me.pickerField.hourText ? me.pickerField.hourText : me.hourText

and
fieldLabel: me.minuteText
to
fieldLabel: me.pickerField.minuteText ? me.pickerField.minuteText : me.minuteText

---

It works...

How to make it work with ExtJS 6.2?

Hi,

i just tried to use your component with ExtJS 6.2 but I'm gettting the following error message:

[ERR] C2008: Requirement had no matching files (Ext.ux.DateTimePicker) -- packages/DateTimeField/src/DateTimeField.js:9:1

I just added it to my packages folder and added it to the "requires" part of app.json. I'm not using sencha architect.

Do I miss something?

Cheers,

Julian

put at the top right position

DateTimePicker.js LN 251

        me.timePicker.showBy(me, null, [xPos, 0]);

should be

        me.timePicker.showBy(me, 'tr', [0, 0]);

date picker is always disabled if the date time has been created with disabled: true

Hi,

Thank you for your great job.

I create a datetime field which is disabled by default, then I enable the datetime field but the date picker is still disabled.

The fix that work for me:
In the file DateTimeField.js:

createPicker: function() {
        //The following code line is to repair the following problem:
        //When the component is disabled by default then enabled the date picker still disabled
        this.initialConfig.disabled = this.disabled;

        ...

Regards

Inside pkg file ,there is a "${package.build.dir}" directory, is it right?