如何更改使用 datepicker 输入的日期格式并将其合并到重定向 url答案

【问题标题】：How to change Format of the date entered using datepicker and combining it in the redirecting url如何更改使用 datepicker 输入的日期格式并将其合并到重定向 url
【发布时间】：2017-05-08 06:32:49
【问题描述】：

我为一家酒店创建了入住日期和退房日期表格。单击提交按钮时，我希望将页面重定向到此站点：https://www.thebookingbutton.com.au/properties/qbatcoldirect?check_in_date="user_entered_date in format dd-mm-yy"

这是我的代码：

<script>
    var Checkin = $( function() { $( '#datepicker1' ).datepicker({ dateFormat: 'dd-mm-yy' }); }).val();
    var Checkout = $( function() { $( '#datepicker2' ).datepicker({ dateFormat: 'dd-mm-yy' }); } ).val();
    var booking1 = "https://www.thebookingbutton.com.au/properties/qbatcoldirect?check_in_date=";
    var booking2 ="&check_out_date=";
    var bookinglink = booking1 + Checkin + booking2 + Checkout;
    function thelink() {
        window.location.assign(bookinglink);
     }
</script>

<body> 
  <label for="datepicker1">Checkin</label>
  <input type="text" id="datepicker1" placeholder="dd-mm-yyyy">
  <label for="datepicker2">Checkout</label>
  <input type="text" id="datepicker2" placeholder="dd-mm-yyyy">
  <input type="button" value="Check Availability" onClick="thelink()">
</body>

请告诉我代码有什么问题，如何将用户输入的日期以 dd-mm-yyyy 格式放入重定向 url？

【问题讨论】：

标签： jquery date datepicker

【解决方案1】：

假设您将库放入页面的头部：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

这是 JS 正文部分：

<script type="text/javascript">

$(document).ready(function() {
// we wait for the all stuff to be loaded
$("#datepicker1").datepicker({ dateFormat: 'dd-mm-yy'}).val();
$("#datepicker2").datepicker({ dateFormat: 'dd-mm-yy'}).val();

});

function getBookingDates() {
// get the values
var Checkin = $('#datepicker1').val();
var Checkout = $('#datepicker2').val();

var booking1 = "https://www.thebookingbutton.com.au/properties/qbatcoldirect?check_in_date=";
var booking2 = "&check_out_date=";

// put preset values and user's data together
return booking1 + Checkin + booking2 + Checkout;
}

function thelink() {
    // call the function
    var redirectURL = getBookingDates();
    alert(redirectURL); // just checking -> you can use it to redirect
 }

</script>

和表格（没有变化）

<label for="datepicker1">Checkin</label>
<input type="text" id="datepicker1" placeholder="dd-mm-yyyy">
<label for="datepicker2">Checkout</label>
<input type="text" id="datepicker2" placeholder="dd-mm-yyyy">
<input type="button" value="Check Availability" onClick="thelink()">

【讨论】：