Single-day selection in date field

Knacksters' Idea Lab
1

Hi! I have a simple date field in a form that I want to limit to be able to select Mondays only. I think this can be achieved with JavaScript but I don’t know anything about that. Grateful for any ideas - thanks.

2

Hi Cristoffel

Have you tried using validation rules? See New Date Validation Options which might be of some help.

Regards
Dean

3

@Christoffel, see the below code.

This code applies to any view with that input field (including in-line editable fields).
This greys out all days except Monday on the datepicker calendar. I also set the input to readonly so users can’t manually type in another date.
Additionally, it sets Monday as the first day of the week, but you can remove the firstDay: 1, line if you still want Sunday as the first day.

limit-date-selection

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

  const dateFieldKey = 'field_xx';
    
  $(`#${view.key}-${dateFieldKey}`).datepicker( 'option', {
    firstDay: 1, // Set first day to Monday
    beforeShowDay: function(date){
      var day = date.getDay();
      return [day === 1, ''] // Only allow Mondays to be selected
    },
  })
  .attr('readonly', 'readonly'); // Make input read-only

});
2 Likes
4

Nice one @StephenChapman - I tried my best to come up with a code based solution but failed. :disappointed:

I acquired the below code a while ago, it only allows either past or future dates, you simply switch minDate to maxDate. It disables the calendar picker for all future dates, similar to your solution to disable Tuesday - Sunday.

The only challenge I see is the user could simply type the date in the field instead of using the calendar picker. In my use case, I’m using Knacks built in validation rules to stop the form being submitted, if it’s a future date. I don’t think that could be achieved in this particular situation?

Out of curiosity, how could you deal with this? :thinking:

Knowing you my friend, I’m sure there is a way this old man hasn’t thought of :rofl:


$(document).on('knack-page-render.scene_xxx', function (event, scene) { $.datepicker.setDefaults({ minDate: '0' }); })

//Limit Date Picker by specific field
$(document).on('knack-view-render.view_1947', function (event, view, data) {
	$('#view_1947-field_655').datepicker('option', {
		minDate: 0
	});
})
5

@CarlHolmes, for preventing typing, add .attr('readonly', 'readonly'); like I have in my code above. This still doesn’t prevent a user changing in the developer console, so validation rules would come into play there where possible.

I’ll try make a resource soon with the following:

  • Make datepicker read-only
  • Show dropdown year and month
  • Only allow particular day of week
  • Only allow before or after today
  • Only allow within a certain number of days before/after today
  • Block out/format days based on date values in another view
  • Update min date in an end date datepicker when start date is updated (i.e. don’t allow end date to be earlier than start date)
  • Change timepicker increment in dropdown (e.g. every 30 minutes)
  • Any others…?
1 Like
6

@StephenChapman - ooh nice!!! - I hadn’t picked up on the “read only attribute”, that will be super useful. :+1:

Over the years I’ve picked up various snippets and I think I have all the ones checked below, however, if you are willing to provide the others it would be very much appreciated :thinking:

1 - Make datepicker read-only :white_check_mark:
2 - Show dropdown year and month :white_check_mark:
3 - Only allow particular day of week :pray:
4 - Only allow before or after today :white_check_mark:
5 - Only allow within a certain number of days before/after today :white_check_mark:
6 - Block out/format days based on date values in another view :pray:
7 - Update min date in an end date datepicker when start date is updated (i.e. don’t allow end date to be earlier than start date) :pray:
8 - Change timepicker increment in dropdown (e.g. every 30 minutes) :white_check_mark:

Not sure how point 6 would work, might need to see one of your excellent videos :facepunch:

This was my version of your point 2 - I’m sure your version is more professionally coded. I obtained mine a couple of years ago, before ChatGPT (and Canva, hence the uninspiring thumbnail :joy:)

This is my version of your point 8

7

@Dean2 @StephenChapman @CarlHolmes thank you all for your feedback. I’ll work with that and will see what I can do. Very grateful for your suggestions! Have a great day!

1 Like