Vanilla Datepicker for Bootstrap 5

Floating label only

Input group only

Floating label & input group

Requires vanillajs-datepicker plus the usual Bootstrap CSS & JS.

avio
New Sessions

22,500

Analytics for last week
TIME ON SITE

1,070

Analytics for last week
BOUNCE RATE

10K

Analytics for last week
GOAL COMPLETIONS

$1,22,500

Analytics for last week
avio - Admin Dashboard Template

1 Jan 20222, 11:15 AM

Impressions & Data Traffic
Or you can sync data to Dashboard to ensure your data is always up-to-date.
Impressions
4.2M 43%
5.0M Total Target
Data Transfered
8.3M 17%
10.0M Total Target
Delevered
87%
Transfered
77%
IMPRESSIONS
TRANSFERED
JanJanFebFebMarchMarchAprAprMayMayJunJunJulyJulyAugAugSeptSeptOctOctNovNovDecDec100100808060604040202000
Recent Campaigns
New Freebies for Designer and Developer
Regular (Send by time zone) 22 Dec 2021
  • 3,021
    Recipents
  • 12.5%
    Opened
  • 5.7%
    Clicked
Lucid - VueJS Admin Template & Webapp kit
Regular (Send by time zone) 25 Dec 2021
  • 5,201
    Recipents
  • 16.5%
    Opened
  • 5.7%
    Clicked
Alpino - Bootstrap 4 Admin Dashboard Template
Regular (Send by time zone) 26 Dec 2021
  • 3,548
    Recipents
  • 18.5%
    Opened
  • 8.7%
    Clicked
New sale AVIO Admin template
Regular (Send by time zone) 31 Dec 2021
  • 1,850
    Recipents
  • 10.5%
    Opened
  • 5.7%
    Clicked
// Apex-wc-1 var apexwc1 = { chart: { type: 'bar', height: 50, sparkline: { enabled: true }, }, series: [{ data: [47, 45, 54, 38, 24, 65, 31, 45, 56, 24, 65, 31] }], colors: ['var(--chart-color1)'], } new ApexCharts(document.querySelector("#apex_c_1"), apexwc1).render(); // Apex-wc-2 var apexwc2 = { chart: { type: 'bar', height: 50, sparkline: { enabled: true }, }, series: [{ data: [47, 45, 54, 38, 56, 24, 24, 65, 31, 45, 65, 31] }], colors: ['var(--chart-color2)'], } new ApexCharts(document.querySelector("#apex_c_2"), apexwc2).render(); // Apex-wc-3 var apexwc3 = { chart: { type: 'bar', height: 50, sparkline: { enabled: true }, }, series: [{ data: [47, 24, 65, 31, 45, 45, 54, 38, 56, 24, 65, 31] }], colors: ['var(--chart-color3)'], } new ApexCharts(document.querySelector("#apex_c_3"), apexwc3).render(); // Apex-wc-4 var apexwc4 = { chart: { type: 'line', height: 50, sparkline: { enabled: true }, }, series: [{ data: [47, 56, 24, 65, 31, 45, 54, 38, 24, 65, 31, 45] }], stroke: { width: 2, curve: 'smooth', }, colors: ['var(--chart-color5)'], } new ApexCharts(document.querySelector("#apex_c_4"), apexwc4).render(); // Apex-wc-9 var apexwc9 = { series: [{ name: "IMPRESSIONS", data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10] }, { name: "TRANSFERED", data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47] }], chart: { height: 320, type: 'line', // line, bar, area toolbar: { show: false, }, zoom: { enabled: false }, }, colors: ['var(--chart-color1)', 'var(--chart-color5)'], dataLabels: { enabled: false }, stroke: { width: [2, 2], curve: 'smooth', // straight, smooth dashArray: [10, 0] }, legend: { tooltipHoverFormatter: function(val, opts) { return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '' } }, markers: { size: 0, hover: { sizeOffset: 6 } }, xaxis: { categories: ['Jan', 'Feb', 'March', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'], }, tooltip: { y: [{ title: { formatter: function(val) { return val + " (M)" } } }, { title: { formatter: function(val) { return val + " (M)" } } }] }, }; new ApexCharts(document.querySelector("#apex_c_5"), apexwc9).render();