Get data from Datepicker and send it to URL

Question

I have two date pickers on my website and I'd like to know how to get the chosen date once the user clicks on "submit", and send the user to a page with the datepicker's data in it like this:

www.url.com/start=2017-01-28&end=2017-01-29

So in short, I need to get the data and put it after "=" in the url, then automatically send the user to this url.

How can I do this please ?

Answer 1

I have created one method called handleFilterEvent each time you change the date it will hit the method with start date & end date params. Then it will create a URL with start date & end date and finally it will redirect to the new URL.

             $(document).ready(function(){
                $('.daterange-btn').daterangepicker(
                    {
                        ranges   : {
                            'Today'       : [moment(), moment()],
                            'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month'  : [moment().startOf('month'), moment().endOf('month')],
                            'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                        },
                        startDate: moment().subtract(29, 'days'),
                        endDate  : moment(),
                    },
                    function (start, end) {
                        $('.daterange-btn').find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
                        handleFilterEvent(start,end);
                    }
                )
                function handleFilterEvent(startDate = null,endDate = null){
                    var url = "https://www.google.com"+'?';
                    var startDate = startDate ? startDate.format('YYYY-MM-DD') : '';
                    var endDate = endDate ? endDate.format('YYYY-MM-DD') : '';
                    var params = {};
                    if(startDate && endDate){
                        params.start_date =  startDate;
                        params.end_date =  endDate;
                    }
                    url+= jQuery.param( params );
                    location.href = url;
                }
            });

Answer 2

You can try this code using datepicker onSelect event jsfiddle.net/bharatsing/Lhpnctgv/2/

<label>Start</label>
<input type="text" id="btnStart" class="jsDate" />
<br/>
<label>End</label>
<input type="text" id="btnEnd" class="jsDate" />


$(".jsDate").datepicker({
    onSelect: function(dateText, inst) {    
        var date = $(this).val();

        if($("#btnStart").val()!="" && $("#btnEnd").val()!=""){
            var url='www.url.com/start='+$("#btnStart").val()+'&end='+$("#btnEnd").val();
            alert(url);
        }
    }
});

Answer 3

You can use like this

https://jsfiddle.net/shantaram/qhob15fw/

$(function(){
    
    $('.thedate').datepicker({
        dateFormat: 'yy-dd-mm',//2017-01-29
    });
    
});
$('#id-submit').click( function(e){
    e.preventDefault();
    var url = "www.url.com/?";//start=2017-01-28&end=2017-01-29
    url += "start="+ $("#id-start").val() + "&end=" + $("#id-end").val();
    alert(url);
})

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


First Date :
<input id="id-start" class="thedate" type="text" />
<br />Last Date :
<input id="id-end" class="thedate" type="text" />
<br />
<form>
  <input id="id-submit" type="button" value="Submit" />
</form>

Answer 4

So here is what I tried but clicking doesn't seem to start the alert :

 $(function(){

 $('.jsdate').datepicker({
    dateFormat: 'yy-dd-mm',//2017-01-29
    altField: '#thealtdate',

});

});
$('.button1').click( function(e){
e.preventDefault();
var url = 
"https://www.url.com/etc.";
url += "&startdate="+ $("#id-start").val() + 
"&enddate=" + $("#id- end").val();
alert(url);
})</script>
<div class="date">
<p>Arrivée:<a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>   
<input type="text" id="id-start" class="jsdate"></p>
<p></p>
<p>Départ:&nbsp;&nbsp; <input type="text" id="id-End" class="jsdate"></p>
<p>
<input class="button1" type="button" value="Submit" /></p>

Also what is "altfield : #thealtdate" ?