Fråga om Javascript Time Picker "Nästan där"

C, C++, Pascal, Assembly, Raspberry, Java, Matlab, Python, BASIC, SQL, PHP, etc.
Användarvisningsbild
papabear
Inlägg: 821
Blev medlem: 14 mars 2004, 03:27:12
Ort: Eskilstuna
Kontakt:

Re: Fråga om Javascript

Inlägg av papabear »

Nu har jag fipplat lite.
Gjorde ett formulär efter infon i början av tråden.

Har ändrat så det bara är en modal. videoId plockas från knappens data-video-id och läggs formulärets videoId-fält när modalen skall visas.
Sen får du göra en mottagande php-sida som skriver ner data till databasen och ger svar som du vill ha.

Kod: Markera allt

<!DOCTYPE html>
<!-- saved from url=(0041)http://www.hahnes.se/video/modalTest.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Time Stamp Test</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="./Time Stamp Test_files/all.css">
    <link href="./Time Stamp Test_files/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="./Time Stamp Test_files/album.css" rel="stylesheet">
    
    
</head>

<body class="">
  <section class="jumbotron text-center">
    <div class="container">
        <h2 class="jumbotron-heading black-color">Click on a modal you want to open.</h2>
    </div>
  </section>
    
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm" data-video-id="1">
    Launch demo modalA
  </button>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm" data-video-id="2">
    Launch demo modalB
  </button>

  <div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Modal form.</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="myForm" action="receiver.php">
            <div class="form-group">
              <label for="id-input">Id</label>
              <input type="text" class="form-control" id="id-input" name="videoId" placeholder="0" readonly>
            </div>
            <div class="form-group">
              <label for="event-start-time-input">Event start time</label>
              <input type="text" class="form-control" id="event-start-time-input" name="eventStartTime">
            </div>
            <div class="form-group">
              <label for="event-stop-time-input">Event stop time</label>
              <input type="text" class="form-control" id="event-stop-time-input" name="eventStopTime">
            </div>
            <div class="form-group">
              <label for="event-info">Event info</label>
              <input type="text" class="form-control" id="event-info" name="eventInfo">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary" id="saveTime">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <script src="./Time Stamp Test_files/jquery.min.js"></script>
  <script src="./Time Stamp Test_files/popper.js"></script>
  <script src="./Time Stamp Test_files/bootstrap.min.js"></script>
  <script src="./Time Stamp Test_files/my_script.js"></script>

</body>
</html>

Kod: Markera allt

$(function(){
    $("#saveTime").on("click", function(event) {      
       var $form = $("#myForm"),
         data = $form.serialize(),
         url = $form.attr( "action" );
   
       $.post( url, data )  //i din receiver.php (form action) bör du komma åt postat data med $_POST, kanske så här(jag har inget php-miljö att testa i)? $_POST["eventInfo"]
           .done(function(result) {
               
                //kanske uppdatera nånting med det data du får tillbaka (om du skickar tillbaka nåt dvs)

               $form.trigger('reset');
               $('#modalForm').modal('hide');
           })
           .fail(function(jqXHR, textStatus, errorThrown){
               alert(textStatus);               
               console.log(jqXHR);
               console.log(textStatus);
               console.log(errorThrown);
           });
     });
   
   $('#modalForm').on('show.bs.modal', function (event) {
       var button = $(event.relatedTarget);
       var videoId = button.data('videoId');
       
       var modal = $(this);
       modal.find('.modal-body #id-input').val(videoId)
     })
});
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

@papabear. Först måste jag tacka dig för allt arbete du lägger ned på att hjälpa mig.
Jag har inte testa ditt förslag ännu. Jag fattar hur det är tänkt att fungera,men jag förstår inte fullt ut själva syntaxen och skall jag lära mig något av detta så vill jag inte bara kopiera och köra.

Det jag inte riktigt fattar är hur:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm" data-video-id="1">

hänger ihop med js-koden:

var button = $(event.relatedTarget); // den här raden antar jag talar om att det är knappen #modalform man klickat på.

var videoId = button.data('videoId'); //här blir jag inte klok på vart värdet button.data('videoId') hittas. I button står det data-video_id="..." Kan det vara en felskrivning eller?

slutligen dessa rader

var modal = $(this); // hur funkar detta this? Talar den om att handlar om #modalForm

modal.find('.modal-body #id-input').val(videoId) //denna rad tror jag att jag förstår. Man lägger in videoId i inputfältet som har= id-input?
Användarvisningsbild
papabear
Inlägg: 821
Blev medlem: 14 mars 2004, 03:27:12
Ort: Eskilstuna
Kontakt:

Re: Fråga om Javascript

Inlägg av papabear »

Det jag inte riktigt fattar är hur:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm" data-video-id="1">

hänger ihop med js-koden:

var button = $(event.relatedTarget); // den här raden antar jag talar om att det är knappen #modalform man klickat på.
Metoden (rad 23-30) triggas av eventet show.bs.modal och i event-parametern skickar bootstrap med info om tex vad som triggade eventet (relatedTarget), vilket är knappen som klickades i detta fall.
var videoId = button.data('videoId'); //här blir jag inte klok på vart värdet button.data('videoId') hittas. I button står det data-video_id="..." Kan det vara en felskrivning eller?
Nej, dataattribut funkar så, iaf med jQuery.
Ex: <button data-name-of-prop="abc">
Skulle du i detta fall komma åt med: button.data("nameOfProp").
Du kan också använda button.attr("data-name-of-prop").
var modal = $(this); // hur funkar detta this? Talar den om att handlar om #modalForm
Eftersom metoden körs för eventet på modalen så är this modalen.
modal.find('.modal-body #id-input').val(videoId) //denna rad tror jag att jag förstår. Man lägger in videoId i inputfältet som har= id-input?
Ja, den hittar id-input i modal-body. just ".modal-body"-delen behöver man inte iom att vi ändå hämtar med id, men det kommer från ett exempel där de hämtade en input i modal-bodyn.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Jättetack för hjälpen. Nu fungerar uppdateringen till databasen med id_nr perfekt. :tumupp: :tumupp: :tumupp:
Nu skall inmatningsfälten kollas med javascript och som vanligt så har jag en väldig otur när jag tänker javascript. :(

Jag började med fältet event_start_time som skall vara obligatoriskt. Först tänkte jag kolla att det finns övehuvudtaget och sedan att det har rätt tidsformat. Att kolla att det fans gav mig inga problem. Men efter att jag fått upp ett alert så hoppar markören till nästa fält och det vill jag ju inte. Jag vill ju inte lämna event_start_time för än det har skrivits något där, så jag klämde till med document.getElementById(" event_start_time").focus();

Kod: Markera allt

HTML:
<input type="text" class="form-control" id="event_start_time" name="event_start_time" onfocusout="checkTime()" placeholder="Enter event stoptime (HH:MM:SS)">

JS:
function checkTime() {            
            $text=document.getElementById("event_start_time").value;
            if ($text ==""){
                alert('Start Time must have a Value! (HH:MM:SS');
                document.getElementById(" event_start_time").focus();
            }            
        } 
Ja, det gick ju sådär. Så fort jag klickat Ok. på Alert så dyker samma Alert upp igen och igen och igen.......och där hänger sig allt i en loop eftersom jag inte kommer åt att skriva något i inputfältet. Hoppas på hjälp även denna gång. :oops:

När jag blir stor skall jag gå en repetionskurs i JS. Jag har kilometers med JS-kod jag en gång skrivit men fattar nada av det idag. Mycket har säkert ändrats också för när jag testar gamla JS-koder som jag grävt upp så funkar de inte i alla fall. Tur det finns kunskap på EF :)
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript

Inlägg av SeniorLemuren »

Glöm sista inlägget. Alert är lite gammalmodigt. Jag kommer att använda time-picker i stället, då får man ju rätt format automagiskt. För att kolla om fältet är tomt finns ju en Bootstrap rutin. Faan allt har blivit mycket lättare nu än förr, då fick man bygga allt själv.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript Time Picker

Inlägg av SeniorLemuren »

Så där ja. Nu har jag lagt ner 10 timmar på att googla fram en gratis time picker till Bootstrap 4. Jag har testat en hel jävla bunt. En delfungerar andra inte. Den som fungerade bäst gick det inta att få att visa 24 timmar, den hade en knapp för AM och PM. Enligt uppgifter så skulle den gå att konfigurera till 24 tim. utan PM/AM knapp men det funkade inte.

Är det möjligen någon här som har en länk till en fungerande Time Picker så blir jag glad. :)
Användarvisningsbild
papabear
Inlägg: 821
Blev medlem: 14 mars 2004, 03:27:12
Ort: Eskilstuna
Kontakt:

Re: Fråga om Javascript Time Picker

Inlägg av papabear »

Tex Tempus Dominus.
Locale-filer finns här (jag tog hem sv och döpte till moment_sv.js i koden nedan).

Kod: Markera allt

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Time Stamp Test</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="./css/all.min.css">
    <link href="./css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="./css/album.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
    
    
</head>

<body class="">
  <section class="jumbotron text-center">
    <div class="container">
        <h2 class="jumbotron-heading black-color">Click on a modal you want to open.</h2>
    </div>
  </section>
    
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm" data-video-id="1">
    Launch demo modalA
  </button>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm" data-video-id="2">
    Launch demo modalB
  </button>

  <div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Modal form.</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="myForm" action="receiver.php" method="POST">

            <div class="form-group">
              <label for="id-input">Id</label>
              <input type="text" class="form-control" id="id-input" name="videoId" placeholder="0" readonly>
            </div>

            <div class="form-group">
              <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                <label for="event-start-time-input">Event start time</label>
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" id="event-start-time-input" name="eventStartTime">
                <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                  <div class="input-group-text"><i class="far fa-clock"></i></div>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                <label for="event-stop-time-input">Event start time</label>
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" id="event-stop-time-input" name="eventStopTime">
                <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                  <div class="input-group-text"><i class="far fa-clock"></i></div>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="event-info">Event info</label>
              <input type="text" class="form-control" id="event-info" name="eventInfo">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="saveTime">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <script src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
  <script src="./js/moment_sv.js"></script>
  <script src="./js/popper.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
  <script src="./js/my_script.js"></script>
</body></html>

Kod: Markera allt

$(function(){
  $("#saveTime").on("click", function(event) {      
      var $form = $("#myForm"),
        data = $form.serialize(),
        url = $form.attr( "action" );
  
      $.post( url, data )  //i din receiver.php bör du komma åt postat data med $_POST, kanske så här(jag har inget php-miljö att testa i)? $_POST["eventInfo"]
          .done(function(result) {
              
              //kanske uppdatera nånting med det data du får tillbaka (om du skickar tillbaka nåt dvs)

              $form.trigger('reset');
              $('#modalForm').modal('hide');
          })
          .fail(function(jqXHR, textStatus, errorThrown){
              alert(textStatus);               
              console.log(jqXHR);
              console.log(textStatus);
              console.log(errorThrown);
          });
    });
   
  $('#modalForm').on('show.bs.modal', function (event) {
    

      var button = $(event.relatedTarget);
      var videoId = button.data('videoId');
      
      var modal = $(this);
      modal.find('.modal-body #id-input').val(videoId)
    })

    $('#datetimepicker1,#datetimepicker2').datetimepicker({
      locale: 'sv',
      format:'LT'
    });
});
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript Time Picker

Inlägg av SeniorLemuren »

Hurra! Tack! Nu funkar det. Den där höll jag på med ett bra tag igår innan jag fick din hjälp. Jag hade missat en liten detalj Nämligen :

Kod: Markera allt

locale: 'en-gb'
//Jag hade bara skrivit: 
[code]format: 'LTS'
Jag hade bara länkat till <script src="en-gb.js"></script> Men det räckte tydligen inte och det är klart, man kan ju ha flera språkscript inlagda, då måste man ju naturligtvis tala om vilket som gäller. Den informationen sökte jag efter men hittade inget svar. Tur det finns kunniga på EF. Nu går jag vidare till bootstrap-form-validation Får se om det kommer att funka utan att håret på skallen ryker.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript Time Picker

Inlägg av SeniorLemuren »

Ber om ursäkt. Det var bara en skitsak som jag skulle komplettera Time Picker med innan jag gick vidare, jag tänkte att jag lätt hittar vad jag vill göra om jag Googlar lite. Jag vill nämligen att Time Picker skall visa 00:00:00 när jag öppnar den. :humm:

Nu visat den vad klockan är och det vill jag inte. Jo tack, efter tre timmars Googlande nu på förmiddagen så har jag fortfarande inte kommit på hur jag skall göra. Det finns massor av lösningar därute men inget funkar. Problemet är att om någon frågar efter en viss lösning på en viss Time Picker så hittar man massor svar på hur andra har gjort, dock inte med samma Time Picker. :(

Underbart heller hur? Om jag frågar hur förgasaren skall justeras på min gamla Volvo så är det ju ingen som talar om hur han har justerat sin SAAB-förgasare. Men det gäller inte när det handlar om Time Pickers. Alla tycks tro att det bara finns Ett fabrikat/version/årsmodell. Datalivet är underbart, heller hur. :mrgreen:
Detta blir nog så småningom något för min blogg. :rofl

Edit: Har försökt med bl.annat detta men det funkar inte

Kod: Markera allt

$('#datetimepicker1,#datetimepicker2').datetimepicker({
            setTime: '00:00:00',
            locale: 'eng',
            format: 'LTS'
Användarvisningsbild
papabear
Inlägg: 821
Blev medlem: 14 mars 2004, 03:27:12
Ort: Eskilstuna
Kontakt:

Re: Fråga om Javascript Time Picker

Inlägg av papabear »

Bästa är väl att kolla dokumentationen. Gissar att det är date du ska sätta.
https://tempusdominus.github.io/bootstr ... ions/#date
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript Time Picker

Inlägg av SeniorLemuren »

Jag har sett :
date, [newDate] Takes string, Date, moment, null parameter and sets the components model current moment to it.
Det är bara det att med mina okunskaper har jag inte lyckats att sätta in parametrarna på rätt sätt enligt informationen, och klämma in den på rätt ställe. Än så länge är detta trolleri.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript Time Picker

Inlägg av SeniorLemuren »

Löste det till slut, med ytterligare 1 timmes Googling och testkörningar med olika förslag. Så här skulle det se ut:

Kod: Markera allt

defaultDate: moment(new Date()).hours(0).minutes(0).seconds(0).milliseconds(0)
Inte helt självklart att förstå genom informationen som gavs: :)

date, [newDate] Takes string, Date, moment, null parameter and sets the components model current moment to it.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript Time Picker

Inlägg av SeniorLemuren »

Så att, ja, nu börjar det att funka som jag vill ha det. Länkar här till en liten testsida. Där öppnas en sida med 2 modal-fönster som man kan klicka in ett datum i. När man öppnar modalen första gången och klickar på time-symboel till höger i inmatningsfältet så är visas nu tiden 00:00:00 precis som jag ville, perfekt.

MEN när jag stänger modal och öppnar en annan modal så hänger den gamla tiden kvar. Här vill jag ju att den återigen skall bli 00:00:00. Jag förstår ju att den funktion som sätter time till noll även skall anropas när jag stänger modalen och sätta time picker till noll. Det är då mina enkla kunskaper i js inte räcker till ännu. (jag blir bättre och bättre.)

papabear är numera expert på vad jag håller på med, men eftersom jag kan se att många följer denna tråd så kanske det finns ett litet allmänintresse också, så jag länkar till mitt exempel så alla som är intresserade kan kolla och/eller komma med bra tips . :)

Så här ser scriptet ut just nu och som ni kan se så nollställer defaultDate när jag öppnar modal-fönstret, men bara första gången. Nästa gång jag öppnar det eller ett annat modal-fönster så nollställs inte Time Picker.

Kod: Markera allt

    $(function() {
        $('#modalForm').on('show.bs.modal', function(event) {
            $('#datetimepicker1,#datetimepicker2').datetimepicker({
                locale: 'eng',
                format: "LTS",
                defaultDate: moment(new Date()).hours(0).minutes(0).seconds(0).milliseconds(0)
            });
            var button = $(event.relatedTarget);
            var videoId = button.data('videoId');
            var modal = $(this);
            modal.find('.modal-body #id-input').val(videoId)
        })
    });
</script>
Användarvisningsbild
papabear
Inlägg: 821
Blev medlem: 14 mars 2004, 03:27:12
Ort: Eskilstuna
Kontakt:

Re: Fråga om Javascript Time Picker "Nästan där"

Inlägg av papabear »

Jag tycker det verkar lite knasigt att ropa på initialiseringen av datepicker varje gång du visar dialogen. Men det verkar inte påverka någonting negativt.
Hur som helst så kan du nollställa datumfälteten med :

Kod: Markera allt

$('#datetimepicker1,#datetimepicker2').datetimepicker('date', '00:00:00');
Jag skulle nog undvika att göra det i show.bs.modal-eventet dock.
Om man då skulle ha fyllt i allt, sen tex råkar klicka vid sidan av dialogen, så den stängs, så töms rutorna när du öppnar den igen.
Lägg den istället efter din post, efter du rensat formuläret.

Sen kan date/defaultDate även ta en sträng, så istället för moment(new Date()).hours(0).minutes(0).seconds(0).milliseconds(0), kan du skriva tex '2000-01-01 00:00:00'.
Datumbiten är du ju inte intresserad av iaf, så det spelar väl ingen roll att den är hårdkodad.
SeniorLemuren
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Fråga om Javascript Time Picker "Nästan där"

Inlägg av SeniorLemuren »

Än en gång. Jättetack! :tumupp: Nu funkar det precis som det skall funka. Anledningen är ju att jag vill kunna registrera fler händelser efter varandra utan att behöva stänga modal. Måste försöka återlära mig js syntax. Det blir så mycket enklare då. :)
Skriv svar