EasyUI Forum

I need to be able to change a datetimebox field to a datebox (to remove the time component for an 'all-day' event) and vice versa.

I tried the technique in this thread http://www.jeasyui.com/forum/index.php?topic=1761.0 but couldn't get it to work:

            $.extend($.fn.datetimebox.methods, {
                    removeTime: function(jq){
                        return jq.each(function() {
                            var state = $.data(this,'datetimebox');
                            if (state) {
                                state.spinner.panel('destroy');
                                state.datetimebox.remove();
                                $(this).removeClass('easyui-datetimebox').show();
                                $.removeData(this,'datetimebox');
                            }
                            $(this).addClass('easyui-datebox').show();
                            if (state)
                                $.setData(this, 'datebox', state);
                        });
                    },
                    addTime: function(jq){
                        return jq.each(function() {
                            var state = $.data(this,'datebox');
                            if (state) {
                                state.spinner.panel('destroy');
                                state.calendar.remove();
                                $(this).removeClass('easyui-datebox').show();
                                $.removeData(this,'datebox');
                            }
                            $(this).addClass('easyui-datetimebox').show();
                            if (state)
                                $.setData(this, 'datetimebox', state);
                        });
                    }
            });

What am I doing wrong?  Or is there a better way to do this?

If you only want to hide the timespinner component, extend a method to achieve it. But if you want to change the whole datetimebox to datebox, the more better way is to destroy the old one and then recreate a new datebox component.

I need the time component to go away in the text field as well as in the drop down calendar.  Would hiding the timespinner do both?

As far as destroying the old one and then recreating it, that's what I was trying to do with the removeTime and addTime extension methods.  I tried simply using destroy() but that removed the date box/edit field entirely as was noted in that other thread - so I was trying to adapt that other thread's solution to this usage but got bogged down in differences between combo's and date/timeboxes. 

How do you recommend I destroy the old one and re-add the new one in it's place?

Try the code below, calling 'todatebox' function will destroy the old datetimebox and then create a new datebox.