Jump to content

JQuery Timepicker/Datepicker

Recommended Posts

I've been using the JQuery Timepicker to append Time values to my date fields. In the workflow, the users will select a date and then use two timepicker fields to select a block of time, in example 6:00AM and 9:00AM. I then append the time to the date field.

Previously, this was used in a separate submission form, where the user would click a link which would open a new tab. I am now trying to put this submission form in a Modal with a button on the actual calendar page - this way, the user can click on the modal button and have the submission form with the timepicker pop up.

When on the search form of the calendar, the timepicker in the modal works. However, as soon as I go to the calendar results page, the timepicker stops working. 

The Jquery and Timepicker scripts use to be on the datapage itself, but they are now on the webpage. The links to the submission form (that opens in a tab) still works, and the modal submission form works when on the Search Form, but again it stops working when on the Results Page of the calendar. I've tried swapping positions of the stylesheet and scripts but to no avail.

I am getting an Uncaught Typerror, timepicker is not found. One time I got an error with something about children, but I cannot seem to replicate this again. 

Any ideas?

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    background-color: antiquewhite !important;
    display: block;

.open-button{background-color:green!important; color:#fff!important; padding:10px; border:none; border-radius:50px; cursor:pointer; opacity:.8; position:fixed; height:85px; width:85px; bottom:2%; right:1%; z-index:100; font-size:42px;}

.cancel{background-color:#0f0b34; color:red; padding:4px 10px; border:1px solid red; border-radius:5px; font-weight: 700;cursor:pointer; width:98%; opacity:.8; margin:20px 0px 10px 0px}

.cancel:hover{background-color:red; color:white; border:1px solid white;}

  z-index:-1 !important;
  left: auto !important;
  top: auto !important;
  background-color: #f2f2f2 !important;

.w3-modal-content {
  width: 395px !important;
  background-color:#0f0b34 !important;
  border:5px solid #fff;
  box-shadow:0 1px 5px 5px rgba(0,0,0,.1);
  z-index: 101;


  display: none;

.pWS{font-family:'Montserrat',sans-serif; color:#fff; font-size:20px; font-weight:900;}

<div class="main-content">
  <script type="text/javascript" src="https://c3eku680.caspio.com/dp/e75050001a6760b7f00e44ddb9dc/emb"></script>

<script type="text/javascript" src="https://c3eku680.caspio.com/dp/e75050001b1a97e16f6b4274897f/emb"></script>

<div class="w3-container">
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button open-button">+</button>
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content" style="bottom:0px;right:0px;position:fixed;height:79vh;overflow-y:scroll;">
      <div class="w3-container form-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div class="pWS">ADD NEW APPOINTMENT:</div>
      <button type="button" onclick="document.getElementById('id01').style.display='none'"class="btn cancel" onclick="closeForm()">CLOSE</button>

<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...