从 Datepicker 获取数据并将其发送到 URL

Question

我的网站上有两个日期选择器，我想知道如何在用户单击“提交”后获取所选日期，并将用户发送到其中包含日期选择器数据的页面，如下所示：

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

所以简而言之，我需要获取数据并将其放在url中的“=”之后，然后自动将用户发送到这个url。

请问我该怎么做？

Answer 1

我创建了一个名为handleFilterEvent 的方法，每次您更改日期时，它都会使用开始日期和结束日期参数访问该方法。然后它会创建一个包含开始日期和结束日期的 URL，最后它会重定向到新的 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

您可以使用 datepicker onSelect 事件 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

所以这是我尝试过的，但点击似乎并没有启动警报：

 $(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>

还有什么是“altfield : #thealtdate”？

Answer 4

你可以这样使用

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>