javascript - Timepicker 只显示几次

标签 javascript php jquery css timepicker

我的 event-form.php 上有一个时间选择器，但是，当我单击时间选择器时，它没有显示。它只在我双击它时显示，当我双击它时，即使我另有指定，它也只显示几次。

enter image description here

如您所见，时间选择器仍然可以正确设置时间格式，但它仍然无法执行我想要的其他操作。就像我希望滚动条显示上午 8:00、8:30、...、晚上 11:00 等时间。但它只显示几次 :(

如果有人能指出我做错了什么，那就太好了!

代码

config.php

<?php session_start();?>
<!DOCTYPE html>
<html>
    <head>
        <!--Main stylesheets-->
        <link rel="stylesheet" type ="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/form.css">
        <link rel="stylesheet" type="text/css" href="css/login.css">
        <!--Custom icon-->
        <link href="https://file.myfontastic.com/uZM4xs3mM5re5dydBReL44/icons.css" rel="stylesheet">
        <!--Import jQuery -->
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!-- jQuery timepicker -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
        <!--Javascript-->
        <script type="text/javascript" src="js/main.js"></script>

events.php

<?php include 'config.php'; ?>
        <link rel="stylesheet" type="text/css" href="css/events.css">
        <title>For Sale</title>
    </head>
 <body>
      <header>
        <h1>Events</h1>
          <?php
            if(isset($_SESSION['logged_user'])) {
              echo "<button class='add-event'><span class='icon-plus'></span></button>";
            }
          ?>
      </header>
      <div class="events">
      <?php
        include 'nav.php';
        include 'php/login.php';
        include 'php/logout.php';
        include 'php/event-form.php';
      ?>
    </body>
</html>

event-form.php

<div class="event-form form-screen pop-up">
  <button class="close-pop-up"><span class="icon-x"></span></button>
  <form name="event-form" method="post">
      <h1>Create Event</h1>
      <div class="form-content">
        <div class="box">
          <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
          <label for="file">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
              <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" /> </svg> <span>Choose a file&hellip;</span> </label>
        </div>
        <input type="text" name="title" placeholder="Title*" required>
        <input type="text" name="start_date" class="date" placeholder="Start Date*" required>
        <input type="text" name="start_time" class="timepicker" placeholder="Start Time*" required>
        <h1 class="time-label">to</h1>
        <input type="text" name="end_date" class="date" placeholder="End Date">
        <input type="text" name="end_time" class="timepicker" placeholder="End Time">
        <input type="text" name="place" placeholder="Place">
        <input type="text" name="description" placeholder="Description">
      </div>
      <button type="submit" class="submit" name="submit" value="submit">Add Event</button>
  </form>
</div>

ma​​in.js

$(document).ready(function () {
  //Timepicker
  $('input.timepicker').timepicker({
      timeFormat: 'h:mm p',
      interval: 30,
      minTime: '8:00am',
      maxTime: '11:00pm',
      // defaultTime: '5:00pm',
      startTime: '8:00am',
      dynamic: true,
      dropdown: true,
      scrollbar: true,
      showLeadingZero: false
  });
});

事件.css

.form-screen input.timepicker{
  width: 115px;
}

.form-screen input.date{
  width: 120px;
}

.form-screen input.timepicker, .form-screen input.date, .event-form h1.time-label{
  display: inline;
}
.event-form h1.time-label{
  text-transform: lowercase;
  font-size: 30px;
}
/*Datepicker styling*/

/*Set datepicker’s width, position it to the center and add drop shadow*/
.ui-datepicker {
    width: auto;
    height: auto;
    margin: 5px auto 0;
    font: .7em 'Roboto', sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    background-color: #fafafb;
}

/*Remove the default underline decoration from every anchor tag*/
.ui-datepicker a {
    text-decoration: none;
}

/*add 100% width for the table, so it will have the same maximum width as the wrapper above (i.e. widith: auto)*/
.ui-datepicker table {
    width: 100%;
}

/*style header*/
.ui-datepicker-header {
    text-transform: uppercase;
    background-color: #fafafb;
    font-size: 1.2em;
    color: #555555;
    font-weight: bold;
    line-height: 30px;
}

/*center the Month position.*/
.ui-datepicker-title {
    text-align: center;
}

/*Set up arrows*/
.ui-datepicker-prev,
.ui-datepicker-next {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    line-height: 600%;
    overflow: hidden;
}

/*Replace the Next and Prev text with the sprite arrow images and adjust arrow position*/
.ui-datepicker-prev {
    float: left;
    background-position: center 10px;
    background-image: url('../images/datepicker/arrow_prev.png');
    /*Images created by me (Monica Ong)*/
}

.ui-datepicker-next {
    float: right;
    background-position: center 10px;
    background-image: url('../images/datepicker/arrow_next.png')
}

/*Set colors of day names*/
.ui-datepicker thead {
    background-color: #efefef;
}

.ui-datepicker th {
    text-transform: uppercase;
    font-size: .7em;
    padding: 5px 0;
    color: #666666;
}

/*Style dates*/
.ui-datepicker tbody td {
    padding: 0;
}

.ui-datepicker tbody td {
    padding: 0;
}

/*Style default,  hover, and active state*/
.ui-datepicker td span,
.ui-datepicker td a {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
}

.ui-datepicker-calendar .ui-state-default {
    background: #ededed;
}

.ui-datepicker-unselectable .ui-state-default {
    background: #f4f4f4;
    color: #949496;
}

.ui-datepicker-calendar .ui-state-hover {
    background: #f7f7f7;
}

.ui-datepicker-calendar .ui-state-active {
    background: #666666;
    color: #efefef;
    position: relative;
    margin: -1px;
}

.ui-datepicker-calendar td:first-child .ui-state-active {
    width: 29px;
    margin-left: 0;
}

.ui-datepicker-calendar td:last-child .ui-state-active {
    width: 29px;
    margin-right: 0;
}

.ui-datepicker-calendar tr:last-child .ui-state-active {
    height: 29px;
    margin-bottom: 0;
}

form.css

/*Form styling*/
.pop-up{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y:scroll;
  display: none;
  z-index: 1;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #F9FFF9;
}

.form-screen h1{
  margin-bottom: 30px;
}

.form-content{
  margin-left: 20px;
  margin-right: 40px;
}

.submit:focus,
.inputfile:focus + label,
input:focus, textarea {
  outline: #eceae9 auto 5px;
}

  /*Exit button*/
.close-pop-up{
  float: right;
}

.icon-x{
  font-size: 30px;
}

  /*File upload styling*/
.box {
    text-align: left;
    margin-bottom: 20px;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 15px;
    border-radius: 5px;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

.inputfile + label {
    color: #453124;
    background-color: #a29891;
}

.inputfile:focus + label,
.inputfile.has-focus + label,
.inputfile + label:hover {
    background-color: #c7c1bd;
}

  /*Input styling*/
.form-screen input[type=text],
.form-screen input[type="password"],
input[type=email],
textarea,
.submit {
    display: block;
}

.form-screen input[type=text],
.form-screen input[type="password"],
input[type=email],
textarea {
    cursor: text;
}

.form-screen input[type=text],
.form-screen input[type="password"],
input[type=email],
textarea {
    border: none;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    color: #453124;
    background-color: #d9d5d3;
    font-size: 25px;
    padding: 15px;
    margin-bottom: 20px;
    width: 70%;
}

.form-screen input[type=text]:last-of-type,
.form-screen input[type="password"]:last-of-type,
input[type=email]:last-of-type{
  margin-bottom: 30px;
}

textarea:last-of-type{
    margin-bottom: 10px;
}

.form-screen input[type=text]::-webkit-input-placeholder,
.form-screen input[type="password"]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder  {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    color: #453124;
    font-size: 1em;
}
.form-screen input[type=text]:-ms-input-placeholder,
.form-screen input[type="password"]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
textarea:-ms-input-placeholder  {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    color: #453124;
    font-size: 1em;
}

.form-screen input[type=text]:-moz-placeholder,
.form-screen input[type="password"]:-moz-placeholder,
input[type=email]:-moz-placeholder,
textarea:-moz-placeholder {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    color: #453124;
    font-size: 1em;
}

.form-screen input[type=text]::-moz-placeholder,
.form-screen input[type="password"]::-moz-placeholder,
input[type=email]::-moz-placeholder,
textarea::-moz-placeholder  {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    color: #453124;
    font-size: 1em;
}

  /*Submit button styling*/
  .submit:hover {
    background-color: #c7c1bd;
  }

  .submit {
      background-color: #a29891;
      color: #453124;
      font-size: 20px;
      text-transform: uppercase;
      padding: 15px;
      border-radius: 7px;
      border: none;
  }

最佳答案

这是您的表单的简化版本:https://jsfiddle.net/mvooodwL/

那里一切正常。我包括了 jQuery 和最新版本的 timepicker，并将 dateFormat 更改为有效格式。

timeFormat: 'h:i A'

所以问题可能出在 timepicker js 和 css 版本中，因为你加载了 1.8.1 版的 css 和 1.3.5 版的 js。

关于javascript - Timepicker 只显示几次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43809782/

上一篇：html - 'Text-decoration : none ! important' 不适用于 Bootstrap

下一篇：html - 使用 VBA 和 Selenium 驱动网站

相关文章：

javascript - 如何加载谷歌自定义搜索onclick

javascript - 由于表单未连接而取消表单提交

javascript - 下划线 - 使用 _.map() 转换数组

php - mysql数据库不会在表上插入任何项目，浏览器也不会显示任何错误

PHP 未定义索引 - sortby

javascript - Ajax 错误检查 - 如果 AJAX 请求失败，如何防止内容更改？

javascript - 无法从 Jquery 访问关联模型

jquery - IE9 jquery 下滑效果问题

javascript - 事件监听器和 AJAX 异步函数变量作用域

javascript - 通过追加将方法链接到新插入的元素

©2024 IT工具网  联系我们