1 Topic by namwebs

  • namwebs
  • Veteran
  • Offline
  • From: Namibia
  • Registered: 25-02-2013
  • Posts: 126

Topic: How to show date picker for custom occurrence attribute

Related to my last post, I made a custom occurrence attribute which is Nest Observation Date (for repeat visits to nests). In the warehouse, the Data Type is set to be "Specific Date" and in the Survey Specific settings I have set the Default control type to "date_picker". However, on my form, it doesn't display a date picker, just a text field. If I try to edit an existing record, it displays the entered dates (as yyyy-mm-dd) but it won't accept them on Save, giving "Please enter a valid date".

The form does recognise the changes I make in the warehouse, e.g. if I tick required it shows the red star. In the warehouse Default control type list there are two "date_picker"options, as well as the default <not specified> but it doesn't make a difference what I chose.

Am I doing something wrong...? How do I get the date picker to work on the form?

Thanks for any help.

namwebs's Website

2 Reply by Jim Bacon

  • Jim Bacon
  • Veteran
  • Offline
  • From: BRC
  • Registered: 03-11-2008
  • Posts: 980

Re: How to show date picker for custom occurrence attribute

Hi

If you use the inspector built in to your browser, do you see any JavaScript errors?

When I try to test on our warehouse and I go to set the default control type I get an error "Error occurred when loading view.. Invalid date type at line 208 in file application\helpers\vague_date.php" which is not great. That is with version 1.34.6

Jim Bacon.

3 Reply by namwebs

  • namwebs
  • Veteran
  • Offline
  • From: Namibia
  • Registered: 25-02-2013
  • Posts: 126

Re: How to show date picker for custom occurrence attribute

Hi Jim,

Thanks for your reply.

There are apparently no JavaScript errors in the warehouse when I set the Default control type to datepicker or when I load the data entry form. (Just the 'Please enter a valid date' that pops up when the date field is submitted.)

Not very helpful, I realise...

namwebs's Website

4 Reply by Jim Bacon

  • Jim Bacon
  • Veteran
  • Offline
  • From: BRC
  • Registered: 03-11-2008
  • Posts: 980

Re: How to show date picker for custom occurrence attribute

Hi

Sorry, I was a bit ambiguous there. I meant JavaScript errors when you load the data entry form. What I expect is that the control is output as a text field (which is what you are seeing) and that JavaScript behaviour creating the pop-up is attached when the page loads in the browser.

If there are no JavaScript errors then I am wondering if the code to make the attachment is present.

To attach the date picker behaviour I'd expect there to be some JavaScript embedded in your page within a <script> block like 

jQuery('#yourOccurrenceInputID').datepicker({
    dateFormat : 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    constrainInput: false ,
    maxDate: '0',
    onClose: function() {
      $(this).valid();
    }
});

I'd also expect you to be able to find some html injected in to the bottom of your form beginning
<div id="ui-datepicker-div" class="ui-datepicker ...

Finally, a file, jquery.ui.datepicker.min.js, should be loaded with the page.

Can you see any of these components using the debugger on your browser or is the page publicly accessible so I can check?

Jim Bacon.

5 Reply by namwebs

  • namwebs
  • Veteran
  • Offline
  • From: Namibia
  • Registered: 25-02-2013
  • Posts: 126

Re: How to show date picker for custom occurrence attribute

Hi,

Thanks.

The page has:

<script src="http://www.the-eis.com/atlas/misc/ui/jquery.ui.datepicker.min.js?v=1.8.7"></script>

and:

jQuery('#sample\\:date').datepicker({
    dateFormat : 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    constrainInput: false ,
    maxDate: '0',
    onClose: function() {
      $(this).valid();
    }
});

but I don't see any injected html like you describe.

The form is public temporarily here: http://www.the-eis.com/atlas/?q=submit- … axon=1828. The datepicker that is not working is on the third tab under "Nest observation date".

Does that help?

Thanks, Alice

namwebs's Website

6 Reply by Jim Bacon

  • Jim Bacon
  • Veteran
  • Offline
  • From: BRC
  • Registered: 03-11-2008
  • Posts: 980

Re: How to show date picker for custom occurrence attribute

Hi Alice,

Just seen your post - I didn't get an email notification for some reason. Very helpful to be able to see the form.

The sample date is working so that immediately proves the jquery libraries are in place and working. The code you have seen beginning jQuery('#sample\\:date').datepicker is attaching the date picker to the sample date. What we also need to see is something attaching the date picker to the occurrence attribute dates.

When I saw the form the revelation was that it was a multi-species grid-entry form rather than a single species form. This means that the area of code that needs investigating is different from what I might otherwise have thought. Because rows are added dynamically to the grid then the datepicker also needs attaching dynamically. You can find in data_entryHelper::date_picker() a comment saying "Don't set js up for the datepicker in the clonable row for the species checklist grid"

The code that adds rows to the checklists is in media/addRowToGrid.js. In makeSpareRow() you can find code labelled "Attach auto-complete code to the input" but there is nothing as far as I can see to attach datepicker code to an input. I think a small amount of development is needed.

The next step would be to raise an issue in https://github.com/Indicia-Team/media/issues. Could you do this? You will then be notified of any comments or actions relating to the issue. Better still if you are able to implement a fix and submit a pull request to the repository.

Jim Bacon.