Date and Time Picker
Basic
Date time picker is powered by flatpickr.js that gives the ability to user to select date or time.
var f1 = flatpickr(document.getElementById('basicFlatpickr'));
Date Time
Use enableTime: true
and dateFormat: "Y-m-d H:i"
option to enable time support
var f2 = flatpickr(document.getElementById('dateTimeFlatpickr'), {
enableTime: true,
dateFormat: "Y-m-d H:i",
});
Range Calendar
Use mode: range
select the date with range.
var f3 = flatpickr(document.getElementById('rangeCalendarFlatpickr'), {
mode: "range"
});
Preloading Time
Use noCalendar: true
with Date Time options to disable calendar and show time picker only.
var f4 = flatpickr(document.getElementById('timeFlatpickr'), {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
defaultDate: "13:45"
});
Javascript Range Slider
Postion : Top-Left
0 %
<div class="custom-progress progress-up" style="width: 100%">
<div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
<input type="range" min="0" max="100" class="custom-range progress-range-counter" value="0">
</div>
Postion : Top-Right
0 %
<div class="custom-progress top-right progress-up" style="width: 100%">
<div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
<input type="range" min="0" max="100" class="custom-range progress-range-counter" value="0">
</div>
Postion : Bottom-Left
0 %
<div class="custom-progress progress-down" style="width: 100%">
<input type="range" min="0" max="100" class="custom-range progress-range-counter" value="0">
<div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
</div>
Postion : Bottom-Right
0 %
<div class="custom-progress bottom-right progress-down" style="width: 100%">
<input type="range" min="0" max="100" class="custom-range progress-range-counter" value="0">
<div class="range-count"><span class="range-count-number" data-rangecountnumber="0">0</span> <span class="range-count-unit">%</span></div>
</div>
noUI Slider
Using HTML5 input elements
10.00
30.00
=============
HTML
=============
<div class="container">
<div id="html5"></div>
<br/>
<div class="row mt-4 mb-4">
<div class="col-lg-6 mb-3">
<select id="input-select" class="form-control"></select>
</div>
<div class="col-lg-6">
<input type="number" class="form-control" min="-20" max="40" step="1" id="input-number">
</div>
</div>
</div>
=============
Javascript
=============
var html5Slider = document.getElementById('html5');
noUiSlider.create(html5Slider, {
start: [ 10, 30 ],
connect: true,
tooltips: true,
range: {
'min': -20,
'max': 40
}
});
Non linear slider
500.00
4000.00
500.00 10.00%
4000.00 50.00%
=============
HTML
=============
<div class="container">
<div id="nonlinear"></div>
<br/>
<div class="row mt-4 mb-4">
<div class="col-lg-6">
<span class="example-val" id="lower-value"></span>
</div>
<div class="col-lg-6 text-right">
<span class="example-val" id="upper-value"></span>
</div>
</div>
</div>
=============
Javascript
=============
/*--------Non linear slider----------*/
var nonLinearSlider = document.getElementById('nonlinear');
noUiSlider.create(nonLinearSlider, {
connect: true,
behaviour: 'tap',
tooltips: true,
start: [ 500, 4000 ],
range: {
// Starting at 500, step the value by 500,
// until 4000 is reached. From there, step by 1000.
'min': [ 0 ],
'10%': [ 500, 500 ],
'50%': [ 4000, 1000 ],
'max': [ 10000 ]
}
});
var nodes = [
document.getElementById('lower-value'), // 0
document.getElementById('upper-value') // 1
];
// Display the slider value and how far the handle moved
// from the left edge of the slider.
nonLinearSlider.noUiSlider.on('update', function ( values, handle, unencoded, isTap, positions ) {
nodes[handle].innerHTML = values[handle] + ' <span class="precentage-val">' + positions[handle].toFixed(2) + '% </span>';
});
Locking sliders together
60.00
80.00
=============
HTML
=============
<div class="container">
<div class="row mb-4">
<div class="col-lg-12 mb-5">
<div id="slider1"></div>
<span class="example-val mt-4 d-inline-block" id="slider1-span"></span>
</div>
</div>
<br/>
<div class="row mb-0">
<div class="col-lg-12 mb-5">
<div id="slider2"></div>
<span class="example-val mt-4 d-inline-block" id="slider2-span"></span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button id="lockbutton" class="btn btn-primary mb-4" style="float: right; margin: 20px 0 0;">lock</button>
</div>
</div>
</div>
=============
Javascript
=============
/*-----Locking sliders together-----*/
// setting up button clicks
// Store the locked state and slider values.
var lockedState = false,
lockedSlider = false,
lockedValues = [60, 80],
slider1 = document.getElementById('slider1'),
slider2 = document.getElementById('slider2'),
lockButton = document.getElementById('lockbutton'),
slider1Value = document.getElementById('slider1-span'),
slider2Value = document.getElementById('slider2-span');
// When the button is clicked, the locked
// state is inverted.
lockButton.addEventListener('click', function(){
lockedState = !lockedState;
this.textContent = lockedState ? 'unlock' : 'lock';
});
// cross updating
function crossUpdate ( value, slider ) {
// If the sliders aren't interlocked, don't
// cross-update.
if ( !lockedState ) return;
// Select whether to increase or decrease
// the other slider value.
var a = slider1 === slider ? 0 : 1, b = a ? 0 : 1;
// Offset the slider value.
value -= lockedValues[b] - lockedValues[a];
// Set the value
slider.noUiSlider.set(value);
}
// initializing silders
noUiSlider.create(slider1, {
start: 60,
// Disable animation on value-setting,
// so the sliders respond immediately.
animate: false,
tooltips: true,
range: {
min: 50,
max: 100
}
});
noUiSlider.create(slider2, {
start: 80,
animate: false,
tooltips: true,
range: {
min: 50,
max: 100
}
});
slider1.noUiSlider.on('update', function( values, handle ){
slider1Value.innerHTML = values[handle];
});
slider2.noUiSlider.on('update', function( values, handle ){
slider2Value.innerHTML = values[handle];
});
// linking sliders together
function setLockedValues ( ) {
lockedValues = [
Number(slider1.noUiSlider.get()),
Number(slider2.noUiSlider.get())
];
}
slider1.noUiSlider.on('change', setLockedValues);
slider2.noUiSlider.on('change', setLockedValues);
// The value will be send to the other slider,
// using a custom function as the serialization
// method. The function uses the global 'lockedState'
// variable to decide whether the other slider is updated.
slider1.noUiSlider.on('slide', function( values, handle ){
crossUpdate(values[handle], slider2);
});
Copyright © 2021 DesignReset, All rights reserved.
Coded with