تاریخ و انتخابگر دامنه
اولیه
انتخاب زمان تاریخ توسط flatpickr.js که به کاربر امکان می دهد تاریخ یا زمان را انتخاب کند.
var f1 = flatpickr(document.getElementById('basicFlatpickr'));
تاریخ و ساعت
استفاده از enableTime: true
و dateFormat: "Y-m-d H:i"
گزینه ای برای پشتیبانی از زمان
var f2 = flatpickr(document.getElementById('dateTimeFlatpickr'), { enableTime: true, dateFormat: "Y-m-d H:i", });
دامنه تقویم
استفاده از mode: range
محدوده تاریخ را انتخاب کنید.
var f3 = flatpickr(document.getElementById('rangeCalendarFlatpickr'), { mode: "range" });
زمان پیش بارگیری
استفاده از noCalendar: true
تاریخ و ساعت را با گزینه هایی برای غیرفعال کردن تقویم انتخاب کنید و فقط زمان نمایش را انتخاب کنید.
var f4 = flatpickr(document.getElementById('timeFlatpickr'), { enableTime: true, noCalendar: true, dateFormat: "H:i", defaultDate: "13:45" });
محدوده کشویی Javascript
موقعیت: بالا سمت چپ
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>
موقعیت: بالا سمت راست
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>
موقعیت: پایین سمت چپ
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>
موقعیت: پایین سمت راست
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>
کشویی جدید
با استفاده از عناصر ورودی HTML5
============= 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 } });
کشویی غیر خطی
============= 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>'; });
قفل های کشویی را با هم قفل کنید
============= 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); });
© کپی رایت
بومی سازی شده توسط : ایمان پاکروح