how to disable datepicker to show on custom field error message (Datatables Editor)

how to disable datepicker to show on custom field error message (Datatables Editor)

mr.shahinmr.shahin Posts: 10Questions: 2Answers: 1

Hello,
I've added date time picker on a custom field within the editor, but the problem that every time I trigger an error on that composite field, the picker displays even there's no error with the date itself.
I've done it like so:

new Editor.DateTime($('input.date', this), $.extend({
                    format: conf.format, // can be undefined
                    i18n: that.i18n.datetime,
                    onChange: function () {
                        $('input.date', self).trigger('input');
                        $('input.date', self).trigger('change');
                    }
                }, conf.opts));

How I can disable datetime picker from being shown completely even if there's an error with the date field?
Thanks in advance.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    I'm afraid I don't fully understand. If the input element for the date time picker received focus, it will show the picker. It sounds like you might not want that to happen?

    In which case, the picker would never be shown? So I'm not sure why it would be added to the input in the first place.

    Allan

  • mr.shahinmr.shahin Posts: 10Questions: 2Answers: 1
    edited February 2020

    Hi Allan,
    Thank you for your response, and sorry for confusing you.
    Here's an Image for what I'm trying to explain:
    https://ibb.co/sb657Fg
    I'm doing an invoicing custom field where client will be able to add multiple invoices like in image, and when there's an error that is not related to date as you can see, the datetime picker always shown, and I need to hide it even if the error is related to the date, I'll handle the errors on another way.
    Thanks in advance.
    Sincerely,
    Shahin

  • mr.shahinmr.shahin Posts: 10Questions: 2Answers: 1
    edited February 2020

    I've got a solution for whom will browse the question on the future:
    I've pushed all datetime instances to an array like this:

    var dateTimePicker = [];
    dateTimePicker.push (new Editor.DateTime($('input.date', this), $.extend({
                        format: conf.format, // can be undefined
                        i18n: that.i18n.datetime,
                        onChange: function () {
                            $('input.date', self).trigger('input');
                            $('input.date', self).trigger('change');
                        }
                    }, conf.opts))
                    );
    

    Also added an event listeners on unsuccessful submission which is: submitUnsuccessful in order to hide all datetime picker instances:

    editor.on('submitUnsuccessful', function () {
                    dateTimePicker.forEach(function(picker){
                        picker.hide();
                    });
                });
    

    That's all :smile:
    If there's a better solution, kindly let me know.
    Regards,
    Shahin

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    the problem that every time I trigger an error on that composite field

    How are you triggering that error please? I don't see how the picker is being shown without focusing on the field.

    Allan

  • mr.shahinmr.shahin Posts: 10Questions: 2Answers: 1
    edited February 2020 Answer ✓

    Hi Allan,
    Thank you for your help.
    I've got a solution for those who will browse the question in the future:
    I've pushed all datetime instances to an array like this:

    var dateTimePicker = [];
    dateTimePicker.push(new Editor.DateTime($('input.date', this), $.extend({
                        format: conf.format, // can be undefined
                        i18n: that.i18n.datetime,
                        onChange: function () {
                            $('input.date', self).trigger('input');
                            $('input.date', self).trigger('change');
                        }
                    }, conf.opts))
                    );
    

    Also added an event listener on unsuccessful submission which is: submitUnsuccessful in order to hide all datetime picker instances:

    editor.on('submitUnsuccessful', function () {
                    dateTimePicker.forEach(function(picker){
                        picker.hide();
                    });
                });
    

    That's all :smile:
    If there's a better solution, kindly let me know.
    Regards,
    Shahin

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    Nice one - thanks for posting back with your solution!

    Allan

This discussion has been closed.