Good morning, I'm trying in an input text so I can have the option to choose date and time with datepicker but I can not get it. I am going to put the code without the calls to datetimepicker so as not to mess it up anymore because the truth is that it was a truthful puzzle code this morning. Can you tell me if you see something wrong please?
JavaScript
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment(),
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
expandThrough: false,
select: function(start, end) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit').modal('show');
});
},
eventDrop: function(event, delta, revertFunc) { // si changement de position
edit(event);
},
eventResize: function(event, dayDelta, minuteDelta, revertFunc) { // si changement de longueur
edit(event);
},
events: [
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?> {
id: '<?php echo $event['
id ']; ?>',
id_teach: '<?php echo $event['
id_teach ']; ?>',
id_stud: '<?php echo $event['
id_stud ']; ?>',
title: '<?php echo $event['
title ']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['
color ']; ?>',
},
<?php endforeach; ?>
]
});
function edit(event) {
start = event.start.format('YYYY-MM-DD HH:mm:ss');
if (event.end) {
end = event.end.format('YYYY-MM-DD HH:mm:ss');
} else {
end = start;
}
id = event.id;
Event = [];
Event[0] = id;
Event[1] = start;
Event[2] = end;
$.ajax({
url: 'editEventDate.php',
type: "POST",
data: {
Event: Event
},
success: function(rep) {
if (rep == 'OK') {
alertify.alert('Saved');
} else {
alertify.alert('Could not be saved. try again.');
}
}
});
}
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="lead"></p>
<div id="calendar" class="col-centered">
</div>
</div>
<div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="addEvent.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Event</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="student" class="col-sm-2 control-label">Student</label>
<div class="col-sm-10">
<select name="title" id="id_stud" class="form-control" required>
<option></option>
</select>
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<input type="hidden" name="id_teach" value="<?php echo $get_id; ?>">
<select name="color" class="form-control" id="color">
<option value="">Choose</option>
<option style="color:#0071c5;" value="#0071c5">◼ Dark blue</option>
<option style="color:#40E0D0;" value="#40E0D0">◼ Turquoise</option>
<option style="color:#008000;" value="#008000">◼ Green</option>
<option style="color:#FFD700;" value="#FFD700">◼ Yellow</option>
<option style="color:#FF8C00;" value="#FF8C00">◼ Orange</option>
<option style="color:#FF0000;" value="#FF0000">◼ Red</option>
<option style="color:#000;" value="#000">◼ Black</option>
</select>
</div>
</div>
<div class="form-group">
<label for="start" class="col-sm-2 control-label">Start date</label>
<div class="col-sm-10">
<input type="text" name="start" class="form-control" id="start">
</div>
</div>
<div class="form-group">
<label for="end" class="col-sm-2 control-label">End date</label>
<div class="col-sm-10">
<input type="text" name="end" class="form-control" id="end">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>