Jump to content
  • 0

Regarding constraint on date



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.


Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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.


Link to comment
Share on other sites

  • 0

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. 



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]);


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.


Link to comment
Share on other sites

  • 0

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)


Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...