{"id":24756,"date":"2021-05-24T09:25:00","date_gmt":"2021-05-24T06:25:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24756"},"modified":"2021-10-18T02:14:09","modified_gmt":"2021-10-17T23:14:09","slug":"comment-implementer-jquery-datepicker-avec-timepicker","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-implementer-jquery-datepicker-avec-timepicker\/","title":{"rendered":"Comment impl\u00e9menter jQuery Datepicker avec Timepicker"},"content":{"rendered":"

Cherchez-vous \u00e0 ajouter un s\u00e9lecteur de temps au s\u00e9lecteur de date jQuery UI existant\u00a0? En ajoutant un timepicker, on peut s\u00e9lectionner l’heure avec la date. Dans cet article, je vous montre un moyen simple d’impl\u00e9menter jQuery Datepicker avec un timepicker.<\/p>\n

Nous proc\u00e9dons \u00e9tape par \u00e9tape \u00e0 l’ajout d’un timepicker au jQuery UI Datepicker. Si quelqu’un ne veut pas suivre chaque \u00e9tape, il peut copier directement le code final de la derni\u00e8re section de cet article.<\/p>\n

Lorsque nous aurons termin\u00e9 notre int\u00e9gration, le dernier datetimepicker ressemblera \u00e0 ceci.<\/p>\n

\"Comment<\/a><\/p>\n

Commen\u00e7ons par jQuery UI Datepicker<\/h3>\n

Notre objectif est d’ajouter un timepicker au jQuery UI Datepicker<\/a>. jQuery Datepicker nous fournit un calendrier en ligne pour s\u00e9lectionner la date. Ajoutons ce s\u00e9lecteur de date en utilisant le code ci-dessous.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>jQuery Datetimepicker<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.css\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<p>Date: <input type=\"text\" id=\"datepicker\"><\/p>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#datepicker\").datepicker();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Acc\u00e9dez au navigateur et ex\u00e9cutez le fichier ci-dessus, vous devriez voir le s\u00e9lecteur de date sur votre page.<\/p>\n
Impl\u00e9menter jQuery Datepicker avec Time Picker<\/h3>\n
Afin d’ajouter un s\u00e9lecteur de temps, j’utiliserai le<\/a> plugin Timepicker<\/a> qui est facile \u00e0 int\u00e9grer avec jQuery UI Datepicker.<\/p>\n
Une fois que vous visitez le site Web, faites d\u00e9filer jusqu’\u00e0 la section de t\u00e9l\u00e9chargement et cliquez sur le lien CDNJS. A partir de ce lien, copiez les fichiers JS et CSS du plugin. Voici le lien CDNJS que vous obtiendrez sur leur site internet<\/a>https:\/\/cdnjs.com\/libraries\/jquery-ui-timepicker-addon<\/a>.<\/p>\n
\"Comment<\/a><\/p>\n
Sur le site Web de CDNJS, vous pouvez voir les diff\u00e9rentes URL de l’addon timepicker. Copiez les 2 liens ci-dessous de JS et CSS.<\/p>\n
\"Comment<\/a><\/p>\n
Juste pour vous faciliter la t\u00e2che, vous trouverez ci-dessous ces liens. Utilisez ces liens dans l’\u00e9tape suivante du didacticiel.<\/p>\n
https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-ui-timepicker-addon\/1.6.3\/jquery-ui-timepicker-addon.min.css\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-ui-timepicker-addon\/1.6.3\/jquery-ui-timepicker-addon.min.js<\/code><\/pre>\n
Une fois que vous obtenez le JS et le CSS requis, vous \u00eates pr\u00eat \u00e0 ajouter un timepicker. Ce que vous devez faire est d’inclure les fichiers copi\u00e9s en HTML et de remplacer la datepicker()<\/code>fonction par datetimepicker()<\/code>.<\/p>\n
Notre code final est le suivant :<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>jQuery Datetimepicker<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.css\" \/>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-ui-timepicker-addon\/1.6.3\/jquery-ui-timepicker-addon.min.css\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<p>Date: <input type=\"text\" id=\"datepicker\"><\/p>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-ui-timepicker-addon\/1.6.3\/jquery-ui-timepicker-addon.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#datepicker\").datetimepicker();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
C’est \u00e7a! Maintenant, si vous rechargez la page, vous devriez voir \u00e0 la fois le s\u00e9lecteur de date et le s\u00e9lecteur d’heure sur votre page. S’il vous pla\u00eet allez-y et essayez-le. J’aimerais entendre vos pens\u00e9es dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n