[ERLEDIGT] DateTimePicker bei Nutzung einer JS schlägt fehl

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mateng

Neues Mitglied
29 Oktober 2017
14
0
1
Hallo zusammen,
diesen kleinen Code habe ich geschrieben:
Code:
<html>
    <head>
        <title>Kalendertest</title>
        <script src="jquery-3.3.1.min.js"></script>
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap.min.js"></script>
        <link href="bootstrap-datetimepicker.min.css" rel="stylesheet">
        <script src="bootstrap-datetimepicker.min.js"></script>
                
        <script type="text/javascript">
            window.onload = function() {
                //alert (document.getElementById("mySelect").value);
                if(document.getElementById("mySelect").value == "STOP"){
                    document.getElementById("demo1").innerHTML = '<input type="hidden" id="datetime4" readonly>';
                }else{
                    document.getElementById("demo1").innerHTML = '<input type="text" id="datetime4" readonly>';
                }
            }
        </script>
        
        <script>
            function myFunction(){
            
                //alert(document.getElementById("mySelect").value);
                if(document.getElementById("mySelect").value == "STOP"){
                    document.getElementById("demo1").innerHTML = '<input type="hidden" id="datetime4" readonly>';
                }else{
                    document.getElementById("demo1").innerHTML = '<input type="text" id="datetime4" readonly>';
                }
            }
        </script>
        
    </head>

    <body>
    
        <select id="mySelect" name="Status" size="1" onchange="myFunction()">';
            <optgroup label="RUN-Time">
                <option label="stop">STOP</option>
                <option selected label="go">GO</option>
            </optgroup>
        </select>
        
        <div id="demo1">
        <script>
            $("#datetime4").datetimepicker({format: "dd.mm.yyyy hh:ii",autoclose: true, minuteStep : 1})
        </script>
        </div>
    
    
        <!-- funktioniert
        <div></div>
        <script type="text/javascript">
            var Entscheidung = 1;
            if(Entscheidung == 1){
                var ball = '<input type="text" id="datetime3" readonly>';}
            else{
                var ball = '<input type="hidden" id="datetime3" readonly>';}
            document.getElementsByTagName('div')[0].innerHTML = ball;
        </script>
        <script>
            $("#datetime3").datetimepicker({format: "dd.mm.yyyy hh:ii",autoclose: true, minuteStep : 1})
        </script>
        -->

        <input type="text" id="datetime1" readonly>
        <script>
            $("#datetime1").datetimepicker({
                format: 'dd.mm.yyyy hh:ii',
                autoclose: true,
                minuteStep : 1
            });
        </script>
        
        <input type="text" id="datetime2" readonly>
        <script>
            $("#datetime2").datetimepicker({
                format: 'dd.mm.yyyy hh:ii',
                autoclose: true,
                minuteStep : 1
            });
        </script>
        
    </body>
</html>
Der DateTimePicker ist aus dem Netz und funktioniert für datetime1 und datetime2 wunderbar.
Auskommentiert ist der Teil für datetime3, wo in Abhängigkeit von der Variable "Entscheidung" das Input-Feld für datetime3 funktionsfähig dargestellt wird.

Mein aktuelles Problem ist allerdings datetime4:
Je nach Vorauswahl im Select-Block soll beim Laden der Seite bzw. bei einem User-Change im Select-Block das Input-Feld für datetime4 angezeigt werden/oder nicht.
Klappt soweit sogut. Einzig der DateTimePicker funktioniert dann in dem Feld nicht.

Hier würde ich mich über die ein oder andere Hilfestellung freuen.

Vielen DAnk im Vor aus.

Gruß
Mateng
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.311
263
83
66
Der Grund dafür, dass es nicht funktioniert, ist, dass Du das Eingabefeld erst beim Onload erzeugst und dann jedes Mal neu, wenn der Benutzer eine andere Option auswählt.
Besser dieses Eingabefeld statisch anlegen und nur das Attribut "type" ändern, wenn eine neue Option ausgewählt wird:
Code:
            function myFunction(){
            
                //alert(document.getElementById("mySelect").value);
                var inputele = document.getElementById("datetime4");
                if(document.getElementById("mySelect").value == "STOP"){
                    inputele.type = "hidden";
                }else{
                    inputele.type="text";
                }
            }
 

Mateng

Neues Mitglied
29 Oktober 2017
14
0
1
Vielen Dank. Es konnte direkt so umgesetzt werden und funktioniert.

Gruß
Mateng
 
Werbung: