Javascript 通过Bootstraps datepicker传递所选日期的结果，并将其放入URL链接中

我在一个酒店网站上工作，该网站使用引导日期选择器让用户选择他们的“入住”和“退房”日期。单击按钮时，这两个日期都应传递到“预订”网站

例如，如果用户选择签入日期为：2020年11月28日，签出日期为：2020年12月29日，则我需要使用以下格式将这两个日期都输入url：

我希望我可以通过一些JavaScript实现这一点，但我不知道如何访问使用datepicker选择的日期。而且，由于datepicker结果的格式不是URL允许的格式，那么我想我必须分别获取日期每个部分的变量（即：日、月和年）

这里是棘手的部分。不幸的是，该站点似乎有一个较旧版本的引导程序或日期选择器，并且它没有拾取我在页面上添加的任何脚本，以便日期选择器设置格式（不使用较新的日期选择器脚本使用的标准变量）。下面是一个脚本示例，它通常适用于较新的日期选择器，但不适用于我的。（Chiperific在回答我的另一个帖子时提供的示例）：

与我认为的普通datepicker.js不同，这是本网站正在使用的datepicker.js（注意：我已经对其进行了调整，以满足本网站的需要）：

var Datepicker=函数（）{
返回{
//日期选择器
initDatepicker:函数（）{
//常规日期选择器
$（“#日期”）.datepicker({
日期格式：“年月日”，
上一个文本：“”，
下一个文本：“”
});
//日期范围
$（“#开始”）.datepicker({
日期格式：“年月日”，
上一个文本：“”，
下一个文本：“”，
minDate:“今天（）”，
onSelect：函数（selectedDate）
{
$（'finish'）。日期选择器（'option'，'minDate'，selectedDate）；
}
});
$（'#finish'）。日期选择器({
日期格式：“年月日”，
上一个文本：“”，
下一个文本：“”，
onSelect：函数（selectedDate）
{
$（'#start'）。日期选择器（'option'，'maxDate'，selectedDate）；
}
});
//内联日期选择器
$（'#inline'）。日期选择器({
日期格式：“年月日”，
上一个文本：“”，
下一个文本：“”
});
//内联日期范围
$（“#内联开始”）.datepicker({
日期格式：“年月日”，
上一个文本：“”，
下一个文本：“”，
onSelect：函数（selectedDate）
{
$（'#inline finish'）。日期选择器（'option'，'minDate'，selectedDate）；
}
});
$（“#内联完成”）.datepicker({
日期格式：“年月日”，
上一个文本：“”，
下一个文本：“”，
onSelect：函数（selectedDate）
{
$（“#内联开始”）.datepicker（'option'，'maxDate'，selectedDate）；
}
});
}
};
}();

以下是显示日历字段的HTML代码：

    <form action="#" id="sky-form" class="sky-form">
        <div class="row" style="margin: auto;">
            <section class="col-md-6">
                <label class="input">
                    <i class="icon-append fa fa-calendar"></i>
                    <input type="text" name="start" id="start" placeholder="Check In Date" class="datepicker">
                </label>
            </section>
            <section class="col-md-6">
                <label class="input">
                    <i class="icon-append fa fa-calendar"></i>
                    <input type="text" name="finish" id="finish" placeholder="Check out Date" class="datepicker">
                </label>
            </section>
        </div>
</form>

下面是按钮代码：

    <div class="call-action-v1-in inner-btn page-scroll" style="padding-top: 20px;">
        <a href="https://www.bookingsite.com/hotelname?checkInDate=2020-11-28&checkOutDate=2020-12-29" target="_blank" class="btn-u btn-brd btn-brd-hover btn-u-dark btn-u-block">RESERVE A ROOM TODAY</a>
</div>

目前，我已经在上面的签入/签出字段链接中手动输入了日期。这显然是我需要一些脚本来拉入datepicker提供的日期参数的地方

因此，与此部分不同的是：

？checkInDate=2020-11-28&checkOutDate=2020-12-29

，它应该有如下内容：

？document.write（Date.parse（startDate），Date.parse（endDate））

在其他地方创建上述startDate和endDate变量

有谁能帮我弄清楚我可以在datepicker.js的版本中添加什么（如上所示），让我将所选日期放入一个可通过的变量中，以用于创建URL？（可能需要将日、月和年作为开始日期和结束日期的单独变量，因为日历显示的日期格式为“dd-MMM，yyyy”，URL格式需要为“yyy-mm-dd”

我将非常感谢任何关于如何将选定日期传递到链接的建议

谢谢！
目标：制定此字符串：

https://www.bookingsite.com/hotelname?checkInDate=2020-11-28&checkOutDate=2020-12-29

我建议每次更改
.datpicker
时都用JS更新链接的HREF。
向链接添加ID将帮助我们解决以下问题：



重写：
根据您的小提琴，以下是我建议的脚本（）：

Datepicker=函数Datepicker（）{
reformatDate=函数reformatDate（日期）{
//var d=新日期（日期）；
设year=new Intl.DateTimeFormat（'en'，{year:'numeric'}）；
设month=new Intl.DateTimeFormat（'en'，{month:'short'}）；
设day=new Intl.DateTimeFormat（'en'，{day:'2位'}）。格式（日期）；
返回年份+“-”+月份+“-”+天；
};
rebuildHref=函数rebuildHref（）{
让urlBase=https://www.bookingsite.com/hotelname?checkInDate='
//$（）.datepicker（'getDate'）返回一个日期对象！
让checkInDate=$（'#start'）.datepicker（'getDate'）；
让checkOutDate=$（'#finish'）。日期选择器（'getDate'）；
//条件：捕获签入日期晚于签出日期的场景
//仅当dateCheckIn小于dateCheckOut时才继续
如果（签入日期<签出日期）{
设formattedInDate=重新格式化日期（checkInDate）；
让formattedOutDate=重新格式化日期（checkOutDate）；
让newUrl=urlBase+formattedIn
    <div class="call-action-v1-in inner-btn page-scroll" style="padding-top: 20px;">
        <a href="https://www.bookingsite.com/hotelname?checkInDate=2020-11-28&checkOutDate=2020-12-29" target="_blank" class="btn-u btn-brd btn-brd-hover btn-u-dark btn-u-block">RESERVE A ROOM TODAY</a>
</div>

https://www.bookingsite.com/hotelname?checkInDate=2020-11-28&checkOutDate=2020-12-29