[SOLVED] How to disable the calendar widget?

[Edward Shave]

I want to use a different datetimepicker widget so I need to disable the old one. 

So far I've commented out the following two lines in web2py_ajax.html...

response.files.insert(1,URL('static','css/calendar.css'))

response.files.insert(2,URL('static','js/calendar.js'))

That did the trick but it breaks some code in web2py.js which silently fails due to Calendar not defined!

Before I go messing with any more files maybe someone knows a nice clean way to disable the calendar widget?

By the way, with just a few lines of code the new one seems to be working fine in a SQLForm.

I new what needed to go in the code below but not really where to put it. 

For example should the file links be in the header?

And is the document.ready function needed?

Anyway it works so hopefully it' will do until I get more experienced.

db.define_table('cal_form',
    Field('date_in','date'))

def datepicker():
   form=SQLFORM(db.cal_form)
   if form.process().accepted:
       response.flash = 'form accepted'
   elif form.errors:
       response.flash = 'form has errors'
   else:
       response.flash = 'please fill out the form'
   return dict(form=form)

{{extend 'layout.html'}}
{{block head}}
    <link rel="stylesheet" type="text/css" href="/calendar/static/css/jquery.datetimepicker.css"/ >
    <script src="/calendar/static/js/jquery.datetimepicker.full.min.js"></script>
{{end}}
<h2>Input form</h2>
{{=form}}
<script>
    $(document).ready(function(){
        jQuery('#cal_form_date_in').datetimepicker({
            timepicker:false,
            format:'Y-m-d',
            yearStart: '1940'
        });
    });
</script>

[Niphlod]

you need to override event_handlers(). Basically just copy the event_handlers function to your own with $.web2py.event_handlers, and rewrite the part that attaches the calendar to input.date, input.datetime and input.time .

There's an example on https://github.com/niphlod/cs_monitor_plugin/blob/master/static/plugin_cs_monitor/js/app.js (using https://github.com/Eonasdan/bootstrap-datetimepicker/)

[Edward Shave]

Thanks a bunch for that. No way would I have figured that out on my own.

Thanks again,

Ed 

[Anthony]

We should make this easier to configure, but here are a few more options that don't require forking a framework file:

• The calendar/time widget is only activated for inputs with classes "date", "datetime", or "time", so, you can just use a custom widget that excludes those classes. The simplest option is just to use the standard string field widget:

Field('mydate', 'date', widget=SQLFORM.widgets.string.widget)

• Alternatively, you can just not load the /static/js/calendar.js file in your layout.html (though, note, that will generate a Javascript error when the field is clicked).
• Finally, this is a hack, but if you want to keep the "date" class (for some other purpose), you can use a customized version of the date widget:

Field('mydate', 'date',
      widget=lambda f, v: SQLFORM.widgets.date.widget(f, v, data=dict(w2p_date='disabled'))

That simply adds a "data-w2p_date" attribute to the input element. This only works because the presence of the "data-w2p_date" attributes tricks the click handler into thinking the calendar widget has already been set up on the input field, so it doesn't attempt to set it up again (note, the value "disabled" is arbitrary -- any value at all will work there).

Anthony

[Edward Shave]

Wow! Spoilt for choice  ;o)

Thanks for that Anthony.

I continue to be impressed by the standard of replies here.

[Gael Princivalle]

Hi Edward.

I'm trying also to use Bootstrap 3 datepicker.

http://eonasdan.github.io/bootstrap-datetimepicker/

I use it for datetime, the result in the input is like:

03/09/2016 14:00

The form returns me an error as it need also the seconds like:

03/09/2016 14:00:00

The seconds for this application are not important, it could be a solution appending :00 to the input.

Have you got this problem? Do you solve it?

Thanks.