Jquery date range search

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 825 Views - Last Post: 05 September 2016 - 11:15 AM

#1 testmetestyou  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 19-July 16

Jquery date range search

Posted 04 September 2016 - 06:06 AM

Hello

I Want add to my website date range search.
If I search like this:
18/02/16 - 30/05/16
I can find files which is between them.
My problem is that im searching it like filename because file date is in filename. (When file is created)
My directory tree:
Posted Image

HTML:
<div class="row">
	<div style="float:left; width:17%;">
		<input type="text" style="height:37px;" id="minDate" class="form-control" placeholder="DD/MM/YY">
	</div> 
	<div style="float:left; width:17%; margin:0 1%;">
		<div class="input-group">
		<input type="text" style="width:97.71px; id="maxDate" height:37px;" class="form-control" placeholder="DD/MM/YY" />
		<span class="input-group-btn">
			<button style="padding: 7.5px 12px; left:-1px;" class="btn btn-default" id="DateSearch" type="button"><i class="fa fa-search"></i></button>
		</span>
		</div>
	</div>
</div>



Jquery:
Didnt find any like filename date search..

Default file search HTML:
<div class="col-lg-5 right">
	<div class="input-group">
	<input type="text" class="form-control" id="text-search" placeholder="<?php echo keel::get("Otsi ja filtreeri")?>" />
		<span class="input-group-btn">
			<button style="padding: 7.5px 12px;" class="btn btn-default" id="otsing" type="button"><i class="fa fa-search"></i></button>
		</span>
	</div>
</div>


But my Default file search JQUERY:
$('#otsing').click(function(){
        
        var searchTerm = $('#text-search').val().replace("/", "_").replace(" ", "_");

        var backup =  $('#dir-links-backup').html();
        $('#dir-links').html(backup);

        if (searchTerm) {

            var match = $("#dir-links li:Contains('"+searchTerm+"')");

            $(match).each(function(){
                $(this).find("li:not(:Contains('"+searchTerm+"'))").remove();
            });

            match = $(match).first();
            
            if ($(match).length == 0){
                $('#dir-links').html('<p><?php echo keel::get("Vastet ei leitud...")?></p>');
                return;
            }

            var html = $('<div>').append($(match).clone()).remove().html();
            $('#dir-links').html(html);
        }
        
        bindTreeLinks(post_action);
    
    
    });
    $('#text-search').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('#otsing').click();//Trigger search button click event
        }
    });


I found only date picker plugins or date range plugins or DataTable plugins but These are not that what I need.
I need to search like file but by Date..
Maybe some smarter can help me out.

Best wishes

Is This A Good Question/Topic? 0
  • +

Replies To: Jquery date range search

#2 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2387
  • View blog
  • Posts: 9,603
  • Joined: 03-December 12

Re: Jquery date range search

Posted 04 September 2016 - 08:53 AM

Seems to me like the database query would need to be changed, not the jquery.
Was This Post Helpful? 0
  • +
  • -

#3 testmetestyou  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 19-July 16

Re: Jquery date range search

Posted 04 September 2016 - 09:49 AM

Getting file names from path not database.
Was This Post Helpful? 0
  • +
  • -

#4 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2387
  • View blog
  • Posts: 9,603
  • Joined: 03-December 12

Re: Jquery date range search

Posted 04 September 2016 - 09:51 AM

Even still, Javascript doesn't have access to the server, so modifying it won't help.

You need to be looking at the server scripts that are acting in the background, not the client side that can't see what is in the background.
Was This Post Helpful? 0
  • +
  • -

#5 testmetestyou  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 19-July 16

Re: Jquery date range search

Posted 04 September 2016 - 10:28 AM

But is it possible like my default search which working correctly, use same method because date is on filename...
So I need to know how to search between 2 dates.. to get these files.

With this Im getting all files to directory tree:
$.get('<?php echo klooke::get('base_url')?>'+ajaxcall, function(data) {
            $('#dir-links').html(data);
            $('#dir-links-backup').html(data);
            bindTreeLinks(post_action);
    });

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6495
  • View blog
  • Posts: 26,279
  • Joined: 12-December 12

Re: Jquery date range search

Posted 04 September 2016 - 11:04 AM

If you are doing this with Javascript then you need to extract the date text from the filename and convert it to a Date instance. Do the same with the start and end date values (wherever you are reading them from). Then check if the file date is between the start and end dates. Searching "javascript between two dates" gives lots of useful results.
Was This Post Helpful? 0
  • +
  • -

#7 testmetestyou  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 19-July 16

Re: Jquery date range search

Posted 04 September 2016 - 01:46 PM

I've tryed this but doesn't work.
output += '<p id="dir-links" class="lead"><?php echo lang::get("Please wait...")?></p>';
    output += '<p id="dir-links-backup" style="display:none"></p>';

    output += '<hr /><div class="col-lg-5 right"><div class="input-group"><input type="text" class="form-control" id="text-search" placeholder="<?php echo lang::get("Search")?>" />';
        output += '<span class="input-group-btn"><button style="padding: 7.5px 12px;" class="btn btn-default" id="otsing" type="button"><i class="fa fa-search"></i></button></span></div></div>';
    output += '<div class="row"><div style="float:left; width:17%;"><input type="text" style="height:37px;" class="form-control" id="startDate" placeholder="DD/MM/YY"></div> <div style="float:left; width:17%; margin:0 1%;"><div class="input-group"><input type="text" style="width:97.71px; height:37px;" class="form-control" id="endDate" placeholder="DD/MM/YY" /><span class="input-group-btn"><button style="padding: 7.5px 12px; left:-1px;" class="btn btn-default" id="dateOtsing" type="button"><i class="fa fa-search"></i></button></span></div></div></div>';

    output += '<a class="close-reveal-modal"></a>';
    
    $('#big_modal-2').append(output);
    $('#big_modal-2').reveal();

    $.get('<?php echo index::get('baseurl')?>'+ajaxcall, function(data) {
            $('#dir-links').html(data);
            $('#dir-links-backup').html(data);
            bindTreeLinks(post_action);
    });

    jQuery.expr[':'].Contains = jQuery.expr.createPseudo(function(arg) {
      return function( elem ) {
        return ( elem.textContent || elem.innerText || getText( elem ) ).toUpperCase().indexOf(arg.toUpperCase()) >= 0;
          };
    });
    $('#dateOtsing').click(function(){
  var from = new Date('#startDate').getTime();
  var to = new Date('#endDate').getTime();

  	$("#dir-links").each(function(index, value) {
    var dates = $(this).text();

    if (from <= new Date(dates).getTime() && to >= new Date(dates).getTime()) {

      $('<div>').append($(dates).clone()).remove().html();
            $('#dir-links').html(html);

    }

  });

    
    
    });
    $('#otsing').click(function(){
        
        var searchTerm = $('#text-search').val().replace("/", "_").replace(" ", "_");

        var backup =  $('#dir-links-backup').html();
        $('#dir-links').html(backup);

        if (searchTerm) {

            var match = $("#dir-links li:Contains('"+searchTerm+"')");

            $(match).each(function(){
                $(this).find("li:not(:Contains('"+searchTerm+"'))").remove();
            });

            match = $(match).first();
            
            if ($(match).length == 0){
                $('#dir-links').html('<p><?php echo lang::get("Nothing found...")?></p>');
                return;
            }

            var html = $('<div>').append($(match).clone()).remove().html();
            $('#dir-links').html(html);
        }
        
        bindTreeLinks(post_action);
    
    
    });
    $('#text-search').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('#otsing').click();//Trigger search button click event
        }
    });
  
}


Maybe you know what I'm doing wrong there?
Default search working very well.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6495
  • View blog
  • Posts: 26,279
  • Joined: 12-December 12

Re: Jquery date range search

Posted 04 September 2016 - 11:07 PM

Doesn't work in what way? What happens or doesn't happen? Where?
Are there errors in your browser's console?

I suspect there will be errors because these won't work:
  var from = new Date('#startDate').getTime();
  var to = new Date('#endDate').getTime();

The text "#startDate" isn't a valid date representation. Presumably you wan't to refer to the element with that id and get its value.
Was This Post Helpful? 0
  • +
  • -

#9 testmetestyou  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 19-July 16

Re: Jquery date range search

Posted 05 September 2016 - 01:33 AM

No console errors and function doesn't work.
But #startDate and #endDate im writing there valid date numbers?
Was This Post Helpful? 0
  • +
  • -

#10 testmetestyou  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 19-July 16

Re: Jquery date range search

Posted 05 September 2016 - 07:06 AM

$('#dateOtsing').click(function(){
  		var startDate = $('#startDate')
  		var endDate = $('#endDate')
        var backup =  $('#dir-links-backup').html();
        $('#dir-links').html(backup);
    	if (from <= startDate && to >= endDate) {
            var match = $("#dir-links li:Contains('"+startDate+"', '"+endDate+"')");
            $(match).each(function(){
                $(this).find("li:not(:Contains('"+startDate+"', '"+endDate+"'))").remove();
            });
            match = $(match).first();
            if ($(match).length == 0){
                $('#dir-links').html('<p><?php echo lang::get("Nothing found...")?></p>');
                return;
            }
            var html = $('<div>').append($(match).clone()).remove().html();
            $('#dir-links').html(html);
        }
        bindTreeLinks(post_action);
  	});



Edited but not really doing no errors or something. Function doesnt work.
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6495
  • View blog
  • Posts: 26,279
  • Joined: 12-December 12

Re: Jquery date range search

Posted 05 September 2016 - 07:30 AM

This
var startDate = $('#startDate')

returns a jQuery object, not a date or date value. (You should also terminate statements with a semi-colon.)

If #startDate is an input element then you can use val() to get its content. If this content is a date string then you need to convert it to a date instance before you can correctly compare it to another date instance. (You had some of this code earlier.)



Rather than just saying "Function doesn't work" you need to take steps to find out why, and where it starts to go wrong. You need to debug the code. Make good use of console.log() to display a variety of values, at different stages, to confirm that they are what you expect them to be.
Was This Post Helpful? 0
  • +
  • -

#12 testmetestyou  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 19-July 16

Re: Jquery date range search

Posted 05 September 2016 - 09:32 AM

I have like date numbers in filename.
So i think it search in filename a value like 2011-02-18 and 2016-02-18, then it finding between them so I think I dont need date for searching.


So I add
var startDate = $('#startDate').val(); var endDate = $('#endDate').val();
and Its possible search like this?
No need to convert it to date or split it to date..
Was This Post Helpful? 0
  • +
  • -

#13 testmetestyou  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 19-July 16

Re: Jquery date range search

Posted 05 September 2016 - 09:37 AM

Both seems same but Date search does not work..

$('#dateOtsing').click(function(){
  		var startDate = $('#startDate').val();
  		var endDate = $('#endDate').val();
        var backup =  $('#dir-links-backup').html();
        $('#dir-links').html(backup);
    	if (from <= startDate && to >= endDate) {
            var match = $("#dir-links li:Contains('"+startDate+"', '"+endDate+"')");
            $(match).each(function(){
                $(this).find("li:not(:Contains('"+startDate+"', '"+endDate+"'))").remove();
            });
            match = $(match).first();
            if ($(match).length == 0){
                $('#dir-links').html('<p><?php echo keel::get("Vastet ei leitud...")?></p>');
                return;
            }
            var html = $('<div>').append($(match).clone()).remove().html();
            $('#dir-links').html(html);
        }
        bindTreeLinks(post_action);
  	});

    $('#otsing').click(function(){
        
        var searchTerm = $('#text-search').val().replace("/", "_").replace(" ", "_");

        var backup =  $('#dir-links-backup').html();
        $('#dir-links').html(backup);

        if (searchTerm) {

            var match = $("#dir-links li:Contains('"+searchTerm+"')");

            $(match).each(function(){
                $(this).find("li:not(:Contains('"+searchTerm+"'))").remove();
            });

            match = $(match).first();
            
            if ($(match).length == 0){
                $('#dir-links').html('<p><?php echo keel::get("Vastet ei leitud...")?></p>');
                return;
            }

            var html = $('<div>').append($(match).clone()).remove().html();
            $('#dir-links').html(html);
        }
        
        bindTreeLinks(post_action);
    
    
    });

Was This Post Helpful? 0
  • +
  • -

#14 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6495
  • View blog
  • Posts: 26,279
  • Joined: 12-December 12

Re: Jquery date range search

Posted 05 September 2016 - 09:58 AM

Again, just stating "Date search does not work" isn't helping, or encouraging, anyone to help you.

Do some debugging. Print out some values. Describe what's happening and, importantly, where in your code. Use console.log() for printing and look in your browser's console to see what it prints.
Was This Post Helpful? 0
  • +
  • -

#15 astonecipher  Icon User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2387
  • View blog
  • Posts: 9,603
  • Joined: 03-December 12

Re: Jquery date range search

Posted 05 September 2016 - 10:06 AM

Are you actually searching for the files, or just hiding ones that don't match a pattern?
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2