Date field with restricted dates

  • Resolved Ralfnator

    (@ralfnator)


    2 years, 6 months ago

    Hi,

    what a great plugin. I′ve bought the premium version and can recommend it.

    I just have one question: is it possible to restrice dates in a datefield or something like a calendar, where only these days are available, which I provided by a JSON link?

    I got it work for a select field, but of course due to the usability a calendar or datepicker is more comfortable like a select.

    Best regards,

    Ralf

Viewing 1 replies (of 1 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @ralfnator

    Thank you very much for using our plugin. The date control in WCF7 includes the attributes:

    min, max, step, id, class, and placeholder

    And it is based on the HTML5 date input tags.

    https://contactform7.com/date-field/

    So, you can modify only these attributes with the information received from the JSON structure.

    I’ll try to describe the process with an example. Assuming you have the JSON object:

    [{date:'2022-05-22', min:'2022-05-20', max:'2022-05-25'}]

    I’ll use the following URL for demo:
    https://resources.developers4web.com/cf7/temp/05/23/db.json

    Assign the value is very simple:

    [date date]

[cf7-recordset id="data" type="json" url="https://resources.developers4web.com/cf7/temp/05/23/db.json"]

[cf7-link-field recordset="data" field="date" value="date"]

    However, defining the min and max attributes is more complex because it requires the use of plugin events:

    [date date]

[cf7-recordset id="data" type="json" url="https://resources.developers4web.com/cf7/temp/05/23/db.json"]

[cf7-link-field recordset="data" field="date" value="date"]

<script>
    document.addEventListener('cf7-recordset', function(evt){
        if(evt.detail['recordset-id'] == 'data')
        {
            jQuery('[name="date"]').attr('min',evt.detail['recordset-data'][0]['min']).attr('max', evt.detail['recordset-data'][0]['max']);
        }
    }); 
</script>

    https://cf7-datasource.dwbooster.com/documentation#javascript-events

    Best regards.

Viewing 1 replies (of 1 total)
  • The topic ‘Date field with restricted dates’ is closed to new replies.