Insert datetimepicker in input ... resist

0

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">&times;</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">&#9724; Dark blue</option>
                          <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
                          <option style="color:#008000;" value="#008000">&#9724; Green</option>                       
                          <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
                          <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
                          <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
                          <option style="color:#000;" value="#000">&#9724; 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>
    
asked by Vieira 12.07.2017 в 09:20
source

1 answer

0

When you select the date with your datepicker, use the function

$('#calendar').fullCalendar( 'gotoDate', date );

Where date is the date.

If you could tell me what plugin you use as datepicker I could give you more information.

    
answered by 10.08.2017 в 15:37