[testmetestyou]

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:


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

[astonecipher]

Seems to me like the database query would need to be changed, not the jquery.

[testmetestyou]

Getting file names from path not database.

[astonecipher]

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.

[testmetestyou]

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);
    });

[andrewsw]

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.

[testmetestyou]

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.

[andrewsw]

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.

[testmetestyou]

No console errors and function doesn't work.
But #startDate and #endDate im writing there valid date numbers?

[testmetestyou]

$('#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.

[andrewsw]

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.

[testmetestyou]

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..

[testmetestyou]

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);
    
    
    });

[andrewsw]

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.

[astonecipher]

Are you actually searching for the files, or just hiding ones that don't match a pattern?