Jump to content
  • 0

Restrict Date Fields


logistics
 Share

Question

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

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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.

image.png

Result:

image.png

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.

Guest
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.

Loading...
 Share

×
×
  • Create New...