Latest web development tutorials

exemple jQuery UI - le sélecteur de date (Datepicker)

Dans la boîte de pop-up ou un calendrier en ligne pour sélectionner une date.

Pour plus de détails sur les composants de datepicker, consultez la documentation de l' API membre du sélecteur de date (le Datepicker le Widget) .

La fonction par défaut

Le sélecteur de date (Datepicker) est lié à une forme standard sur le champ de saisie. Déplacer le focus sur l'entrée (ou utilisez la touche de tabulation pour cliquer) pour ouvrir un calendrier interactif sur une petite superposition. Choisissez une date, cliquez n'importe où sur la page (zone de saisie perd le focus), ou cliquez sur la touche Echap pour fermer. Si vous sélectionnez une date, le retour est affiché en tant que valeur de l'entrée. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - La fonction par défaut </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ();
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> </ p>
 
 
</ Body>
</ Html>

la

animation

Utilisez différentes animations lorsque vous ouvrez ou fermez le datepicker. Sélectionnez un film à partir de la liste déroulante, puis cliquez dans la zone pour voir son effet. Vous pouvez utiliser l'un des trois animation standard, effets spéciaux, ni utiliser une interface utilisateur. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
	<Meta charset = "utf-8">
	<Titre> jQuery UI date de sélecteur (Datepicker) - Anime </ title>
	<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
	<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
	<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
	<Script>
	$ (Function () {
		$ ( "#datepicker") .datepicker ();
		$ ( "#anim") .Modification (Function () {
			$ ( "#datepicker") .datepicker ( "Option", "showAnim", $ (this) .val ());
		});
	});
	</ Script>
</ Head>
<Body>

<P> Date: <input type = "text" id = taille "datepicker" = "30"> </ p>

<P> Animation: <br>
	<Sélectionnez id = "anim">
		<Option value = "show"> Show (par défaut) </ option>
		<Option value = "slideDown"> slide </ option>
		<Option value = "fadeIn"> Fade </ option>
		<Option value = "aveugles"> (effets des stores de l'interface utilisateur) Aveugles </ option>
		<Option value = "rebond"> Bounce (effets UI de rebond) </ option>
		<Option value = "clip"> clip (effets de montage de l'interface utilisateur) </ option>
		<Option value = "drop"> Drop (UI effets débarqué) </ option>
		<Option value = "fold"> Replier (effets de l'interface utilisateur plié) </ option>
		<Option value = "slide"> Diaporama (UI effets de glissement) </ option>
		<Option value = ""> Non </ option>
	</ Select>
</ P>


</ Body>
</ Html>

la

Autres mois de la date

datepicker peut montrer supplémentaire date de mois, ces dates peuvent être réglées sur option. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - dans les autres mois de la date </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      showOtherMonths: true,
      selectOtherMonths: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> </ p>
 
 
</ Body>
</ Html>

la

barre de boutons d'affichage

Par booléennes showButtonPanel pour la sélection de l'affichage de la date d'aujourd'hui , un bouton "Aujourd'hui" pour éteindre le calendrier affiche une option de bouton "Terminé". Par défaut, quand un affichage de la barre de bouton permettra à chaque bouton, mais le bouton peut être désactivé à travers les autres options. Texte du bouton peut être personnalisé. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - Afficher la barre de bouton </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      showButtonPanel: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> </ p>
 
 
</ Body>
</ Html>

la

Affichage en ligne

datepicker est imbriqué dans l'affichage de la page, plutôt que dans une couche de couverture. Il suffit d'appeler le .datepicker div () peut être, au lieu d'appeler à l'entrée. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI sélecteur de date (Datepicker) - affichage en ligne </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ();
  });
  </ Script>
</ Head>
<Body>
 
Date: <div id = "datepicker"> </ div>
 
 
</ Body>
</ Html>

la

Afficher Mois et Année Menu

zone de liste déroulante affiche le mois et l'année, plutôt que d'un affichage statique du titre mois / année, il est facile de couvrir une large gamme de temps sur la navigation. Ajouter une valeur booléenne changeMonth et changeYear option. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - Affichage mois & amp; Menu Année </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      changeMonth: true,
      changeYear: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> </ p>
 
 
</ Body>
</ Html>

la

Affichage de plusieurs mois

La mise numberOfMonths option est un nombre entier 2 ou un entier supérieur à 2, à afficher sur un datepicker plusieurs mois. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - afficher plusieurs mois </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      NUMBEROFMONTHS: 3,
      showButtonPanel: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> </ p>
 
 
</ Body>
</ Html>

la

Format de date

Dans une variété de manières d'afficher les commentaires de la date. Sélectionnez un format de date dans la liste déroulante, puis cliquez sur et sélectionnez une date dans la zone de saisie, afficher le format de date de l'affichage sélectionné. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - Format de date </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ();
    $ ( "#format") .Modification (Function () {
      $ ( "#datepicker") .datepicker ( "Option", "dateFormat", $ (this) .val ());
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = taille "datepicker" = "30"> </ p>
 
<P> Options de format: <br>
  <Select id = "format">
    <Option value = "jj / mm / yy"> Par défaut - jj / mm / aa </ option>
    <Option value = "yy-mm-dd"> ISO 8601 - yy-mm-dd </ option>
    <Option value = "d M, y"> court - d M, y </ option>
    <Option value = "d MM, y"> Moyen - d MM, y </ option>
    <Option value = "DD, d MM, yy"> Full - DD, d MM, yy </ option>
    <Option value = "& apos; jour & apos; d & apos; de & apos; MM & apos; à l'année & apos; yy"> Avec texte - 'jour' d 'de' MM 'dans l'année' yy </ option>
  </ Select>
</ P>
 
 
</ Body>
</ Html>

la

Trigger icône

Cliquez sur l'icône à côté de la zone de saisie pour afficher le datepicker. Réglage datepicker ouvre (comportement par défaut) au niveau du foyer, ou cliquez sur l'icône pour ouvrir ou ouvrir / recevoir le focus en cliquant sur l'icône. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - Trigger icône </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      showOn: "bouton",
      buttonImage: "images / calendar.gif",
      buttonImageOnly: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> </ p>
 
 
</ Body>
</ Html>

la

calendrier localisée

Localisation datepicker langue de calendrier et le format (la valeur par défaut est l'anglais / format de l'Ouest). datepicker contient un support intégré pour les langues de lecture de droite à gauche, comme l'arabe et l'hébreu. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - calendrier localisé </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
  <Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
  <Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
  <Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker (.datepicker.regional $ [ "Fr"]);
    $ ( "#locale") .Modification (Function () {
      $ ( "#datepicker") .datepicker ( "Option",
        $ .datepicker.regional [$ (Ce) .val ()]);
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> & nbsp;
  <Sélectionnez id = "locale">
    <Option value = "ar"> Arabe (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
    <Option value = "zh-TW"> traditionnelle chinoise (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
    <Option value = ""> English </ option>
    <Option value = "fr" selected = "selected"> Français (Fran & ccedil; ais) </ option>
    <Option value = "he"> hébreu (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
  </ Select> </ p>
 
 
</ Body>
</ Html>

la

Remplir une autre boîte d'entrée

Utilisez altField et altFormat des options chaque fois que sélectionnez une date, la date sera rempli avec un certain format dans une autre boîte d'entrée. Lorsque cette fonction à la date sur le traitement ultérieur facile à l'ordinateur, l'utilisateur est présenté avec une date conviviale. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - remplir une autre boîte d'entrée </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      Altfield: "#alternate",
      altFormat: "DD, d MM, yy"
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> & nbsp; <input type = "text" id = taille "alternate" = "30"> </ p>
 
 
</ Body>
</ Html>

la

Limiter la plage de dates

Par minDate et maxDate option limite la plage de dates sélectionnables. Définissez les dates de début et de fin de la date réelle (new Date (2009, 1 - 1, 26)), ou une chaîne de valeur de décalage d'aujourd'hui (-20), ou comme un cycle et des unités ( '+ 1M + 10D »). Si la valeur est une chaîne, utilisez le 'D' pour les jours, en utilisant un 'W' représente semaines, en utilisant 'M' pour le mois, en utilisant le 'Y' est l'année. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - limiter la plage de dates </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({MinDate: -20, maxDate: "+ 1M + 10D"});
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> </ p>
 
 
</ Body>
</ Html>

la

Sélectionnez une plage de dates

Sélectionnez une plage de dates pour la recherche. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - Sélectionnez une plage de dates </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#from") .datepicker ({
      defaultDate: "+ 1s",
      changeMonth: true,
      NUMBEROFMONTHS: 3,
      onClose: function (selectedDate) {
        $ ( "#pour") .datepicker ( "Option", "MinDate", selectedDate);
      }
    });
    $ ( "#pour") .datepicker ({
      defaultDate: "+ 1s",
      changeMonth: true,
      NUMBEROFMONTHS: 3,
      onClose: function (selectedDate) {
        $ ( "#from") .datepicker ( "Option", "maxDate", selectedDate);
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Label for = "de"> de </ label>
<Input type = "text" id = "de" name = "de">
<Label for = "à"> à </ label>
<Input type = "text" id = "à" name = "à">
 
 
</ Body>
</ Html>

la

La Semaine de l'année montrent

datepicker peut afficher les premières semaines de l'année. La valeur par défaut est calculé conformément à la norme ISO 8601 Définition: la semaine à partir de lundi, la première semaine de l'année qui contient le premier jeudi de. Cela signifie que dans un an et peut être un autre couple de jours dans la semaine. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI date de sélecteur (Datepicker) - afficher les premières semaines de l'année </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      showWeek: true,
      FirstDay: 1
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Date: <input type = "text" id = "datepicker"> </ p>
 
 
</ Body>
</ Html>

la