Send date parameter without "/" bars in PHP GET method

Question

I have a booking form that sends the data to a URL and on the URL page the data is processed. However I have the problem, the URL cannot read the variable of the data fields, because the date Picker sends the parameters with bar "/".

I’m using the Foundation datepicker.

http://jsfiddle.net/thallysondias/6e03wgLL/

$(function () {
    window.prettyPrint && prettyPrint();
    $('#dp1').fdatepicker({
        format: 'dd/mm/yyyy'
    });
    $('#dp2').fdatepicker({
        closeButton: true
    });
    
    // implementation of disabled form fields
    var nowTemp = new Date(); 
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
    var checkin = $('#dpd1').fdatepicker({
        onRender: function (date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
            var newDate = new Date(ev.date)
            newDate.setDate(newDate.getDate() + 1);
            checkout.update(newDate);
        }
        checkin.hide();
        $('#dpd2')[0].focus();
    }).data('datepicker');
    var checkout = $('#dpd2').fdatepicker({
        onRender: function (date) {
            return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        checkout.hide();
    }).data('datepicker');
});

<link href="http://luteciahotel.com/css/foundation-datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://luteciahotel.com/js/datepicker/foundation-datepicker.js"></script>



<!-- INICIO BOOKING -->
<div id="booking" class="booking show-for-medium-up">
    <div class="row"> 
        <form action="https://reservations.omnibees.com/default.aspx" method="GET" target="_blank">    
            <input type="hidden" id="q" name="q" value="1316" />  
            <input type="hidden" id="lang" name="lang" value="pt-PT" />
            <div class="medium-2 columns">
                <input type="text" value="" id="dpd1" placeholder="Check-in" name="CheckIn" readonly/>
            </div>
            <div class="medium-2 columns">
                <input type="text" value="" id="dpd2" name="CheckOut" placeholder="Check-out" readonly/>
            </div>
            <div class="medium-2 columns">
                <select id="ad" name="ad">
                    <option value="1" selected>Adulto</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <div class="medium-2 columns">
                <select id="ch" name="ch">
                    <option value="0" selected>Criança</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <div class="medium-2 columns">
                <input type="text" name="Code" id="Code" placeholder="cod. promocial"/>
            </div>
            <div class="medium-2 columns">
                <input type="submit" class="button expand tiny" style="margin:0;border:0 !important;" value="Reservar">
            </div>
        </form>
    </div>
</div>
<!--/ FIM BOOKING -->

At this time the date value gets this format in the URL Checkin=31%2F01%2F2015&Checkout=18%2F03%2F2015.

Thus preventing the correct reading of the variable, because the correct would be: Checkin=31012015&Checkout=18032015.

Removing the value %2F.

How could I send the variable without the datepicker "/"?

I saw something like:

var textarea = $('#the_textarea');
var txt = textarea.val();
textarea.val(txt.replace(' ', '-'));

But I don’t know how to use it!

Answer 1

http://jsfiddle.net/KyleKatarn/6e03wgLL/2/

The solution was to use replace:

$('form').submit(function () {
    $('#dpd1').val( $('#dpd1').val().replace(/\//g, '') );
    $('#dpd2').val( $('#dpd2').val().replace(/\//g, '') );
});