Maison > interface Web > Questions et réponses frontales > Comment convertir la date en chaîne dans jquery

Comment convertir la date en chaîne dans jquery

PHPz
Libérer: 2023-05-12 13:02:37
original
1289 Les gens l'ont consulté

Dans le développement front-end, le traitement des dates est un problème courant. Lors du développement avec jQuery, la conversion des dates en chaînes est également une exigence courante. Cet article montrera comment convertir des dates en chaînes en introduisant le plug-in jQuery datepicker.

1. jQuery datepicker

jQuery datepicker est un plug-in de sélecteur de date qui utilise le style de jQuery UI et fournit des fonctions interactives pour la sélection de date. À l'aide du plugin jQuery datepicker, vous pouvez facilement sélectionner des dates et les formater en chaînes.

  1. Installez jQuery datepicker

Tout d'abord, vous devez introduire les fichiers de bibliothèque de jQuery et jQuery UI, ainsi que les fichiers de bibliothèque de jQuery datepicker dans la page HTML. Les fichiers de bibliothèque correspondants peuvent être téléchargés depuis le site officiel de jQuery (https://jquery.com/) et le site officiel de jQuery UI (https://jqueryui.com/). Ou chargez en utilisant CDN.





  1. Utilisation de jQuery datepicker

Pour utiliser jQuery datepicker, il vous suffit d'ajouter une classe à la zone de saisie de date, puis d'appeler la fonction datepicker en JavaScript.

Code HTML :

Code JavaScript :

$(document).ready(function(){

$(".datepicker").datepicker();
Copier après la connexion

});

C'est tout Vous pouvez cliquer sur la zone de saisie de la date pour afficher le sélecteur de date.

2. Convertir la date en chaîne

La conversion de la date en chaîne implique principalement deux processus : l'obtention de la date et le formatage en chaîne.

  1. Obtenir la date

En utilisant le sélecteur de date jQuery, vous pouvez obtenir la date via des fonctions. Par exemple, pour obtenir la date par défaut à laquelle le sélecteur de date apparaît :

$(".datepicker").datepicker("getDate")

Cette fonction renvoie un objet de type JavaScript Date.

  1. Formater en chaîne

L'utilisation du type Date de JavaScript est livrée avec certaines méthodes de formatage de date, notamment toDateString(), toLocaleDateString(), etc. Mais l’inconvénient de ces méthodes est que le format ne peut pas être personnalisé.

Afin de formater facilement les dates, nous pouvons utiliser la bibliothèque tierce moment.js (https://momentjs.com/), qui fournit une méthode de traitement des dates très pratique.

Par exemple, si nous voulons formater la date au format aaaa-mm-jj, nous pouvons utiliser la méthode format() de moment.js.

moment(date).format("YYYY-MM-DD")

Parmi eux, date est un objet JavaScript de type Date, représentant la date à formater. Le paramètre de la méthode format() est une chaîne utilisée pour spécifier le format de sortie. AAAA représente l'année à quatre chiffres, MM représente le mois et DD représente le nombre de jours.

Le code complet est le suivant :

Code HTML :



< p id="result">

Code JavaScript :

$(document).ready(function(){

$(".datepicker").datepicker();
$("#btnConvert").click(function(){
    var date = $(".datepicker").datepicker("getDate");
    var dateString = moment(date).format("YYYY-MM-DD");
    $("#result").text(dateString);
});
Copier après la connexion

});

Tout d'abord, ajoutez la classe datepicker pour la zone de saisie de date . Ensuite, un bouton est défini pour déclencher le processus de conversion de date. Lorsque vous cliquez sur le bouton, la fonction getUserDate() obtiendra la date et utilisera moment.js pour formater la date dans une chaîne.

3. Résumé

En utilisant le plug-in jQuery datepicker, vous pouvez rapidement implémenter un sélecteur de date. En utilisant moment.js, vous pouvez facilement convertir des dates en chaînes et personnaliser le format de date. Grâce à l'explication de cet article, je pense que tout le monde comprend mieux comment jQuery convertit les dates en chaînes.

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!

source:php.cn
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