Hello friends, in this video tutorial, we will learn, How to make an adavance, PHP Ajax date range filter application, By using Date range picker plugin, with Data table and chart.js library, In previous tutorial, we have already learn, how to integrate chart.js library, Into jQuery data table plugin, and make dynamic bar chart, by using data table data, With Server side processing of data, using PHP with Ajax, now in this part, we will integrate date range picker plugin, into this data table and chart.js application, And make advance date range filter application, so when we have filter data using PHP with ajax, then at that time, data table and chart.js library, data must be change in real time, In this tutorial, first we will create one textbox, for date range picker plugin, After this, we will write jquery code, for initialize date range picker plugin, Next we will integrate date range picker plugin, with jquery data table library, After this, we will write php script, for date range filter, And lastly, we will check, adance date range filter, using date range picker, output in the browser, And one more things, we have put source code download link, under this video description, so check it, Now lets start discussing this topic, So first, we have to open index.php file, And here we can see that, we have already included date range picker library file, At the header of this file, now first we have move to HTML code part, And here, we have to create one textbox, for pop up date range picker plugin, So for create textbox, here we have to write, input type is equal to text, And after this, We have to write, id attribute is equal to date range textbox, and class is equal to form control, Now we want to make readonly textbox, so for this, here we have to write readonly attribute, So here our textbox is ready, now we have move to write jquery code, for initialize date range picker plugin, So here in jquery code part, we have to write, dollar with textbox id, date range textbox, And then after, we have to write, date range picker, so this method will initialize, date range picker plugin, Under this method, we can write, different option of this method, So hre first we have to write, ranges option, under this option, we can define different date ranges, Now under this option, we have get today date range, so here we have to write today, And for get today date range, here we have to write array, So in array first index, we want to define start date, So for get today date, as start date, here we have to write moment function, and in second index, We have to define end date, which is also a today date, so for this also, we have to write moment function, So this code will make, today date range, Next we want to make yester day date range, So for this, here we have to write, yester day, with double dot array, and in array, First index, we have to defin start date, which is yestereday date, so for this, here we have to write, moment function, dot subtract method, with two argument, in first argument, we have to write one, And in second arguement, we have to write days, so this method, will minus one day from today date, And return yester day date, Now in end date option also, we have to get yester day date also, So for this, here we have to write, moment function dot subtract method, with two argument like, One, and days, so it will return yester day date, so in this option it will display, Yester day date, in start date and in end date, Now in third option, we want to display last seven day date range, So for this, here we have to writ, last sevent days, and array starte date, we want to display seven days before date, So for this, here we have to write, moment function dot substract method, with two argument, In first argument, we have to write six, and in second arugment, we have to write days, so it will minus six days from today date, And return date before seven days, now in end days, we want to display today date, So for this, here we have to write, moment function, which will return today date, Now here in browser, first we have to refresh web page, and after refresh of web page, Here we can see that, one readonly text box has been appear above the chart, and under that it has display today date, Now we have to click on the textbox, and after click on the textbox, here we can see that, Date range picker has been pop up on the web page, with option like today date, yester date, and last seven days filter, Now we have to click on the yester day filter, so after click on the yester day filter, Here in textbox, we can see that, yester day date has been display under the textbox, Now we have go to index.php file, and here we want to add last thirty days filter, So here, we have to write, last thirty days textbox, in start date option, we want to display date before twenty nine days, So for this, here we have to write, moment function, dot subtract method, with two argument, And in first argument, we have to write, twenty nine days, and in second argument, we have to write days, So it will minus twnety nine days, from the today days, now on second option, we wan to display today date, So for this, here we have to write, moment function, which will return today date, so here, last thirty day date range is set, Now here, we have to refresh web page, and after refresh of web page, here we have to click on the textbox, So here, date range picker has been pop up on the web page, and here we can see that, last thirty days date range has been added, Now we have to click on the last thirty day range, so it has display date before twenty nine days, in start date, And it has display today date, in the end date, now we want to add this month date range, so for this, We have go to index.php file, and here we have to write, this month textbox, and in start date, we want to display current month first date, so for this, here we have to write, moment function, Dot start of function, with month as arugment, so it will return current month first date, same way in the end date option, We want to display end date of the current month, so for this, here we have to write, moment function, Dot end of method, and under this, we have to write month, so it will return current month end date, Now here, we have to refresh web page, and after refresh of web page, here we have to click on the textbox, So here, we can see that, date range picker has been pop up on the web page, and here we can see that, This month option, has been added, and now, we have to click on the this month option, So after click on the option, Here, we can see that, current month, start date, and end date has been display in the textbox, Now in this date range, We want to end last month date range, so for this, we have go to index.php file, and here, We have to write, last month option, and in the start date option, we want to display, last month first date, So for this, here we have to write, moment function, dot subtract method, with two argument, In the first argument, we have to write one, and in the second arugment, we have to write month, so it will minus one month, From the current month, after this, we want to get that month first date, so here we have to write, start of function, with month as arugment, so it will return last month first date, And in the end date option, we want to display last month last date, so here we have to write, moment function, dot substract method, with two argument, and in the first argument, we have to write one, And in second argument, we have to write month, so it will return last month, now for get last month last date, Here we have to write, end of method, and under this, we have to write month, so it will return last month last date, Now here we have to refresh web page, and after refresh of web page, here we have to click on the textbox, So here we can see that, date range picker has been pop up, on the web page, and here we can see that, Last month date range has been added, now we have to click on the last month date range, So after click on the last month date range, Here in textbox, we can see that, last month first date, and last date has been display in the textbox, Suppose, we want to filter date, between curstom date range, so by click on this custom date option, We can filter data, with custom date range filter also, now here date must be change, when we have click on the any date range, So for this, we have go to index.php file, and here we have to write, formate option, By using this option, we can see the date format, so here we have to define date format, After this, we have to write, call back function, with start and end argument, So this function will be called, on every date range filter, and it will receive start date, and end date as arugment, Under this function, we want to called fetch data function, which will reload jquery data table data, But before reload data table data, first we want to destroy data table, so for this, here we have to write, Dollar with table id order table, with date table method dot destroy method, So this code will destroy date table instance, Now for reload data table data, here we have to called fetch data function, So this function will reload data table data, But now we want to fetch data, with date range filter, so for this, we have to write, date range filter under this function, So here we have to write, start date and end date arugment, now we want to pass, this variable value, with ajax request, So in data option, we have to write, start date, and end date variable, so with ajax request, this variable value, will be send, Now here also, we have to pass, this date start and end date variable, So for pass, start date, here we have to write, start dot format function, with date format, And same way for pass end date, here we have to write, end dot format function, with date format, So this way, date range picker start date, and end date data has been pass, under this fetch data function, So here our jquery code is ready, for initialize date range picker plugin, And pass start date, and end date range value, with the data table ajax request, now we have go to action.php file, And here, we have already write, php script for fetch data from order table, Now we need add, php script for fetch, filter data according to particular date range, So for this, here we have to write, if statement, and under condition, we have to write, Is set function, and under this function, we have to write, dollar post start date variable, and dollar post end date variable, So this condition will check, if this both variable value is set, then it will execute if block of code, After this, here in condition, we have to write, and operator, with dollar post start date variable value, is not equal to blank, So this condition will check, if this variable has some value, After this, we have again write and operator, And write, dollar post end date variable value, is not equal to blank, so this complete if condition will check, If both variable value is set, and both variable has some value, if this condition true, then it will execute if block of code, And under this block, we have to write, dollar search query variable, and here we have to append query like, Order date table column value must be greater than, or equal to the value of dollar post start date variable value, And order date table column value, must be less than or equal to, the value of dollar post end date variable value And, So here, we have append date range filter query, under this dollar search query variable, search query, So other code is we have already write, so we do not need to write any code, so here our php code is ready, For date range filter mysql table data, using php script with ajax, so we have save this code, and check output in the browser, Freinds, here we have to refresh web page, and after refresh of web page, here we can see that, In date range filter date box, we can see that today start, and end date, and in j query data table, We can see current month, order data has been load in jquery data table, with server-side processing of data, And in bar chart also, last order data also, this is because, in bar chart, it has display jquery data table in bar chart, Now we have click on the textbox, then date range picker has been pop up on the web page, And from that we have select yester day option, So after selecting yester day option, Here we can see that, only one data has been display in jquery data table, now again we have click on the textbox, And again date range picker has been pop on the web page, and now we have select last seven day option, So after selecting last seven day option, here we can see that, last seven day data has been display in data table, And from data table data, here we can see that bar chart has been generated, now we want to get this month all data, So we have again click on the textbox, and from this date range filter option, we have to select this month, So after selecting this month option, here we can see that, this month order data, has been display, In the jQuery data table, and from that data table data, here we can see that, bar chart also created, for this current month order data, Now we want to get last two month data, so here we have click on the textbox, and date range picker, has been pop on thw web page, We can not see filter last two month date, but here we can see custom filter option, so we have select custom filter option, So here, we can see that two calander has been appearn, for select start date, and end date, So here we have select start date, and after this, we have select end date, and after this, We have to click on apply button, so after click on the apply button, here we can see that, Last two month order data has been load in the jquery data table, and in the chart also, We can see last two month data has been display, so this way we can integrate date range picker plugin, Into this, jquery data table and chart.js application, using ajax with php and mysql database, And make adance date range filter application, So in this part, we have learn, how to use date range picker, With PHP application, and how to integrate with data table and chart.js library, So if you have any query, or input regarding this tutorial, so you can comment your query, Into comment box, we will review your comment, and solve your query,