web-dev-qa-db-fra.com

comment afficher le calendrier sur la zone de texte, cliquez en html

En html, je veux montrer calendrier pour sélectionner la date tout en en cliquant sur une zone de texte. puis nous sélectionnons une date dans ce calendrier puis la date sélectionnée sera être affiché dans que zone de texte.

javascriptjqueryhtmlhtml5
13
Vinoth

À partir de HTML5, <input type="date" /> fera très bien l'affaire.

Démo: http://jsfiddle.net/8N6KH/

20
Silviu Burcea

Vous devriez lire sur jQueryUI Datepicker

Une fois que vous avez inclus la bibliothèque d'interface utilisateur jQuery pertinente, c'est aussi simple que,

Script: 

$(function() {
    $( "#datepicker" ).datepicker();
});

HTML: 

<input type="text" id="datepicker" />

Avantages:

  • il est soigneusement testé pour la compatibilité avec x-browser, vous n'aurez donc aucun problème.
  • Fichier CSS séparé, afin que vous puissiez le personnaliser à votre guise
5
ta-run

essayez d'utiliser jquery-ui

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<script>   
    $(function() {
         $( "#calendar" ).datepicker();   
    }); 
</script>

<p>Calendar: <input type="text" id="calendar" /></p>

plus

3
D.clixer

oui, vous rencontrerez divers problèmes en utilisant HTML5 datepicker, cela fonctionnerait avec certains ou pourrait ne pas l'être. J'ai fait face au même problème. Veuillez vérifier cela DatePicker Demo , j'ai résolu mon problème avec ce plugin. Son plugin datepicker très bon et flexible avec démo complète. Il est également entièrement compatible avec les navigateurs mobiles et peut également être intégré à jquery mobile.

1
ajitksharma

Ce dont vous avez besoin est un jQuery UI Datepicker

Découvrez démo et le code source.

1
Victor

Vous devrez utiliser n'importe quel widget de calendrier html javascript.

essayez ceci widget vue calendrier , copiez-collez simplement le code montré dans l'exemple ici et c'est ce que vous voulez.

Voici le lien vers la boîte de date Jquery Mobile - boîte de date JQM

1
Maulik Vora

Sélecteur de date HTML Vous pouvez faire référence à this .

0
nikinup

jQuery Mobile a également un sélecteur de date. Source

Incluez simplement les fichiers suivants,

  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>
0
Starx