Restrict Date Fields

[logistics]

Hello all,

 

I am in the middle of creating a submission form.

It will have two dates: a start date and end date, both selected from a calendar.

The start date is compulsory.

The end date is not compulsory.

 

When the user inputs the start date, on clicking out of the field, I need the form to check if the date is both greater to or equal to 25 April 2016, AND less than or equal to 01 May 2016.

If it is incorrect, I need a message to be displayed indicating the error, and stopping the user from moving on.

 

If the user decides to input an end date, on clicking out of the field, I need the form to check if the date is both greater to or equal to the start date, AND less than or equal to 01 May 2016.

If it is incorrect, I need a message to be displayed indicating the error, and stopping the user from moving on.

 

How can I achieve this?

 

Thanks in advance, 

Julien

[MayMusic]

Hello Julien, try the code below

<script>
function checkdate(){
var v_sDate = document.getElementById("InsertRecorddate").value;
var sDate = new Date(v_sDate);

var endD= new Date("04/25/2016");

var startD=new Date("05/01/2016");
if (sDate>=endD && sDate<=startD){

alert("enter a different date");
return false;
}
}
document.getElementById("InsertRecorddate").onblur=checkdate;
document.getElementById("caspioform").onsubmit=checkdate;
</script>

Replace InsertRecorddate with the actual date field ID

[logistics]

Hello MayMusic,

 

Thank you so much for this.

 

Excuse my ignorance, but where should I put this code?

In a HTML block, or in the header/footer?

Do I need to disable the HTML editor?

 

Thanks again,

Julien

[LWSChad]

I would suggest the footer.**

 

Put this code in the "Source" of the Footer by clicking the "<>" button, or disable the HTML editor as you mention.

 

 

**Code in the Footer often helps performance.

**Code in the Header allows you to do stuff before the pages loads.

[edujobs2k18]

Hi Guys,

 

I have one date field which is a display field called "result date". And there is a date field called "Date of Joining". I want to restrict "Date of joining" basis of "Result date". I dont want my user to choose "Date of Joining" which is earlier than "Result Date". Any one knows the solution? thanks in advance.

[DefinitelyNot31337]

Hello,

 

You might want to check the forum posts/threads below. The Calculated Values / Formula Fields feature work well on this use-case:

 

 

Cheers,

DN31337!

[Kurumi]

Hi - these posts might help as well:

 

[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:

[DaveS]

Sharing a couple of learnings and a question.

Learnings:

1.  Don't make the time fields hidden...  I copied and pasted the code into my footer and was pleased to see the time picker show up at the top of the page, but couldn't figure out how to control it.  Turns out all I needed to do was to make the text field NOT hidden.

2.  If you want to set a default time, you CAN use defaultHours="9", defaultMinutes="00".  I could not use defaultDate="09:00"

Now for the question:

When I do all this it works great, but the defaults don't appear until somebody clicks on the fields.  Would appreciate any guidance on how to get the defaults to be visible on load of the page.

 

Thanks!

[PotatoMato]

Hi! Just to add, Caspio has released a new article for disabling future dates: https://howto.caspio.com/tech-tips-and-articles/disabling-past-or-future-dates-in-calendar/

 

-Potato