Pickadate.js Date Range (for past records)

Developer
Mike
Size
2,682 Kb
Views
4,048
  1. Pickadate.js Date Range (for past records) Previews
  2. Pickadate.js Date Range (for past records) HTML Codes
  3. Pickadate.js Date Range (for past records) CSS Codes
  4. Pickadate.js Date Range (for past records) JS Codes

How do I make an pickadate.js date range (for past records)?

What is a pickadate.js date range (for past records)? How do you make a pickadate.js date range (for past records)? This script and codes were developed by Mike on 01 February 2023, Wednesday.

Pickadate.js Date Range (for past records) Previews
IQ Test

Pickadate.js Date Range (for past records) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pickadate.js Date Range (for past records)</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/themes/default.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/themes/default.date.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
<div class="container"> <h2 class="title text-center">Date Range</h2> <div class="col-sm-6"> <div class="form-group"> <label for="fromDate">FROM:</label> <div class="input-group"> <input type="text" id="from-date" class="datepicker date-input form-control" name="fromDate"> <span class="input-group-btn"> <button class="from-datepicker-btn btn btn-default" type="button"> <span class="fa fa-calendar" aria-hidden="true"></span></button> </span> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="toDate">TO:</label> <div class="input-group"> <input type="text" id="to-date" class="datepicker date-input form-control" name="toDate"> <span class="input-group-btn"> <button class="to-datepicker-btn btn btn-default" type="button"><span class="fa fa-calendar" aria-hidden="true"></span></button> </span> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/picker.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/picker.date.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vanilla-masker/1.1.1/vanilla-masker.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pickadate.js Date Range (for past records) - Script Codes CSS Codes

body { margin-top: 40px;
}
.title { padding: 20px 0;
}

Pickadate.js Date Range (for past records) - Script Codes JS Codes

// Pickadate.js v3.5.6 *Buttons inside picker will not work in IE
// IE Fix: drop to v3.5.4 and disable picker on focus with $('.date-input').off('click focus');
// From Picker
var from_$input = $('#from-date').pickadate({ editable: true, selectYears: 100, selectMonths: true, format: 'mm/dd/yyyy', min: false, max: true });
// To Picker
var to_$input = $('#to-date').pickadate({ editable: true, selectYears: 100, selectMonths: true, format: 'mm/dd/yyyy'
});
var from_picker = from_$input.pickadate('picker');
var to_picker = to_$input.pickadate('picker');
// FROM Trigger
$(".from-datepicker-btn").on("click",function(e) { e.preventDefault(); e.stopPropagation(); // open picker from_picker.open(); // Set TO min = FROM selected date from_picker.on('set', function(event) { var date = from_picker.get('select').date; var month = from_picker.get('select').month; var year = from_picker.get('select').year + 1; if ( event.select ) { to_picker.set('select', from_picker.get('select')); $("#to-date").val(""); to_picker.set('min', from_picker.get('select')); to_picker.set('max', [year, month, date]); } else if ('clear' in event) { to_picker.set('min', false) } })
});
// TO Trigger
$(".to-datepicker-btn").on("click",function(e) { e.preventDefault(); e.stopPropagation(); // open picker to_picker.open(); // Set FROM max = TO selected date to_picker.on('set', function(event) { if ( event.select ) { from_picker.set('max', to_picker.get('select')) } else if ( 'clear' in event ) { from_picker.set('max', false) } })
});
// Date Mask via Vanilla Masker **https://github.com/fernandofleury/vanilla-masker
VMasker(document.querySelectorAll('.date-input')).maskPattern("99/99/9999");
Pickadate.js Date Range (for past records) - Script Codes
Pickadate.js Date Range (for past records) - Script Codes
Home Page Home
Developer Mike
Username mikestabile
Uploaded February 01, 2023
Rating 3
Size 2,682 Kb
Views 4,048
Do you need developer help for Pickadate.js Date Range (for past records)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mike (mikestabile) Script Codes
Name
Scroll to top design 1
Styled radio buttons
Bill Pay Banner Ad
Business Card Sample Using jQuery Flip
Scroll to top design 2
JQuery Smooth Scroll
Materialize Card
A Pen by Mike
Bootstrap Tour Example
Hero with bottom banner
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!