javascript — Timepicker показывает только несколько раз
У меня есть таймер на моем event-form.phpоднако, когда я нажимаю на указатель времени, он не отображается. Он появляется только когда я дважды щелкаю по нему, а когда я это делаю, он показывает только пару раз, хотя я указал иное.
Как вы можете видеть, средство выбора времени по-прежнему правильно форматирует время, но оно по-прежнему не выполняет то, что я хочу. Как будто я хочу, чтобы полоса прокрутки показывала время с 8:00, 8:30, …, 23: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>
событийно-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…</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>
main.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
});
});
event.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.
Другие решения
Других решений пока нет …