Related
I would like to add a datepicker to filter data in a Datatable.
I saw many example where the datepicker is used with a range of dates, but I would like that the Datatable shows only the data which contain the date selected in the datepicker.
I've tried to do it here: https://jsfiddle.net/c9q5b0k3/3/
The javascript code I've wrote is:
$(document).ready(function() {
$('.datepicker').datepicker({
format: "yyyy/mm/dd"
});
});
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var dateSelected = $('#date').val();
var date = data[4];
if (dateSelected === "") {
return true;
}
if (date === dateSelected) {
return true;
}
return false;
}
);
$(document).ready(function() {
var table = $('#sspTable').DataTable({
responsive: true
});
$('#date').keyup(function() {
table.draw();
});
});
But the problem that it only works if I select a date in the datepicker and then I click the arrows in the Datatables(the ones that order the data) or if I press multiple times Enter.
What is the problem? Is it possible otherwise to add the datepicker to the search bar of the Datatable?
Thanks in advance!
You need to call table.draw() when a value is selected in the datepicker. To do that you can amend the existing keyup event handler you have to also include change, like this:
$('#date').on('keyup change', function() {
table.draw();
});
Updated fiddle
I need to be able to set a "date range" with FullCalendar, using the "List" view. By date range, I mean being able to enter using 2 text fields, 2 different dates, for example :
Text field 1 : 2018-05-05
to
Text field 2 : 2018-05-06
And to filter the content of the calendar, using the List view to display the result, and show events that matches that date range.
Here's my code for the FullCalendar part:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listMonth, month,agendaWeek,agendaDay'
},
defaultView: 'listMonth',
locale: 'fr',
contentHeight: 600,
navLinks: true, // can click day/week names to navigate views
selectable: false,
eventRender: function(event, element, view) {
element.find('.fc-widget-header').append("<div style='color:#fff'>Conférencier choisi</div>");
element.find('.fc-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>");
return ['all', event.status].indexOf($('#filter-status').val()) >= 0 &&
['all', event.client].indexOf($('#filter-contact').val()) >= 0 &&
['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
['', event.numero].indexOf($('#numero').val()) >= 0;
},
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Example',
start: '2018-05-05',
end: '2018-05-06',
color: '#ff0000',
lieu: 'Montreal',
numero: '300445',
conferencier: 'John Doe',
photoconferencier: 'http://www.example.com/img/profile.jpg',
lienconferencier: 'http://www.example.com/profile/link.html',
url: 'http://www.google.com'
},
{
title: 'Example2',
start: '2018-05-08',
end: '2018-05-010',
color: '#ff0000',
lieu: 'New York',
numero: '300446',
conferencier: 'Steve Jobs',
photoconferencier: 'http://www.example.com/img/profile2.jpg',
lienconferencier: 'http://www.example.com/profile/link2.html',
url: 'http://www.apple.com'
},
],
});
And here's my text fields code:
<input type="text" placeholder="Date : From" id="start_date">
<input type="text" placeholder="Date : To" id="end_date">
I think I would have to add something like this:
$('#start_date').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
$('#end_date').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
But I am not sure. Also, please keep in mind that there's other filters too. Hence the "eventRender" part in the code with a bunch of stuff. So I need to make sure that "dateRange" filter won't break the other filters.
I read about "visibleRange" on FullCalendar's website, but I do not understand how I can make it work based on what is entered in the 2 "date range" text fields. I think also disabling the other views that I have set (to show the result in the List view only), would be a good idea.
Any idea how I can make it work? I'm kind of lost here.
Thanks a lot
EDIT :
I have tried this code:
$('#start_date').on('change', function () {
$('#calendar').fullCalendar('changeView', 'list', {
start: 2018-05-10,
end: 2018-05-30
});
});
Which is working. Basically, what it does is that I enter a new date in a text field with the ID of "start_date" (which uses a datepicker script, to that's why I went with "on change"), it changes the view to the list view, which is great, and displays only the events between the date I have entered. So to make it dynamic, I did this :
$('#start_date').on('change', function () {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
$('#calendar').fullCalendar('changeView', 'list', {
start: start_date,
end: end_date
});
});
I have 2 fields, "start_date", and "end_date".
I thought that setting the "start" and "end" option in the changeView code for FullCalendar would update automatically everytime I select a new date, but it doesn't work. In fact, it works partially. If I enter the "end_date" first, then the "start_date", it will filter and work perfectly, showing the right date range. But after that, I cannot change it for another dateRange by changing the dates in the fields.
It acts like this probably because my function is "on change", based on the "#start_date" element. So I have to select the end_date first, to make sure it filters and change the view with something in the "end" option.
Any idea what I am doing wrong?
Thanks
EDIT 2 :
I tried changing the function from a "change" event to "click", and adding a "search" button. There's 2 issues here.
1 - It works only once. If I make a search, then change the date, and click again on the "#search-range" button, it won't do anything.
2 - When it works (first time after page load), if I select from May 1rst to May 5th for example, it will show the range from May 1rst to May 4th, for some reasons. Here's my code again :
$('#search-range').on('click', function () {
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
$('#calendar').fullCalendar('changeView', 'list', {
start: start_date,
end: end_date
});
});
Any ideas what's going on?
Thanks again
You're probably looking for the validRange option.
$('#start_date').on('change', function(){
$('#calendar').fullCalendar('option', 'validRange', {
// Don't worry if user didn't provide *any* inputs.
start: this.value,
end: $('#end_date').val()
});
});
$('#end_date').on('change', function(){
$('#calendar').fullCalendar('option', 'validRange', {
// Don't worry if user didn't provide *any* inputs.
start: $('#start_date').val(),
end: this.value
});
});
Demo: https://jsfiddle.net/8wd7sxyv/
UPDATE
The end date is now inclusive. So if end date is 2018-05-31, events on that day are included — the default behavior only includes up to 2018-05-30.
If the start and end dates are in same month, view is listMonth; otherwise, it is listYear.
function filterByDateRange(start_date, end_date, format) {
var s = $.fullCalendar.moment(start_date),
e = $.fullCalendar.moment(end_date),
v = $('#calendar').fullCalendar('getView'),
a, b;
// Start date is invalid; set it to the start of the month.
if (! s.isValid()) {
b = e.isValid();
s = b ? e.clone() : $.fullCalendar.moment();
s.date(1);
$('#start_date').val(s.format(format));
a = true;
}
// End date is invalid; set it to the end of the month.
if (! e.isValid()) {
b = s.isValid();
e = b ? s.clone() : $.fullCalendar.moment();
e.date(e.daysInMonth());
$('#end_date').val(e.format(format));
a = true;
}
// Start date is after end date; set it to a day before the end date.
if (s.isAfter(e)) {
s = e.clone().add('-1', 'day');
$('#start_date').val(s.format(format));
// End date is before start date; set it to a day after the start date.
} else if (e.isBefore(s)) {
e = s.clone().add('1', 'day');
$('#end_date').val(e.format(format));
}
// Add 1 day so that `end_date` is inclusive.
e = e.isValid() ? e.add('1', 'day') : e;
$('#calendar').fullCalendar('option', 'validRange', {
start: s.isValid() ? s : null,
end: e.isValid() ? e : null
});
a = a || s.isSame(e, 'month');
// If months are different, switch to the year list.
if ('listYear' !== v.name && ! a) {
$('#calendar').fullCalendar('changeView', 'listYear');
// Otherwise, switch back to month list, if needed.
} else if ('listMonth' !== v.name) {
$('#calendar').fullCalendar('changeView', 'listMonth');
}
}
$('#start_date').on('change', function(){
filterByDateRange(this.value, $('#end_date').val(), 'YYYY-MM-DD');
});
$('#end_date').on('change', function(){
filterByDateRange($('#start_date').val(), this.value, 'YYYY-MM-DD');
});
Demo: https://jsfiddle.net/8wd7sxyv/6/
This same question has been asked repeatedly, and the only time it has been answered is the one where the fellow was trying to initialise datepicker in the .onReady() function. I am not doing that. In fact, I am actually doing what that solution is doing; implementing datepicker immediately after creating the element.
Here is my template code:
<input type=text name="txt_you_History_From_Date_XXX" id="txt_you_History_From_Date_XXX" class="month-picker inputField" size=16 maxlength=16>
You will notice the month-picker class. Also, you will notice the "XXX" placeholders.
Here is the code that inserts that template code:
//
// find the next available id
//
for (var i = 0; ; i++) {
if (!$("#divEmployer_" + i.toString()).length) {
break;
}
}
//
// get html, and replace the placeholders with id, then append.
//
$.get("content/contentHistoryEmployerTemplate.html", function (data) {
while (data.indexOf("XXX") >= 0) {
data = data.replace("XXX", i.toString());
}
$("#employerDIV").append(data);
});
//
// activate datepicker on all month-picker class elements
//
$('.month-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
//alert("here");
I do see the "here" alert if I uncomment it, so I know the code is being run.
The datepicker() throws no error.
I know the function is available because if I comment out my jquery-ui-min.js in my <HEAD>, a reference to datepicker() does then throw an error.
But the field does not respond when it receives focus. The datepicker does not appear.
Can anyone tell me what's wrong? Thanks!
You are trying to instantiate the datepicker before the element exists. Put that code inside the async callback.
$.get("content/contentHistoryEmployerTemplate.html", function (data) {
while (data.indexOf("XXX") >= 0) {
data = data.replace("XXX", i.toString());
}
$("#employerDIV").append(data);
// PUT DATEPICKER HERE
});
Hi I have been trying to just get the date of a bootstrap date picker and have been able to but it seems to fires 3 times. NOTE: This is not jquery date picker but bootstrap date picker.
Using this date picker: https://github.com/eternicode/bootstrap-datepicker, not older eyecon.ro one.
$(".date-picker").on("change", function(e) {
contents = $(this).val();
id = $(this).attr('id');
console.log("onchange contents: " + contents);
console.log("onchange id: " + id);
});
HTML:
<input id="start_date" type="text" data-date-format="yyyy-mm-dd" class="date-picker form-control" />
I have used a few other options other than change, like
$('.date-picker').datepicker().change(function(){};
But this does not close date picker, hoping there is an easy solution to this. thx
You should be using the "changeDate" event. For example:
var datePicker = $('.date-picker').datePicker().on('changeDate', function(ev) {
//Functionality to be called whenever the date is changed
});
Please view the documentation here for more info on this event.
it does not fix the problem, but i was using the datepicker to send through an ajax post, so the 3 change events was causing me problems - the 3rd event always failed. even if the documentation says to use a changeDate event, it doesn't seem right to me to fire the input tag's change event 3 times. the value isn't changing 3 times!
I wrote a simple 'debounce' function to get around the problem. doesn't fix the issue - which is due to multiple change events being fired from the methods: setValue (line 508) _setDate:(line 1048) and setValue (line 508) (version 1.3.0) of the widget.
var lastJQueryTS = 0 ;// this is a global variable.
....
// in the change event handler...
var send = true;
if (typeof(event) == 'object'){
if (event.timeStamp - lastJQueryTS < 300){
send = false;
}
lastJQueryTS = event.timeStamp;
}
if (send){
post_values(this);
}
it is pretty simple, just finds the jquery 'event', and makes sure that values in a window of 300ms are ignored. in my testing this all happened in 30 msec or so.
As some has mentioned already, use this:
$('#calendar').on("changeDate", function() {
});
The trick is to use changeDate instead of change.
It seems as if when checking the change event, if the change was from actual user interaction, the change event contains a value for originalEvent.
The event does NOT contain this value if the input was changed via JS:
$obj.val('1990-03-07').change() and the same with bootstrap-datepicker
Here's how I set it up:
Generic initial setup
// General selector for date inputs
var $obj = $('input[type="date"]');
$obj.datepicker({
// options here, not important for this example
});
Handle bootstrap-datepicker specific changes
$obj.datepicker().on('changeDate', function (event) {
handleInputDateAndTimeChange(event);
});
Now, deal with user interaction changes
$('input[type="date"], input[type="time"]').change(function (event) {
// This checks if change was initiated by user input and NOT JS
if(event.originalEvent !== undefined) {
handleInputDateAndTimeChange(event);
}
});
And finally, here's the handleInputDateAndTimeChange function
function handleInputDateAndTimeChange(event) {
var $input = $(event.target);
// Do what you want with $input object here...
}
I tried the answer from #pgee70 and it doesn't work for me. So this is my solution, hope its help
var send=true;
$('.input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
language: 'es-ES',
weekStart: 1,
format: 'dd/mm/yyyy',
enableOnReadonly:false,
calendarWeeks: true,
autoclose: true,
todayHighlight:true
}).on("changeDate", function(e) {
if(send){
modificarFechaAplicacionCliente($("#input_filtro_fecha_cliente").val());
send=false;
}
setTimeout(function(){send=true;},200);
});
It´s not a beaty solution, but it´s work.
Similar to the above answer, but you should use datepicker unless you've renamed the function:
var datePicker = $('.date-picker').datepicker().on('changeDate', function(ev) {
//Functionality to be called whenever the date is changed
});
This works for me, except in my case, I renamed the function to datepickerBootstrap to avoid the clash with JQuery's. So then it would become:
var datePicker = $('.date-picker').datepickerBootstrap().on('changeDate', function(ev) {
// On change functionality
});
It is fixed find your fixed js datepicker file HERE
Read fixing description HERE
I have faced the same problem with bootstrap-datepicker when it used with the jQuery OnChange event they call function 3 times. Here is my code
#Html.TextBoxFor(x => x.CmpStartDate, "{0:dd-MMM-yyyy}", new { #size = "30", #class = "form-control search-date", #placeholder = "Start date" })
#Html.TextBoxFor(x => x.CmpEndDate, "{0:dd-MMM-yyyy}", new { #size = "30", #class = "form-control search-date", #placeholder = "End date" })
<script>
$('#CmpStartDate,#CmpEndDate').datepicker({
autoclose: true,
todayHighlight: true,
minViewMode: 3,
format: "dd-M-yyyy"
});
$(".search-date").on("change", function () {
cmpStartDate = $("#CmpStartDate").val();
cmpEndDate = $("#CmpEndDate").val();
SearchThisDateRecords(cmpStartDate,cmpEndDate);
});
function SearchThisDateRecords(cmpStartDate,cmpEndDate) {
console.log("Call search method");
}
</script>
We need to call this function only one time, Not multiple time so you can use the below logic to fix this problem
<script>
$('#CmpStartDate,#CmpEndDate').datepicker({
autoclose: true,
todayHighlight: true,
minViewMode: 3,
format: "dd-M-yyyy"
});
var i = 0;
$(".search-date").on("change", function () {
cmpStartDate = $("#CmpStartDate").val();
cmpEndDate = $("#CmpEndDate").val();
SearchThisDateRecords(cmpStartDate,cmpEndDate);
i++;
console.log(i);
if (i == 3) {
SearchThisDateRecords(cmpStartDate,cmpEndDate);
}
});
function SearchThisDateRecords(cmpStartDate,cmpEndDate) {
i =0; //Reset i value
console.log("Call search method");
}
</script>
Get global variable count and check if equal to 0 then execute Your function.
var count=0;
$( "#Id" ).datepicker({ minDate: 0}).on('change',function (){
if(count==0)
validity();//any function
count=1;
});
validity(){ count=0;}
bit annoying..
my code was:
var c=0;var send=false;
$(document).ready(function() {
jQuery( ".ed" ).datepicker({
format: "yyyy-mm-dd",
autoclose:!0
}).on('change',function() {
if(c==2){
c=0;
send=true;
}else{
c++;
send=false;
}
});
});
Please use changeDate function in place of change .
var LastController =['id','value']; //global variable...
function datepeakerchange(e){
if ((LastController[0] != e.target.id && LastController[1] != e.target.value) || (LastController[0] == e.target.id && LastController[1] != e.target.value)) {
LastController[0] = e.target.id;
LastController[1] = e.target.value;
write your code....
}
}
var pickerFireCount = 0;
function checkSelectedDateIsHollyday(rId) {
pickerFireCount++;
if (pickerFireCount == 3) {
if (!selectedDateIsHolyday(rId)) {
showInfoMessage('The date you selected is a holiday.');
pickerFireCount = 0;
}
}
}
Im using Pikaday as a datepicker because JQuery Datepicker is having conflict with Prototype Library.
A few issues here.
How do i use pikaday datepicker in multiple text box
How to format the date. Previously by using JQuery Datepicker, to change the format I only need to
add dateFormat:"dd M yy",
Here is the sample code
<input type="text" id="datepicker">
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday(
{
changeMonth: true,
changeYear: true,
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date('2020-12-31'),
yearRange: [2000,2020]
});
</script>
I guess you're looking for a way to have pikaday work together for a date range type of thing and then manipulate the last one according to the date you selected in the first on?
...
I realize this is a bit late but perhaps someone else is interested in an answer:
Pikaday does not offer anything inhouse here but I was able to work around this by destroying the instance and creating it again when a day has been picked in the "from" picker.
HTML:
From: <input type="text" name="from" id="from">
To: <span id="toField"><input type="text" name="to" id="to"></span>
Javascript:
function dateRange() { //destroy to field and init with new param
var picker = new Pikaday({ field: document.getElementById("from") });
if(picker.toString()) {
$("#to").pikaday('destroy');
$("#to").remove();
$("#toField").html('<input type="text" name="to" id="to">');
$("#to").pikaday({ //should have the same param as the original init
format: "YYYY-M-DD",
minDate: moment(picker.toString(), "YYYY-MM-DD").toDate()
});
}
}
$(function() { //pikaday init
$("#from").pikaday({
format: "YYYY-MM-DD", //adjust to your liking
minDate: moment().subtract({days: 1}).toDate()
});
$("#to").pikaday({
format: "YYYY-MM-DD",
minDate: moment().subtract({days: 1}).toDate()
});
});
PS: don't forget to include your jquery, pickaday and moment js files...
Hope it helps
In case this stumps anyone else - you need to actually trigger the code in #Dominik's answer once a date has been selected, using the "onSelect" trigger. My code has ended up like this (because I'm using the jquery plugin version throughout in a UK format):
var dateFormat = "DD/MM/YYYY";
function dateRange() { //destroy to field and init with new param
var $from = $("#from").pikaday({
format: dateFormat,
});
if($from.val()) {
$("#to").pikaday('destroy');
$("#to").remove();
$("#toField").html('<input type="text" name="to" id="to">');
$("#to").pikaday({
format: dateFormat,
minDate: moment($from.val(), dateFormat).toDate()
});
}
}
$("#from").pikaday({
format: dateFormat,
minDate: moment().subtract({days: 1}).toDate(),
onSelect: dateRange
});
$("#to").pikaday({
format: dateFormat,
minDate: moment().subtract({days: 1}).toDate()
});
I realize this is not quite an answer to the op question, but if it's preferable to select a date range using one control, this is the method I'm using:
var cal = document.getElementById('datepicker');
var picker = new Pikaday({
onSelect: (function() {
var init = true,
start,
end;
return function(date) {
if (init) {
start = date;
picker.setStartRange(date);
picker.setEndRange(null);
rangeClear();
} else {
end = date;
picker.setEndRange(date);
rangeSet(start, end);
}
picker.draw();
init = !init;
}
}())
});
cal.appendChild(picker.el);
Where the rangeSet and rangeClear functions would exist elsewhere with the following signatures:
function rangeSet(start, end) {
//do something with the start and end dates
}
function rangeClear() {
//clear the start and end dates
}
You can see this working here: http://codepen.io/cshanejennings/pen/OMWLLg
The following is my Javascript (without jQuery) solution for From and To datepickers using Pikaday. It's working in Chrome and Firefox, but it does not work in Chrome-Android.
var nowDT = new Date();
var nowDTStr = nowDT.toShortDate();
var sin = document.createElement('input');
sin.setAttribute('type', 'text');
sin.setAttribute('id', this.id + "_cp_sin");
sin.style.width = '20%';
sin.style.cssFloat = 'left';
this.controlPanel.appendChild(sin);
this.sinPika = new Pikaday({
field: sin,
firstDay: 1,
minDate: new Date('2001-01-01'),
maxDate: new Date(nowDTStr),
yearRange: [2001, nowDT.getFullYear()]
});
this.sinPika.setDate(nowDTStr);
var ein = document.createElement('input');
ein.setAttribute('type', 'text');
ein.setAttribute('id', this.id + "_cp_ein");
ein.style.width = '20%';
ein.style.cssFloat = 'right';
this.controlPanel.appendChild(ein);
this.einPika = new Pikaday({
field: ein,
firstDay: 1,
minDate: new Date('2001-01-01'),
maxDate: new Date(nowDTStr),
yearRange: [2001, nowDT.getFullYear()]
});
this.einPika.setDate(nowDTStr);
Since I have sinPika and einPika objects added as members to my class, they're accessible elsewhere in my class in other methods, where Pika objects are used to fetch the dates set by users. Only thing is that this solution is not working in Chrome-Android for me. Could anyone try and let me know what you find?
Thanks!
Edit
I found the problem why Pikaday wasn't working on chrome-android for me. The reason is that the pikaday.js (https://github.com/dbushell/Pikaday/blob/master/pikaday.js) is different from the one here http://dbushell.github.io/Pikaday/, in that the difference lies in attaching the mousedown, touchend events. Pikaday.js on github attaches like this:
addEvent(self.el, 'ontouchend' in document ? 'ontouchend' : 'mousedown', self._onMouseDown, true);
(I think, Javascript defines touchend not ontouchend, may be, this is the reason why Pikaday.js from github repo does not work.)
And the one on dbushell.github.io/Pikaday attaches like this:
addEvent(self.el, 'mousedown', self._onMouseDown, true);
Using the script from http://dbushell.github.io/Pikaday/ works on chrome-android, the one on git repo does not.