Fermer

mai 20, 2019

3 façons de sélectionner des dates dans les formulaires Vue.js à l'aide de Kendo UI


Cet article décrit trois manières d’ajouter une sélection de date à votre application Vue.js à l’aide de Kendo UI. Nous expliquons le besoin de dates, ses utilisations sur les applications Web modernes et construisons une application Vue.js.

Les dates constituent un élément essentiel des composants de développement Web modernes. Les utilisations sont principalement illustrées dans les planificateurs, les calendriers et les formulaires dans lesquels les utilisateurs doivent sélectionner des dates spécifiques pour la survenue d'un événement particulier. Dans cet article, nous allons montrer trois façons de rendre un composant de date dans votre application Vuejs à l'aide d'un composant Kendo UI Dateinput.

Créer un projet Vue

Pour commencer à construire notre projet, nous Vous devez d’abord créer un projet Vue, installer les packages Kendo UI dont nous aurons besoin pour le projet et enfin créer notre formulaire d’activité. Sans plus attendre, ouvrez une fenêtre de terminal sur votre répertoire préféré et exécutez la commande ci-dessous:

 $ vue create dateinput-demo

Si vous n'avez pas installé Vue CLI dans le monde, veuillez suivre ce guide et revenez ensuite à la suite de cette leçon.

Lorsque vous avez terminé de démarrer votre application Vue, placez-vous dans le nouveau répertoire de Vue et démarrez le serveur de développement.

 $  cd  dateinput-demo
[ npm  $ servir servir

Ceci servira votre application Vue sur localhost: 8080 . Naviguez jusqu'à votre navigateur et vous verrez votre application Vue en direct.

Vue-app "title =" Vue-app "/> </p> <h3> Ajouter l'interface utilisateur de Kendo au projet </h3> <p> Ensuite, ajoutons Kendo UI à notre nouveau projet Vue. Pour la portée de cette démonstration, nous aurons besoin de </p> <ol> <li> Le package Kendo UI </li> <li> Le package de thème par défaut Kendo UI </li> <li> L’enveloppe DateInout de Kendo UI pour Vue </li> </ol> <p> Pour ce faire, ouvrez un fenêtre du terminal dans le répertoire racine du projet et exécutez les commandes ci-dessous: </p> <pre class= $ npm install - save @progress / kendo - ui $ npm install - save @progress / kendo - des entrées de date - de - de couverture $ npm install - save @progress / kendo - thème - défaut

Enfin, nous ajoutons les packages nécessaires de Kendo UI du service CDN. Ouvrez le fichier index.html du répertoire public et ajoutez cet extrait dans le tag :


 <   rel  = [19659024] " feuille de style "    href  =  " https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common .min.css  "  /> 
 < link   rel  = "  feuille de style  " 

 [1965922] href 
 =  " https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css "   /> [19659037] < script   src  =  " https://code.jquery.com/jquery-1.12.4.min.js "    ]>  </  script > 
 < script   src  =  " https://kendo.cdn.telerik.com/ 2017.3.913 / js / kendo.all.min.js  " >  </  script > 
 < script   src  =  " https://unpkg.com/vue/dist/vue.min.js  " >  </  script >

Maintenant que nous avons tous les paquetages Kendo UI nécessaires dans notre projet, poursuivons et construisons notre calendrier.

1. Sélection de date avec Kendo UI Composant de calendrier DateInput

En règle générale, les composants DateInput permettent aux utilisateurs de sélectionner des dates et des heures à différentes fins, que ce soit pour remplir des formulaires, programmer des événements, gérer des tâches, etc. Nous allons montrer ici comment pour sélectionner des dates dans notre application Vue à l'aide du composant Calendrier DateInput de Kendo UI

Pour ce faire, nous devons modifier notre application Vue que nous venons de créer. Ouvrez le dossier src / components / vous devriez trouver un fichier existant HelloWorld.vue . Renommez le fichier en DateInputs.vue et mettez-le à jour avec le code ci-dessous:

 <!  -  src  /  composants  /  DateInputs .  vue  - > 

 < modèle > 

   < div  classe  = 19659069] "bonjour" > 

     < h3 >  { { msg } }  < /  h3 > 

     < div id  =  "vueapp"   class  =  "vue-app" > 

       <  div  classe  =  "col-xs-12 col-sm-6 exemple-col" > 

         < div  classe  =  "col-xs-12 exemple-col-sm-6" > 

           < p >  Sélectionnez les dates  dans  le calendrier ci-dessous  < /  p > 

           < kendo [1945902] 5] -  calendar v  -  on :  naviguer  =  "onNavigate" >  < /  kendo  -  calendar > 

         < /  div > 

       < /  div > 

     < ] /  div > 

   < /  div > 

 < /  modèle > 

 < script > 

 export   défaut   {

  nom :   "DateInputs" 

  accessoires :   {

    msg :  Chaîne

  } 

  Méthodes :   {

    onNavigate :   function  ( e )   [

       var  view








 Le meilleur outil 2023 pour ta croissance Instagram ! 








   


Source link