Date Range on Submission Form

[Elderberg]

I'm looking for javascript sample that would allow me to restrict my users to only be able to select between yesterdays, current date, and tomorrows date when using the calendar popup.  

 

[Vitalikssssss]

Hi @Elderberg,

I can suggest using a simple Dropdown or Listbox for date selection and a lookup table which will be updated via Tasks on daily basis.

Here is an example of Task which adds yesterdays, current date, and tomorrows date on daily basis.

You may also import this Task from attached archive.

Hope this helps.

Regards,

vitalikssssss

CaspioData_2019-Dec-02_1638.zip

[geoffdude]

Is "Loops" even available for tasks anymore? I don't see it.

[Elderberg]

9 hours ago, Vitalikssssss said:

Hi @Elderberg,

I can suggest using a simple Dropdown or Listbox for date selection and a lookup table which will be updated via Tasks on daily basis.

Here is an example of Task which adds yesterdays, current date, and tomorrows date on daily basis.

You may also import this Task from attached archive.

Hope this helps.

Regards,

vitalikssssss

CaspioData_2019-Dec-02_1638.zip 3.32 kB · 1 download

Good Stuff, i changed timestamp to date and got it to work.  Its an interesting work around which i'll consider.  it solves one challenge and creates others. but thank you kindly.

[Elderberg]

Hey Vitalikssssss,

I implemented your suggestion using a Dropdown box.  Previously I had a VirtualField configured as a TextField with calendar pop up enabled. 

Below are two lines of code which i used previously when the field was a TextField.  Can you advise how I would 1.) assign v_DateOnlyStamp as a value to the dropbox  2.) pass the selected value of the dropbox to a variable.  

// Assign Current Date 
document.getElementById('cbParamVirtual1').value=v_DateOnlyStamp;

//  pass value to variable
var date = document.getElementById('cbParamVirtual1').value;

[Elderberg]

I realize the Task creates the dates as a Date Object..  i think i need it to be saved as a String.  I was unsuccessful in my attempt to modify your Task.  Can you advise if this is possible? 

[Vitalikssssss]

14 hours ago, geoffdude said:

Is "Loops" even available for tasks anymore? I don't see it.

Hi @geoffdude,

It is available in 20.0 Caspio Bridge version.

Probably your site has not been updated yet to 20.0 Caspio Bridge version.

You can check your Caspio Bridge version within your account: from the top menu bar HELP --> About Caspio Bridge.

Also, you can check Caspio Twitter for latest information about system updates.

Regards,

vitalikssssss

[Vitalikssssss]

10 hours ago, Elderberg said:

I realize the Task creates the dates as a Date Object..  i think i need it to be saved as a String.  I was unsuccessful in my attempt to modify your Task.  Can you advise if this is possible? 

Hi @Elderberg,

I am not sure why you need Date to be saved as String, but anyway you can simple change the datatype for the field "Date".

Regards,

vitalikssssss

 

[Vitalikssssss]

10 hours ago, Elderberg said:

Hey Vitalikssssss,

I implemented your suggestion using a Dropdown box.  Previously I had a VirtualField configured as a TextField with calendar pop up enabled. 

Below are two lines of code which i used previously when the field was a TextField.  Can you advise how I would 1.) assign v_DateOnlyStamp as a value to the dropbox  2.) pass the selected value of the dropbox to a variable.  

// Assign Current Date 
document.getElementById('cbParamVirtual1').value=v_DateOnlyStamp;

//  pass value to variable
var date = document.getElementById('cbParamVirtual1').value;

What is the purpose of this script? 

Sorry, it does not make any sense to me.

Regards,

vitalikssssss

[geoffdude]

8 hours ago, Vitalikssssss said:

Hi @geoffdude,

It is available in 20.0 Caspio Bridge version.

Probably your site has not been updated yet to 20.0 Caspio Bridge version.

You can check your Caspio Bridge version within your account: from the top menu bar HELP --> About Caspio Bridge.

Also, you can check Caspio Twitter for latest information about system updates.

Regards,

vitalikssssss

I'm on 20.3 .. strange huh?

Update: I had to clear my cache to see the new version changes. It's all good now.

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

[roattw]

I couldnt get the flatpickr to work.

[IamNatoyThatLovesYou]

On 1/9/2023 at 3:02 PM, roattw said:

I couldnt get the flatpickr to work.

You may test this Caspio Techtip instead and check it out if it works for you. https://howto.caspio.com/tech-tips-and-articles/disabling-past-or-future-dates-in-calendar/