Dates in bits n pieces

Ask the Community Get Answers
1

Hi Folks

Having a dumb day this should be simple.

I have to record various photographic images where the person submitting may know all or only part of a date applicable.

Basically they may know

a year
or a month and year
or a day month or year

So that won’t really work with a date field so I am assuming I need to create the 3 components

year month day

The year has specific criteria as before 1939 , the years to 1945, or after 1945 and that easy to do with a dropdown multiple choice field.

Same goes for months we have known 12 month to select from on another multiple choice field

But rather than do another mutiple choice for between 1 and 31 days what can you suggest to handle the day ?

Or can you suggest a better way or getting the input and accepting that it may be one of the 3 format types ?

Cheers

2

Hey @RayWindlow47079, would something like this work?:

This method uses multiple choice for all three fields, and there’s some JavaScript that controls the inputs that can be selected.

  • If a year is not selected, month and day can’t be selected
  • If a year is selected and month is not selected, day can’t be selected
  • When the month changes, days 29 to 31 are shown/hidden depending on the year/month

date-select

$(document).on(`knack-view-render.view_492`, function (event, view, data) {

  const $yearSelect = $(`#${view.key}-field_806`);
  const $monthSelect = $(`#${view.key}-field_807`);
  const $daySelect = $(`#${view.key}-field_808`);

  $monthSelect.on('change',function() {
    if(!$(this).val()) {
      $daySelect.val('').prop('disabled',true);
    } else {
      $daySelect.prop('disabled',false);
      filterDayOptions();
    }
  });

  $yearSelect.on('change',function() {
    if(!$(this).val()) {
      $monthSelect.val('').prop('disabled',true).change();
    } else {
      $monthSelect.prop('disabled',false).change();
    }
  });

  $yearSelect.change();
  
  function filterDayOptions() {
    const daysInMonth = moment(`${$yearSelect.val()}-${$monthSelect.val()}`, 'YYYY-M').daysInMonth();
    $daySelect.find('option').each(function() {
      const val = parseInt($(this).val(), 10);
      if (val > daysInMonth) {
        $(this).prop('selected',false);
        $(this).hide();
      }
      else {
        $(this).show();
      }
    });
  }

});

You can then combine your results using a text formula how you’d like:

image
image403×210 7.43 KB

3

Thank Stephen

I’ve filed that one away, handy little code.

I revisited the documents and took a simpler route.

I added a date field which can use calendar for setting a full date

And Year and Month text fields which are there as an alternative. A lot of images have just year but occasionally u get one that dates itself i.e distributing Xmas hampers 1940.

As this info is being copied into an online museum system which uses a standard template layout and in fact will be graphic text rather than data, the importance of sorting etc is not as important.

Really appreciate your taking the time to work through a solution and as I said I keep code snippets like that for future uses

Cheers