J'avais un formulaire auparavant qui permettait de définir un jour. Je souhaitais simplement aller plus loin en ajoutant un jour et une heure pour le lancement d'un tournoi.
J'ai donc ajouter un DateTimePicker avec Bootstrap et Jquery qui marche,
Cependant quand je vais mettre la date et que je valide mon formulaire, il est renvoyé le 1er Janvier 1970. Donc simplement il ne prend pas en compte ma variable.
Le code avec DateTime était :
Pour create-tournament.php :
Code : Tout sélectionner
<div class="form-group">
<label>Start Date</label>
<input class="form-control" id="start" placeholder="Start Date" />
</div>
<div class="form-group">
<label>Registration End Date</label>
<input class="form-control" id="registration" placeholder="Registration End Date" />
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Create Tournament</button>
</div>
<div class="success">
<span class="success_text"></span>
</div>
Code : Tout sélectionner
/**
* Create tournament date pickers
*/
$(function() {
$( "#start" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#start" ).datepicker();
});
$(function() {
$( "#end" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#end" ).datepicker();
});
$(function() {
$( "#registration" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#registration" ).datepicker();
});
/**
* Create tournament
*/
$('#createTournament').submit(function(e) {
var game = $("#game").val();
max_teams = $("#max-teams").val();
tournament = $("#tournament").val();
start_date = $("#start").val();
registration = $("#registration").val();
format = $("#format").val();
pub = $("#public").val();
e.preventDefault();
$.ajax({
type: "POST",
url: "lib/submit/submit-tournament.php",
async:true,
crossbrowser:true,
data: { form: 'create-tournament', start: '' + start_date + '', registration: '' + registration + '', max_teams: '' + max_teams + '', tournament: '' + tournament + '', game: '' + game + '', format: '' + format + '', pub: '' + pub + '' }
}).success(function( msg ) {
$('.success').css("display", "");
$(".success").fadeIn(1000, "linear");
$('.success_text').fadeIn("slow");
$('.success_text').html(msg);
setTimeout(function(){location.reload()},3000);
});
});Pour create-tournament.php
Code : Tout sélectionner
<div id="datetimepicker" class="input-append date">
<label>Début de la Compétition</label>
<input type="datetime" id="datetimepicker"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'fr'
});
</script>
<div id="datetimepicker2" class="input-append date">
<label>Fin des Enregistrements</label>
<input type="datetime" name='registration' id="registration"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$('#datetimepicker2').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'fr'
});
</script>
<div class="form-group">
<button class="btn btn-success" type="submit">Créer le Tournoi</button>
</div>
<div class="success">
<span class="success_text"></span>
</div>Code : Tout sélectionner
/**
* Create tournament
*/
$('#createTournament').submit(function(e) {
var game = $("#game").val();
max_teams = $("#max-teams").val();
tournament = $("#tournament").val();
start_date = $("#start").val();
registration = $("#registration").val();
format = $("#format").val();
pub = $("#public").val();
e.preventDefault();
$.ajax({
type: "POST",
url: "lib/submit/submit-tournament.php",
async:true,
crossbrowser:true,
data: { form: 'create-tournament', start: '' + start_date + '', registration: '' + registration + '', max_teams: '' + max_teams + '', tournament: '' + tournament + '', game: '' + game + '', format: '' + format + '', pub: '' + pub + '' }
}).done(function( msg ) {
$('.success').css("display", "");
$(".success").fadeIn(1000, "linear");
$('.success_text').fadeIn("slow");
$('.success_text').html(msg);
setTimeout(function(){location.reload()},3000);
});
});J'ai supprimer les premieres lignes du DatePicker puisque je n'en avais plus besoin et j'ai fais plusieurs tentatives qui n'ont toute pas marchés.
J'ai commencer par changer l'id de ma div, de ma fonction et une fois des deux pour voir le résultat. A chaque fois je me retrouve avec datetimepicker qui ne marche plus. (Plus l’icône ni le bouton qui me permet de changer la date)
Code : Tout sélectionner
<div id="start" class="input-append date">
<label>Début de la Compétition</label>
<input type="datetime" id="datetimepicker"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$('#start').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'fr'
});
</script>Code : Tout sélectionner
<script type="text/javascript">
$('#start').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'fr'
});
</script>Je suis donc partis dans l'idée que j'allais devoir rester avec les variables #datetimepicker et #datetimepicker2 et j'ai fais cette tentative sur tournament.js
Code : Tout sélectionner
/**
* Create tournament
*/
$('#createTournament').submit(function(e) {
var game = $("#game").val();
max_teams = $("#max-teams").val();
tournament = $("#tournament").val();
start_date = $("#datetimepicker").val();
registration = $("#datetimepicker2").val();
format = $("#format").val();
pub = $("#public").val();
e.preventDefault();
$.ajax({
type: "POST",
url: "lib/submit/submit-tournament.php",
async:true,
crossbrowser:true,
data: { form: 'create-tournament', start: '' + start_date + '', registration: '' + registration + '', max_teams: '' + max_teams + '', tournament: '' + tournament + '', game: '' + game + '', format: '' + format + '', pub: '' + pub + '' }
}).done(function( msg ) {
$('.success').css("display", "");
$(".success").fadeIn(1000, "linear");
$('.success_text').fadeIn("slow");
$('.success_text').html(msg);
setTimeout(function(){location.reload()},3000);
});
});Si quelqu'un a une solution, je suis preneur !
Merci à tous.