Regarding constraint on date

[Harpreet]

I want my customer should only select the from last monday only not before that.  Whenver new week came the last day to select is from last monday to now. How should I do that. 

AND if you are suggesting me html code. Please also tell me the instructions where should I put these codes as I am new to Caspio.

As Today is Thursday all dates before 25 should disappear.

[Wikiwi]

You might want to look into this forum post. 

 

You might need to edit the task to accommodate your specific range but the general idea of the workflow where you replace the input form to a dropdown can be a workaround.

 

[futurist]

Hi @Harpreet,

am i right in understanding that you want to prevent your users from selecting previous dates from last week, correct? so only the monday of the current week and the future dates should be selected.

I did this workaround where I created another date field wherein the popup calendar blocks the previous date from the previous weeks. 

 

https://c1hch576.caspio.com/dp/db26a0007065f385f52745b28b16

What i did was add an HTML block and paste this:

Date : <input id="date_picker" type="date" onchange="myFunction()">

This is going to act like a substitute for the actual date field. You would need to hide the actual date field by setting the form element to "Hidden"

Add a Header and Footer. Disable the HTML editor for both. On the Header, paste the ff:

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>

 

On the Footer, paste the ff:

<script language="javascript">

function myFunction() {
  var x = document.getElementById("date_picker").value;
var myarr = x.split("-");
var samedate =  myarr[1] + "/" + myarr[2] + "/" + myarr[0];
  document.getElementById("InsertRecordField_Date").value = samedate;
}

function getMonday(d) {
  d = new Date(d);
  var day = d.getDay(),
      diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
  return new Date(d.setDate(diff));
}

let yourDate = getMonday(new Date())
    $('#date_picker').attr('min', yourDate.toISOString().split('T')[0]);

</script>

Wherein "InsertRecordField_Date" refers to my actual date field. Change the "Field_Date" to whatever is the name of your actual field date. Keep the "InsertRecord" prefix.

 

Basically what transpires is, your user is actually going to see the date field you added instead of your actual date field, and what the script I provided is going to do is, whatever date a user selects on the substitute field, that date will also be placed on the actual date field. The script also ensures that the previous dates from previous weeks cannot be selected on the substitute field's calendar popup, and that only the monday of the current week onwards are available. 

When they hit Submit, the date should still reflect on your table.

 

[Harpreet]

Hey @futurist how can i make this field manadatory. and the view in the phone screen didn't display the box for date selection AND IF i SELECT THE CALENDER IT WILL ALLOW ME TO SELECT OTHER DATES WHICH ARE PROHIBITED BUT THE FORM GOT SUBMITTED AND THE DATE IS NOT AVAILABLE THERE(IF A USER SELCT THE PROHIBITED DATE)

[futurist]

hi @Harpreet,

 

you can add a "required" attribute on the input field to make it mandatory. like:

<input required></input>

As for the display view on phone, im not sure in entirely understand whats happening. the photo you attached is also broken for some reason

[Kurumi]

Hi! - Just wanted to share this solution. If you want to save and restrict/disable Date. You may use an external JS library called flatpickr: https://flatpickr.js.org/getting-started/ 

To apply in the DataPage, follow these steps:

1. Insert Header and Footer. In the Footer, insert the code below. Make sure to disable first the HTML Editor in the Advanced Tab.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <!--  Flatpickr  -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>

$("#InsertRecordAppointment").flatpickr({
    dateFormat: "d/m/Y",
    altInput: true,
    altFormat: "m/d/Y",
    disable: [
        {
            from: "26-10-2022",
            to: "31-10-2022"
        }
    ]
});

</script>

Optional: You can insert this Style/CSS in the Header to change the font based on your DataPage's style.
 

<style>

.flatpickr-calendar {

 font-family: system-ui !important;

}

</style>

To know the formats, you can check them here: https://flatpickr.js.org/formatting/

enableTime - you are enabling time to the picker
dateFormat - format of the date that will be saved in the table. Caspio only accepts MM/DD/YYYY format in the table.
disable: range of date that you would like to disable - format will be based on the the dateFormat 

If you want to have a different display in the Text Field when selecting Date and Time, you can add altInput. altInput hides your original input and creates a new one.

Upon date selection, the original input will contain a m/d/Y H:i string, while the altInput will display the date in a more legible, customizable format.

Example:

$("#DATETIMEFIELD").flatpickr({
    enableTime: true,
    dateFormat: "m/d/Y H:i",
    altInput: true,
    altFormat: "F j, Y H:i"
});

IMPORTANT Note: Uncheck the Calendar pop-up in the field to apply the flatpickr.

Result:

[PotatoMato]

Hi! Just to update, Caspio has added an article to disable past or future dates: https://howto.caspio.com/tech-tips-and-articles/disabling-past-or-future-dates-in-calendar/

[cianelectric]

On 10/22/2022 at 12:44 AM, Kurumi said:

Hi! - Just wanted to share this solution. If you want to save and restrict/disable Date. You may use an external JS library called flatpickr: https://flatpickr.js.org/getting-started/ 

To apply in the DataPage, follow these steps:

1. Insert Header and Footer. In the Footer, insert the code below. Make sure to disable first the HTML Editor in the Advanced Tab.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <!--  Flatpickr  -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>

$("#InsertRecordAppointment").flatpickr({
    dateFormat: "d/m/Y",
    altInput: true,
    altFormat: "m/d/Y",
    disable: [
        {
            from: "26-10-2022",
            to: "31-10-2022"
        }
    ]
});

</script>

Optional: You can insert this Style/CSS in the Header to change the font based on your DataPage's style.
 

<style>

.flatpickr-calendar {

 font-family: system-ui !important;

}

</style>

To know the formats, you can check them here: https://flatpickr.js.org/formatting/

enableTime - you are enabling time to the picker
dateFormat - format of the date that will be saved in the table. Caspio only accepts MM/DD/YYYY format in the table.
disable: range of date that you would like to disable - format will be based on the the dateFormat 

If you want to have a different display in the Text Field when selecting Date and Time, you can add altInput. altInput hides your original input and creates a new one.

Upon date selection, the original input will contain a m/d/Y H:i string, while the altInput will display the date in a more legible, customizable format.

Example:

$("#DATETIMEFIELD").flatpickr({
    enableTime: true,
    dateFormat: "m/d/Y H:i",
    altInput: true,
    altFormat: "F j, Y H:i"
});

IMPORTANT Note: Uncheck the Calendar pop-up in the field to apply the flatpickr.

Result:

 

I'm trying to implement flatpickr to stop selecting of a future date on one of my data pages which has inline edit on the results page (i.e. to edit each row at a time) and it doesn't seem to be working....

In my header I have the following code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--  Flatpickr  -->

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

In my footer I have the code below and "Sample_Collection_Date" is the name of the field which is set as Date/Time data type in my table. 

I have disabled the calendar pop-up on the data page but it's not working as expected...

<script>

 

$("#InsertRecordSample_Collection_Date").flatpickr({

        dateFormat: "d/m/Y",

        altInput: true,

        altFormat: "m/d/Y",

        maxDate: "today"

    });

 

</script>

Any idea why it may not be working? I'm wondering if either it's because it won't work with in-line edit and / or my table data type is Date / Time (Caspio support pointed me to the flatpickr solution but in the example they gave me, the table data type was Text not Date / Time). 

Many thanks!

[Kurumi]

Hi, @cianelectric - are you receiving any errors in the console?

[ianGPT]

Hi @cianelectric,

The solution you are looking is designed for submission form. The ID's of the field are different in the tabular reports page and it's also using a different event listener. 

[cianelectric]

3 hours ago, ianGPT said:

Hi @cianelectric,

The solution you are looking is designed for submission form. The ID's of the field are different in the tabular reports page and it's also using a different event listener. 

Many thanks - do you know of any solution that could work for me in a tabular report page / how to modify the above code? Or is it not an easy question… thanks a lot!