2017-01-20 3 views
2

У меня есть два выбора даты на моем сайте, и я хотел бы знать, как получить выбранную дату, как только пользователь нажмет кнопку «отправить» и отправит пользователя на страницу с данные в Datepicker в нем, как это:Получите данные от Datepicker и отправьте его по адресу

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

Короче говоря, мне нужно, чтобы получить данные и поместить его после «=» в URL, а затем автоматически отправить пользователю этот адрес.

Как я могу это сделать, пожалуйста?

+0

Библиотека датпикера должна раскрывать события, к которым вы можете подключиться. Вам нужно добавить свой код к событию, которое вызывается при создании выделения, которое добавляет выбранное значение даты к URL-адресу, а затем вызывает 'window.location.assign()'. Какую библиотеку datepicker вы используете? Также обратите внимание, что я бы предположил, что '/' в вашем примере URL должен быть '?' –

ответ

0

Вы можете попробовать этот код, используя 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); 
     } 
    } 
}); 
+1

Ok thanx, я попробую это, но сначала я пытаюсь настроить параметры datepicker, чтобы изменить язык для примера. Пробовал это, но он не работает: $ (function() { $ .datepicker.regional ["fr"]; $ (".datepicker") .datepicker(); }); –

+0

Ок, похоже, хорошо работает, но как я могу заменить даты здесь: var url = ('www.url.com/start=2017-01-28&end=2017-01-29';) по значениям btstart и btnend? (Извините, что я новичок) –

+0

Вы можете заменить его, как в ответе, как 'var url = 'www.url.com/start =' + $ (" # btnStart "). Val() + '& end =' + $ («#btnEnd»). val(); ' –

0

Вы можете использовать как этот

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>

+0

Это больше похоже на то, что мне нужно, потому что я хотел, чтобы он отправил нажатие на кнопку, а не на выбор, но нажатие кнопки, похоже, не запускает предупреждение! Я отправляю ответ с тем, что я сделал –

+0

Не могли бы вы проверить мой ответ, чтобы узнать, в чем проблема с моей функцией? –

+0

uou не нужно 'altField: '# thealtdate',' это проблема с копированием, моя ошибка –

0

Так вот что я пытался, но щелчок не кажется, чтобы начать предупреждение:

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

+0

вы записывали ее в '$ (document) .ready ({});'? –

+0

Это, наверное, звучит глупо, но я новичок, поэтому я понятия не имею, что этот document.ready может быть:/Поскольку я не использую много JS, я все это прямо в своем HTML между двумя тегами