path: root/files/fr/archive/mozilla/xul/timepicker/index.html

---
title: timepicker
slug: Archive/Mozilla/XUL/timepicker
tags:
  - Éléments_XUL
translation_of: Archive/Mozilla/XUL/timepicker
---
<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
 « <a href="/fr/docs/Référence_XUL">Accueil de la référence XUL</a>    [
 <a href="#Exemples">Exemples</a> |
 <a href="#Attributs">Attributs</a> |
 <a href="#Propri.C3.A9t.C3.A9s">Propriétés</a> |
 <a href="#M.C3.A9thodes">Méthodes</a> |
 <a href="#Sujets_li.C3.A9s">Sujets liés</a> ]
</span></div> <p>L'élément <code>timepicker</code> est utilisé pour permettre à l'utilisateur d'entrer une heure. Il contient trois champs pour entrer les heures, les minutes et les secondes. Des boutons fléchés à côté de ces champs permettent d'ajuster les valeurs à la souris. Une quatrième boîte de texte apparaît pour les horloges à 12 heures, permettant de sélectionner AM ou PM.
</p><p>Pour spécifier la valeur initiale, utilisez l'attribut <code>value</code> sous une forme HH:MM:SS ou HH:MM. La valeur peut être obtenue et modifiée à l'aide des propriétés <code>value</code> ou <code>dateValue</code>. La première spécifie l'heure sous la forme d'une chaîne de la forme HH:MM:SS tandis que la seconde le fait sous la forme d'un objet <a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Date">Date</a>. En outre, les propriétés <code>hour</code>, <code>minute</code> et <code>second</code> peuvent être utilisées pour obtenir ou modifier chaque composante individuellement.
</p><p><br>
</p>
<dl><dt> Attributs
</dt><dd> <a href="#a-disabled">disabled</a>, <a href="#a-hideseconds">hideseconds</a>, <a href="#a-increment">increment</a>, <a href="#a-readonly">readonly</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a>
</dd></dl>
<dl><dt> Propriétés
</dt><dd> <a href="#p-amIndicator">amIndicator</a>, <a href="#p-dateValue">dateValue</a>, <a href="#p-disabled">disabled</a>, <a href="#p-hideSeconds">hideSeconds</a>, <a href="#p-hour">hour</a>, <a href="#p-hourLeadingZero">hourLeadingZero</a>, <a href="#p-increment">increment</a>, <a href="#p-is24HourClock">is24HourClock</a>, <a href="#p-isPM">isPM</a>, <a href="#p-minute">minute</a>, <a href="#p-minuteLeadingZero">minuteLeadingZero</a>, <a href="#p-pmIndicator">pmIndicator</a>, <a href="#p-readOnly">readOnly</a>, <a href="#p-second">second</a>, <a href="#p-secondLeadingZero">secondLeadingZero</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a>
</dd></dl>
<h3 id="Exemples" name="Exemples"> Exemples </h3>
<pre>&lt;timepicker value="12:05"/&gt;
</pre>
<p><img alt="Image:Controlguide-timepicker.png">
</p>
<h3 id="Attributs" name="Attributs"> Attributs </h3>
<p>
</p><div id="a-disabled">

<dl><dt> <code id="a-disabled"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/disabled">disabled</a></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Indique si l'élément est ou non désactivé. Si cette valeur est définie à <code>true</code>, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement <code>command</code> ne se déclenchera pas. </dd></dl>
<p><br>
</p>
<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png"></div>
<pre>&lt;!-- La case à cocher active/désactive le bouton --&gt;
&lt;checkbox label="Enable button"
    onclick="document.getElementById('buttRemove').disabled = this.checked"/&gt;
&lt;button id="buttRemove" label="Remove All" disabled="true"/&gt;
</pre>
</div>
<div id="a-hideseconds">

<dl>
  <dt>
    <code id="a-hideseconds"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/hideseconds">hideseconds</a></code></dt>
  <dd>
    Type : <i>booléen</i></dd>
  <dd>
    Indique si le champ des secondes doit être masqué.</dd>
</dl>
</div>
<div id="a-readonly">

<dl><dt> <code id="a-readonly"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/readonly">readonly</a></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Si défini à <code>true</code>, l'utilisateur ne peut pas modifier la valeur de l'élément. Cependant, celle-ci peut toujours être modifiée par un script.
</dd></dl>


</div>
<div id="a-timepicker.increment">

<dl>
  <dt>
    <a href="fr/XUL/Attributs/timepicker.increment">increment</a></dt>
  <dd>
    Type : <i>entier</i></dd>
  <dd>
    Indique le nombre de minutes à passer chaque fois que les flèches sont actionnées. Cet attribut est à utiliser en combinaison avec une définition de <code>hideseconds</code> à <code>true</code>.</dd>
</dl>
</div>
<div id="a-tabindex">

<dl><dt> <code id="a-tabindex"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/tabindex">tabindex</a></code>
</dt><dd> Type : <i>entier</i>
</dd><dd> L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le <code>tabindex</code> est plus haut se trouvent plus tard dans la séquence de tabulation.
</dd></dl>


</div>
<div id="a-timepicker.value">

<dl>
  <dt>
    <code id="a-value"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/value">value</a></code></dt>
  <dd>
    Type : <i>chaîne</i></dd>
  <dd>
    La valeur initiale du sélecteur de date au format HH:MM:SS ou HH:MM.</dd>
</dl>
</div>

<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s"> Propriétés </h3>
<p>
</p><div id="p-amIndicator">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/amIndicator">amIndicator</a></span></code>
</dt><dd> Type : <i>chaîne</i>
</dd><dd> La valeur chaîne affichée pour les heures entre minuit et midi, par défaut « AM ». Cette valeur est déterminée selon la locale de l'utilisateur.
</dd></dl>
<p><br>
</p>

</div>
<div id="p-dateValue">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/dateValue">dateValue</a></span></code></dt>
  <dd>
    Type : <i>Date</i></dd>
  <dd>
    La date actuellement entrée ou sélectionnée dans le sélecteur de date sous la forme d'un objet <code>Date</code>.</dd>
</dl></div>
<div id="p-disabled">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/disabled">disabled</a></span></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-disabled"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/disabled">disabled</a></code>.
</dd></dl>

</div>
<div id="p-hideSeconds">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/hideSeconds">hideSeconds</a></span></code></dt>
  <dd>
    Type : <i>booléen</i></dd>
  <dd>
    Indique si le champ des secondes doit être masqué.</dd>
</dl></div>
<div id="p-hour">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/hour">hour</a></span></code></dt>
  <dd>
    Type : <i>entier</i></dd>
  <dd>
    La valeur de l'heure actuellement sélectionnée entre 0 et 23. Modifiez cette propriété pour changer l'heure sélectionnée.</dd>
</dl></div>
<div id="p-hourLeadingZero">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/hourLeadingZero">hourLeadingZero</a></span></code></dt>
  <dd>
    Type : <i>booléen</i></dd>
  <dd>
    Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant l'heure lorsque celle-ci est inférieure à 10.</dd>
</dl></div>
<div id="p-increment">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/increment">increment</a></span></code></dt>
  <dd>
    Type : <i>entier</i></dd>
  <dd>
    Obtient et définit la valeur de l'attribut <code id="a-increment"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/increment">increment</a></code>.</dd>
</dl></div>
<div id="p-is24HourClock">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/is24HourClock">is24HourClock</a></span></code></dt>
  <dd>
    Type : <i>booléen</i></dd>
  <dd>
    Une valeur en lecture seule indiquant si l'heure est affichée à l'aide d'une horloge à 24 ou 12 heures. Avec une horloge à 12 heures, un champ supplémentaire permet à l'utilisateur de choisir entre AM et PM.</dd>
</dl></div>
<div id="p-isPM">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/isPM">isPM</a></span></code></dt>
  <dd>
    Type : <i>booléen</i></dd>
  <dd>
    Si cette propriété est à <code>false</code>, l'heure est entre 0 et 11. Si elle est à <code>true</code>, l'heure est supérieure ou égale à 12.</dd>
</dl></div>
<div id="p-minute">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/minute">minute</a></span></code></dt>
  <dd>
    Type : <i>entier</i></dd>
  <dd>
    Les minutes de l'heure actuellement sélectionnée entre 0 et 59. Modifiez cette propriété pour changer la minute sélectionnée.</dd>
</dl></div>
<div id="p-minuteLeadingZero">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/minuteLeadingZero">minuteLeadingZero</a></span></code></dt>
  <dd>
    Type : <i>booléen</i></dd>
  <dd>
    Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant la valeur des minutes lorsque celle-ci est inférieure à 10.</dd>
</dl></div>
<div id="p-pmIndicator">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/pmIndicator">pmIndicator</a></span></code></dt>
  <dd>
    Type : <i>chaîne</i></dd>
  <dd>
    La valeur chaîne affichée pour les heures entre midi et minuit, par défaut « PM ». Cette valeur est déterminée selon la locale de l'utilisateur.</dd>
</dl></div>
<div id="p-readOnly">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/readonly">readonly</a></span></code></dt>
  <dd>
    Type : <i>booléen</i></dd>
  <dd>
    Si définie à <code>true</code>, l'utilisateur ne peut pas modifier la valeur de l'élément.</dd>
  <dd>
    <div class="note">
      Cette propriété toute en minuscules n'est utilisée qu'avec l'élément <code><a href="/fr/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code> et sera peut-être renommée en <code>readOnly</code> dans des versions ultérieures. D'autres éléments utilisent la propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/readOnly">readOnly</a></span></code>. L'attribut correspondant est cependant <code id="a-readonly"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/readonly">readonly</a></code> en minuscules.</div>
  </dd>
</dl></div>
<div id="p-second">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/second">second</a></span></code></dt>
  <dd>
    Type : <i>entier</i></dd>
  <dd>
    La valeur des secondes de l'heure actuellement sélectionnée, entre 0 et 59. Modifiez cette propriété pour changer la seconde sélectionnée.</dd>
</dl></div>
<div id="p-secondLeadingZero">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/secondLeadingZero">secondLeadingZero</a></span></code></dt>
  <dd>
    Type : <i>booléen</i></dd>
  <dd>
    Une valeur en lecture seule indiquant si un zéro initial doit être affiché avant la valeur des secondes si celle-ci est inférieure à 10.</dd>
</dl></div>
<div id="p-tabIndex">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/tabIndex">tabIndex</a></span></code>
</dt><dd> Type : <i>entier</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-tabindex"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/tabindex">tabindex</a></code>.
</dd></dl>

</div>
<div id="p-timepicker.value">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/value">value</a></span></code></dt>
  <dd>
    Type : <i>chaîne</i></dd>
  <dd>
    L'heure actuellement entrée sous la forme HH:MM:SS. Modifiez cette propriété pour changer cette heure.</dd>
</dl></div>

<h3 id="M.C3.A9thodes" name="M.C3.A9thodes"> Méthodes </h3>
<p><span class="lang lang-fr" lang="fr">
</span></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Héritées de XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Héritées de DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody>
</table>

<h3 id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s"> Sujets liés </h3>
<dl><dt> Interfaces
</dt><dd> <a href="fr/NsIDOMXULControlElement">nsIDOMXULControlElement</a>
</dd></dl>
<div class="noinclude">
</div>