Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser le plug-in bootstrap-datepicker ?

青灯夜游
Libérer: 2018-10-22 15:15:57
avant
4475 Les gens l'ont consulté

Cet article explique comment utiliser le plug-in bootstrap-datepicker dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans le développement Web basé sur Boosttrap, il est souvent nécessaire de saisir le contenu des dates. Dans les plug-ins basés sur Boosttrap, vous pouvez utiliser bootstrap-datepicker, un très bon plug-in, pour saisir des dates afin de remplacer le. type par défaut = date. Un contrôle de saisie de date peu convivial. Cet article présente comment j'utilise le plug-in bootstrap-datepicker pour implémenter le traitement de saisie de date dans mon framework de développement Boostrap.

1. Introduction au plug-in bootstrap-datepicker

L'adresse du projet associé au plug-in bootstrap-datepicker est la suivante :

http://www.bootcss .com/ p/bootstrap-datetimepicker

https://github.com/uxsolutions/bootstrap-datepicker

L'utilisation de ce plug-in est similaire aux autres plug-ins. introduisez les fichiers JS et les styles CSS correspondants. Voilà, voici le fichier de référence du plug-in.

<script src="/js/bootstrap-datepicker.js"></script>
<script src="/css/bootstrap-datepicker3.min.css"></script>
Copier après la connexion

Si vous devez utiliser la langue locale, importez simplement le fichier de langue.

<script src="/locales/bootstrap-datepicker.zh-CN.js"></script>
Copier après la connexion

Le répertoire de fichiers du plug-in est le suivant :

L'effet d'interface du plug-in est le suivant :

Lorsque nous utilisons des plug-ins dans le framework MVC, nous introduisons souvent le CSS et le JS correspondants via le packaging. Par exemple, le code de BundleConfig.cs dans le code C# est le même. suit :

Le

fichier CSS introduit le code suivant :

Le fichier JS est similaire, comme indiqué ci-dessous :

Et lorsque nous développons un projet Boostrap, nous pouvons utiliser la méthode master pour introduire les fichiers JS et CSS correspondants, et nous n'avons plus besoin de prêter attention à ces applications sur la sous-page. Ce sont des processus courants. pour le développement Boosttrap basé sur MVC et ne sera pas abordé ici. Pas plus de détails.

2. Code d'utilisation du projet du plug-in bootstrap-datepicker

L'initialisation du plug-in bootstrap-datepicker est également relativement simple. Le code le plus simple est le suivant.

<input type="text" id="datetimepicker">
Copier après la connexion
$('#datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd hh:ii'
});
Copier après la connexion

ou

<script type="text/javascript">
    $(".form_datetime").datetimepicker();
</script>
Copier après la connexion

En utilisation générale, nous devons définir la langue, le format, le bouton et d'autres attributs, comme indiqué ci-dessous

$('.input-daterange input').each(function () {
    $(this).datepicker({
       language: 'zh-CN', //语言
       autoclose: true, //选择后自动关闭
       clearBtn: true,//清除按钮
       format: "yyyy-mm-dd"//日期格式               
    });
});
Copier après la connexion

Dans l'interface pour interroger les données, nous avons généralement besoin d'un intervalle de temps, comme indiqué ci-dessous.

Le code de cette interface est le suivant.

<p class="input-group input-daterange">
   <input id="WHC_PayDate" name="WHC_PayDate" type="text" placeholder="付款日期(起)" data-date-format="yyyy-mm-dd" class="form-control"/>
   <p class="input-group-addon">~</p>
   <input id="WHC_PayDate2" name="WHC_PayDate" type="text" placeholder="付款日期(止)" data-date-format="yyyy-mm-dd" class="form-control"/>
</p>
Copier après la connexion

et lors de la saisie des détails de l'interface, l'interface de sélection d'une seule date est la suivante.

    $('.input-date input').each(function () {
        $(this).datepicker({
            language: 'zh-CN', //语言
            autoclose: true, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd"//日期格式        });
    });
Copier après la connexion

Lors de l'utilisation du plug-in, il nous est impossible d'initialiser le plug-in bootstrap-datepicker pour chaque entrée, nous utilisons donc le traitement du sélecteur de classe méthode pour implémenter l’initialisation de tous les plug-ins de date.

Format de date optionnel du plug-in :

  • aaaa-mm-jj

  • aaaa-mm-jj hh:ii

  • aaaa-mm-jjThh:ii

  • aaaa-mm-jj hh:ii:ss

  • aaaa-mm-jjThh:ii:ssZ

Enfin, jetons un coup d'œil à l'effet global de l'interface.

Résumé : ce qui précède concerne l'utilisation du plug-in bootstrap-datepicker dans Bootstrap. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de didacticiels connexes, veuillez visiter le tutoriel vidéo bootstrap, le manuel en ligne Bootstrap !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal