web-dev-qa-db-fra.com

JQuery Datepicker ne modifie pas la valeur d'entrée

J'utilise un addon Jquery UI Datepicker comme DateTimePicker http://jsfiddle.net/j5rkbnrt/1/

<input id="deliveryTime" name="deliveryTime" type="text" value="08/05/2015 10:00">

 $('#deliveryTime').datetimepicker({
     dateFormat: 'dd/mm/yy',
     timeFormat: 'HH:mm',
 });

Le DateTimePicker est associé au champ de saisie. Lorsque je sélectionne la date, la valeur du champ de saisie n'est pas modifiée. Ainsi, lorsque je soumets le formulaire contenant cette entrée, je reçois toujours la valeur par défaut.

J'ai jeté un coup d'œil au datepicker par défaut de jquery et cela ne change pas non plus la valeur de l'entrée. https://jqueryui.com/datepicker/

Qu'est-ce que j'oublie ici?

javascriptjqueryjquery-uidatepicker
6
spike07

Vous confondez la value inline __ attribut avec la valeur réelle que le champ d'entrée contient .

Par valeur d'attribut, j'entends ce qui suit:

<input id="deliveryTime" name="deliveryTime" type="text" value="08/05/2015 10:00">

La valeur attribut est value="08/05/2015 10:00". La valeur peut correspondre à la date que vous avez sélectionnée et entrée dans le champ de saisie.

Ainsi, même si l'attribut est value="08/05/2015 10:00", la valeur réelle de l'entrée, ce qui signifie que le texte figurant dans le champ de saisie est la valeur réelle.

Lorsque vous entrez une nouvelle valeur dans votre entrée, puis que vous utilisez $('#deliveryTime').val(), vous verrez que votre nouvelle valeur est la valeur réelle du texte à l'intérieur du champ de saisie.

Si vous souhaitez modifier le attribut de votre champ de saisie, que je trouve un peu ambigu, étant donné que val() renvoie déjà cette valeur, procédez comme suit:

$('#deliveryTime').change(function(){
    $(this).attr('value', $('#deliveryTime').val());
});

Ainsi, "à chaque modification de deliveryTime, définissez l'attribut value sur la valeur d'entrée". Violon!

Comme je l'ai dit, c'est ambigu. Je recommanderais simplement d'utiliser $('#deliveryTime').val() pour atteindre le même objectif.

9
Rizky Fakkel

ça marche! La valeur de son entrée de mise à jour, mais dans chrome devtools, elle ne montre pas cette mise à jour. Essayez de soumettre ce formulaire et de vérifier le réseau, vous verrez alors que toutes les données ont été envoyées correctement :)

0
vladymy

Vous pouvez utiliser onSelect event du plugin datetimePicker.

 $('#deliveryTime').datetimepicker({
     dateFormat: 'dd/mm/yy',
     timeFormat: 'HH:mm',
     onSelect: function(dateText, inst) {
         $('#'+inst.id).attr('value',dateText);
    }
 });

Démo

0
Rohil_PHPBeginner