[Gelöst] Conditional-display of a field if date matches a timeslot regardless year

[Author]

Artikel

[dianaM-4]

I want to display a checkbox-field in my CRED-form for creating a new post, only if another date-field in my CRED-form fits a specific time-period, regardless of the year. Normally I would achieve this by adding a condition directly in my post-field (by a data-dependent display filter). But there aren't any filters for date-comparison.

I found this thread: https://toolset.com/forums/topic/filter-by-month-and-day/
But that doesn't solve my problem either, because the date-field, which should be compared to the time-period isn't stored in my database yet. The user has to fill in this date-field in the same CRED-form.

To be clear: My checkboxes only should appear in the CRED-form, if the user did set a date, that fits between 1st of December and 30th of April, regardless of the year. How can I do so?

[Mohammed]

Hi Diana,

I’m Mohammed: the Toolset support team leader. I’ll give my best to help you to achieve your needs through Toolset components.

I just wanted to make sure that I clearly understand your issue . Could you pease confirm that the following is exactly your issue?

- You created a CRED form which creates posts of a specific custom post type
- This post type has some fields
- One of the fields is a date field
- Another one is a checkboxes field
- What you need
-- While displaying the form and at the time the user fills the fields, you need to display the checkboxes field only if the date field fits between 1st of December and 30th of April.

Please confirm or correct me so that we can proceed to the next step.

Thanks.

[dianaM-4]

Yes, Mohammed, that's it. But also regardless of the year. So both dates 3rd December 2016 and 3rd December 2050 would match.

[Mohammed]

Hi Diana,

This is a pure JQuery work. I will develop an example for you and you might adapt it to fit your needs.

Please wait and I will get back to you again.

Thank.

[Mohammed]

Hi Diana,

I've prepared a working example on my local installation. please follow the following steps to implement your requirements.

- Open the curerntly active theme footer.php file
- Add the following code into it:

<script>

	jQuery(document).ready(function(){
		jQuery("input[name='wpcf-testfield']").parent().parent().hide();
		jQuery("input[name='wpcf-test-date[display-only]']").datepicker('option','onClose',function(dateText, inst){
			console.log(inst.selectedMonth);
			console.log(inst);
			if(inst.currentDay==0||inst.currentDay==0)return;
			comparingStartDate= new Date(2016 ,04,30);
			comparingEndDate= new Date(2016 , 12,01);

			selectedDate=new Date(2016 ,inst.currentMonth,inst.currentDay);

			console.log(selectedDate);
			console.log(comparingStartDate);
			console.log(comparingEndDate);


			if( comparingEndDate >= selectedDate &&  comparingStartDate <= selectedDate )
			{
				jQuery("input[name='wpcf-testfield']").parent().parent().show();
			}else{
				jQuery("input[name='wpcf-testfield']").parent().parent().hide();
			}
		});
	});

</script>

- Change the selectors in the previous code accordingly
-- The date field: this selector: "input[name='wpcf-test-date[display-only]']" should be changed to fit your date field name
-- The dependent field: this selector name='wpcf-testfield'] should be changed to match your dependent field as well

Please edit this code and implement it and let me get your feedback.

Thanks.

[dianaM-4]

Hi Mohammed!

Thanks for your code. It didn't work for me in first place, but your console-logs gave me the right direction to solve the problem. I changed these things:

I had to put the code outside the onClose of the datepicker, because I'm changing the date-values also from outside CRED. So I used an on-input-change-function.

My datepicker-format doesn't fit your given format - changed it.

The comparing start- and end-dates would have been between 2016 and 2017, but the calculated date was always in the year 2016. So for example 01-02-2016 didn't match the time-period. I splitted the comparing dates in two time-periods, one for December 2016 and the other from 01-01-16 to 30-04-16.

For the record, my code is now like that and works perfectly:

$( #mydatepickerfield ).datepicker().on("input change", function(e) {
    var dateParts = e.target.value.split(".");
    var compStart1 = new Date("December 07, 2016");
    var compEnd1 = new Date("December 31, 2016");
    var compStart2 = new Date("January 01, 2016");
    var compEnd2 = new Date("April 30, 2016");
    var compDate = new Date(2016, dateParts[1] - 1, dateParts[0]);
    if ( ( compStart1 <= compDate && compEnd1 >= compDate) || ( compStart2 <= compDate && compEnd2 >= compDate) ) {
      $(".cred-field-anfr-sok").show();
    } else {
      $(".cred-field-anfr-sok").hide();
    };
  });  

So thanks again, Mohammed!
Best regards, Diana