Formular Generator

… oder Du bemühst mal wieder die KI (künstliche Intelligenz) ChatGPT, was ich gerade probiert habe.

Da bekomme ich gleich wieder in 2 Sekunden eine perfekte Lösung als fertiges Beispiel erstellt. In meinem Online-Beispiel ist der wählbare Zeitraum auf plus/minus 1 Jahr begrenzt:

https://www.mobirise-tutorials.com/Tuto ... n-max.html

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formular mit Datepicker</title>
    <style>
        input[type="date"] {
            font-size: 16px;
            padding: 5px;
            width: 200px;
        }
    </style>
</head>
<body>
    <form>
        <label for="datepicker">Datum wählen:</label>
        <input type="date" id="datepicker" name="datepicker">
        <input type="submit" value="Absenden">
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var datepicker = document.getElementById('datepicker');
            var today = new Date();
            var minDate = new Date();
            var maxDate = new Date();
            minDate.setFullYear(today.getFullYear() - 10);
            maxDate.setFullYear(today.getFullYear() + 10);

            // Format the date as YYYY-MM-DD for the date input value
            function formatDate(date) {
                var day = String(date.getDate()).padStart(2, '0');
                var month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
                var year = date.getFullYear();
                return year + '-' + month + '-' + day;
            }

            datepicker.min = formatDate(minDate);
            datepicker.max = formatDate(maxDate);
        });
    </script>
</body>
</html>

Der Bereich ist also im Skript oben nur - plus/minus 10 Jahre - vom jeweiligen Tagesdatum wählbar, also heute am 25.06.2024 beginnt der Kalender am 25.06.2014 und endet am 25.06.2034:

Meine Eingabe bei ChatGPT war:

Tommy hat geschrieben:
Erstelle ein Formular mit Datepicker. Begrenze die Auswahl vom Datum auf plus/minus 10 Jahre.

Daraufhin bekam ich ein Skript das auf jQuery aufgebaut war:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formular mit Datepicker</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            var today = new Date();
            var minDate = new Date();
            var maxDate = new Date();
            minDate.setFullYear(today.getFullYear() - 10);
            maxDate.setFullYear(today.getFullYear() + 10);
            
            $("#datepicker").datepicker({
                dateFormat: 'dd.mm.yy',
                minDate: minDate,
                maxDate: maxDate
            });
        });
    </script>
</head>
<body>
    <form>
        <label for="datepicker">Datum wählen:</label>
        <input type="text" id="datepicker" name="datepicker">
        <input type="submit" value="Absenden">
    </form>
</body>
</html>

... eigentlich gleich mit dem reinen JavaScript, aber ich habe dann noch bei ChatGPT hinzu geschrieben:

Tommy hat geschrieben:
bitte ändere das Script in reines JavaScript

… und hier noch ein Script, dass ich auf plus/minus 1 Monat begrenzt habe:

https://www.mobirise-tutorials.com/Tuto ... frage.html

Meine Eingabe bei ChatGPT war:

Tommy hat geschrieben:
Kannst du die Auswahl vom Datum auf plus/minus 1 Monate ändern.

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formular mit Datepicker</title>
    <style>
        input[type="date"] {
            font-size: 16px;
            padding: 5px;
            width: 200px;
        }
    </style>
</head>
<body>
    <form>
        <label for="datepicker">Datum wählen:</label>
        <input type="date" id="datepicker" name="datepicker">
        <input type="submit" value="Absenden">
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var datepicker = document.getElementById('datepicker');
            var today = new Date();
            var minDate = new Date();
            var maxDate = new Date();
            
            // Set minDate to one month before today
            minDate.setMonth(today.getMonth() - 1);
            // Set maxDate to one month after today
            maxDate.setMonth(today.getMonth() + 1);

            // Format the date as YYYY-MM-DD for the date input value
            function formatDate(date) {
                var day = String(date.getDate()).padStart(2, '0');
                var month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
                var year = date.getFullYear();
                return year + '-' + month + '-' + day;
            }

            datepicker.min = formatDate(minDate);
            datepicker.max = formatDate(maxDate);
        });
    </script>
</body>
</html>

ZeitlerK

Hallo Tommy,
danke für die Hinweise, aber das Problem war nicht der Formulargenerator,
sondern ich. Ich habe den Code immer in der .php Datei geändert, den geänderten Code aber nicht in mein Mobirise-Seite übernommen.
Tut mit Leid für die Umstände
Klaus

Moin,

jepp - das kenne ich auch ganz gut

Klaus,

ich habe mir gerade mal PHP "range" angesehen.

Bisher habe ich mich kaum mit PHP beschäftigt, außer dem Einbau der vielen Skripte von Werner in Mobirise. Ich habe mir das hier aber mal ausprobiert:

https://www.mobirise-tutorials.com/Test ... /range.php

Keine Ahnung, aber vielleicht hilft es dir ja:

Code: Alles auswählen

<?php

$today = date("Y");
echo $today;
echo '<br>';
print_r(range($today, $today-10, -1));
echo '<br>';
print_r(range($today-10, $today, +1));

?>

Mobirise-Tutorials.com

Formular Generator

Re: Formular Generator

Re: Formular Generator

Re: Formular Generator

Re: Formular Generator

Re: Formular Generator

Wer ist online?