Develop Reference

Nightsbridge booking calender, Send input values to a redirect page after form submission

I'm working on a simple peace of code to Send input values to a redirect page after form submission.
However my skill set to complete the script is a bit too basic, i want the below script to redirect as explained below:
Herewith the form to generate the "Check in and Check out input fields:
<form class="form book-now-form" role="form" id="widget_booking_form" name="widget_booking_form">
<input id="action" type="hidden" value="2" name="action"> <input id="clone_id" type="hidden" value="1111" name="bbid">
<!--check in element-->
<div class="form-group">
<label for="check-in">Check In</label> <!-- <input type="textfield" class="form-control" id="check-in" placeholder="12.20.2014"> -->
<input type="text" class="form-control" id="start-date" name="startdate" placeholder="mm/dd/yyyy">
</div>
<!--check out element-->
<div class="form-group">
<label for="check-out">Check Out</label> <!-- <input type="textfield" class="form-control" id="check-out" placeholder="12.27.2014"> -->
<input type="text" class="form-control" id="end-date" name="enddate" placeholder="mm/dd/yyyy" >
</div>
<!--submit-->
<div class="form-group">
<button name="Submit" href="#" class="btn btn-sm btn-warning">Search</button>
</div>
</form>
Here with the JS used to generate the calendar and dates:
$( document ).ready(function() {
$( function() {
var dateToday = new Date();
var dates = $("#start-date, #end-date").datepicker({
defaultDate: "+2d",
changeMonth: true,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "start-date" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
});
But with the above code, the script generates the input values (Dates) incorrectly along with all input Variables.
So i need to now have the page redirect to nightsbrige's bridge (https://www.nightsbridge.co.za/bridge/book) with the following Variable format
?action=2&bbid=1111&startdate=2018-05-08&enddate=2018-05-09
and not ?action=2&bbid=1111&startdate=05%2F16%2F2018&enddate=05%2F23%2F2018&Submit=
any assistance will greatly be appreciated :) once this code is fixed it will be free to use.

Calendar not showing today's date and time using malot datetimepicker

I wanted to show the current up-to-date datetimepicker, but it only shows a few hour late from the current time. For now, I am using the endDate to restrict the limit to 'today'.
I am using malot datetimepicker from here: https://www.malot.fr/bootstrap-datetimepicker/
HTML
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label for="dtp_input4" class="control-label">Start Time</label>
<div class="input-group date form_starttime" data-date="" data-date-format="dd/MM/yyyy HH:ii" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly data-ng-model="startDT">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
<span class="input-group-addon"><span class="fa fa-times" id="remove"></span></span>
</div>
<br/>
</div>
JS
$('.form_starttime').datetimepicker({
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
format: 'yyyy.mm.dd HH:ii',
pickerPosition: "bottom-left",
endDate: '+0d',
})
.on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('.form_endtime').datetimepicker('setStartDate', minDate);
});
Image
The current time at the moment I posted this was 1548, but it only shows up till 0700.

var yourTimeZone = = moment.tz("2016-10-07 12:00", "Asia/Ulaanbaatar");
yourTimeZone.format() // returns "2016-10-07T12:00:00+08:00"
You have to pass startDate:2016-10-07T12:00:00+08:00 property with your current time-zone time.
Please change "Asia/Ulaanbaatar" to your country
check here for timezone

I suppose you have error in format it should be yyyy-mm-dd hh:ii
this is how the examples are defined in documentation and format is given as
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii"
});
</script>
I believe your format in html and script is not matching as it is working fine for me also, try changing that I would suggest.

setting and getting ages based on datepicker

I asked a similar question but couldn't find the right solution. I have used a code to dynamically generate input fields that includes a date field followed by age.
I am trying jQuery's datepicker class to pick the dates and each age field calculates based on these select dates.
The problem is I don't know how to set the value of age input field. Tried and searched lots of posts and it may be a simple fix but since I'm not too familiar with jQuery methods, I got no luck to get it.
Please see excerpt from my codes:
$(document).on('click', '.datepicker', function() {
$(this).datepicker('destroy').datepicker({
onSelect: function(value, ui) {
var dob = new Date(value),
today = new Date(),
age = new Date(today - dob).getFullYear() - 1970;
$('.age').find('input').val(age);
},
changeMonth: true,
changeYear: true,
dateFormat: "mm-dd-yy",yearRange: "1900:+10",showOn:'focus'}).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Title:
<input class="form-control" type="text" name="firstname[]" value="" size="30" />
Date:
<input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />
Age: <input type="text" class="form-control age" id="age" name="age[]" value="" size="10" />
<a href="#"
class="remove">Remove</a></p>
I've tried text(), html(), val() with many other ways around but nothing works. The issue from above is setting a value to id in 'dob' input. I'd rather want it to appear in VALUE of 'age' input field. Hope I explained my issue properly.

As you mention in your question you are adding multiple input (date) fields dynamically followed by age. So using simple class $(".age") or id $('#age') selector will not work for you.
If you use $(".age").val(age) it will change value for all input with class age and if you use $("#age").val(age) it will update value only for first matching input with id age.
So, You need to use closest() with find() like this:
$(ui.input).closest("p").find('.age').val(age);
OR
Use siblings() selector like this
$(ui.input).siblings(".age").val(age);
I hope it will help you.
$(document).on('click', '.datepicker', function() {
//don't add datepicker again if already exist
if (!$(this).hasClass("hasDatepicker")) {
$(this).datepicker({
onSelect: function(value, ui) {
var dob = new Date(value),
today = new Date(),
age = today.getFullYear() - dob.getFullYear();
$(ui.input).closest("p").find('.age').val(age);
//$(ui.input).siblings(".age").val(age);
},
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
yearRange: "1900:+10",
showOn: 'focus'
}).focus();
}
});
$(document).on('click', "#add", function() {
$(".wrapper").append('<p class="user-row">Title: ' +
'<input class="form-control" type="text" name="firstname[]" value="" size="30" />' +
'Date: <input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />' +
'Age: <input type="text" class="form-control age" name="age[]" value="" size="10" />' +
' Remove </p>');
});
$(document).on('click', '.remove', function() {
$(this).closest("p").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
<p class="user-row">Title:
<input class="form-control" type="text" name="firstname[]" value="" size="30" /> Date:
<input type="text" class="form-control datepicker" name="dates[]" value="" size="10" /> Age: <input type="text" class="form-control age" name="age[]" value="" size="10" />
Remove
</p>
</div>
<button id="add" type="button">ADD</button>

You just need to remove find('input') in your code
$('.age').find('input').val(age);
into
$('.age').val(age);
Because with $('.age') you've already found the input, no need to use find to find it again. Document for find is here
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

You need tp remove .find(input) because $('.age') should do the job. Also, you need to include jquery-ui for datepicker. The following should do the trick.
$(document).on('click', '.datepicker', function() {
$(this).datepicker('destroy').datepicker({
onSelect: function(value, ui) {
var dob = new Date(value),
today = new Date(),
age = new Date(today - dob).getFullYear() - 1970;
$('.age').find('input').val(age);
},
changeMonth: true,
changeYear: true,
dateFormat: "mm-dd-yy",yearRange: "1900:+10",showOn:'focus'}).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>Title:
<input class="form-control" type="text" name="firstname[]" value="" size="30" />
Date:
<input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />
Age: <input type="text" class="form-control age" id="age" name="age[]" value="" size="10" />
<a href="#"
class="remove">Remove</a></p>

change date format to "mm/dd/yy"
it should be $('#age').val(age);
<script type="text/javascript">
jQuery(document).on('click', '.datepicker', function() {
$(this).datepicker('destroy').datepicker({
onSelect: function(value, ui) {
var dob = new Date(value),
today = new Date(),
age = new Date(today - dob).getFullYear() - 1970;
$('#age').val(age);
},
changeMonth: true,
changeYear: true,
dateFormat: "mm/dd/yy",
yearRange: "1900:+10",
showOn:'focus'
}).focus();
});
</script>
Goodluck on coding!

Want to disable future date in 'from' date field only in daterangepicker

In the given fiddle here
There are two date inputs 'from' and 'to'
In which I want to disable future date in 'From' only but when i apply endDate code in applies to both 'from' and 'to' date.
I want to apply 'endDate' that is I want to disable future date in 'from' field only and not in 'to' date field.
I picked this datepicker from thiss site
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
$('.input-daterange').datepicker({
autoclose: true,
endDate: '+0d'
});
For any query please comment below

Since you're using the date range functionality and you can't initialize the date pickers separately, you can utilize the built-in setEndDate method to set the endDate property of a specific input element.
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
In your case, you would initialize the date range picker on both input fields (like you were already doing) and then target the specific input element by its attribute and use the setEndDate method:
Updated Example
$('.input-daterange').datepicker({
autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
Full Snippet:
$('.input-daterange').datepicker({
autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>

Assign an id to each input field:
Then instead of $('.input-daterange') use $('#startdate') and $('#enddate') and only include endDate: '+0d' where you need it.

You can use the input name attribute as a selector, and set the attributes for each instance of the datepicker.
// HTML
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
// JS
$('input[name=start]').datepicker({
autoclose: true,
endDate: '+0d'
});
$('input[name=end]').datepicker({
autoclose: true
});

Try this:
$(".datepicker").datepicker({maxDate: '0'});

jQuery disable TO date relative to FROM date

I am working on a project where there are two date fields available that will be used for searching between the dates. What I want to do is when a user chooses a date in the FROM field then all the previous dates in the TO field should be disabled.
Example:
FROM: 2016-03-28
To : 2016-04-10
Here in the above example suppose I want to search between these two given dates then while choosing a date from the date picker in the TO field all the dates till 2016-03-28 should be disabled and the user must not be able to select them. Please help.
jQuery date picker:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="css/jquery-1.10.1.min.js"></script>
<script src="css/jquery-ui.js"></script>
<script>
$(function(){
$('.date').datepicker({ format: 'yyyy-mm-dd'});
});
</script>
HTML:
<div class="form-group col-sm-2">
<label>From</label>
<input type="text" name="fdate" autocomplete="off" class="form-control date" style="height:25px;" value="<?php echo $fdate; ?>" />
</div>
<div class="form-group col-sm-2">
<label>To</label>
<input type="text" name="tdate" autocomplete="off" class="form-control date" style="height:25px;" value="<?php echo $tdate; ?>" />
</div>

You can achieve it like this:
$(function(){
var dateObject;
$("input[name='fdate']").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(dateText, inst) {
dateObject = $(this).datepicker({dateFormat: 'yyyy-mm-dd'}).val();
$("input[name='tdate']").datepicker({
format: 'yyyy-mm-dd',
minDate: new Date(dateObject),
});
}
});
});
Here is the working fiddle