We Keep Coding

How to populate two text input with different types of date using keith wood jq

I use a text input to show the date from Keith Wood datepicker jq. I'm using ('ummalqura', 'ar') as the type of date.
so far so good.
The problem is that I want to populate another text input with the equivilant date in ('gregorian', 'en').
in another word, one click on the calendar to genrate two different set of dates, one in (ummalqura) and the other in (gregorian).
any help will be appreciated.
here is the html code:
<div class="container ">
ummalqura date type: <input id="ah" class="form-control" type="text" name="datePicker">
<br>
gregorian date type: <input type="text" id="ad" >
</div>
and here is the js to the calendar datepicker in the first text input:
<script>
$("#ah").calendarsPicker({
calendar:
$.calendars.instance('ummalqura', 'ar'),
startDate: '0d',
minDate: 0,
onSelect: function (dates) {
$(this).trigger('change');
}
});
</script>

Starting date and ending date are same using Bootstrap datepicker

Starting date and ending date are same. If change starting date automatically changed end date. Here my code
<input id="startingDate" class="datePicker form-control" name="startingDate" value="14-01-2017" type="text">
<input id="endingDate" class="datepicker form-control" name="endingDate" value="" type="text">
Javascript code
$(document).on('blur', '#startingDate', function(){
var date = $(this).val();
$("#endingDate").datetimepicker({
dateFormat: "dd-mm-yy",
defaultDate: date
});
});
What is my problem and how i can solve that problem ??

if you want to have the same value in endingDate when you leave your startingDate
you can do that's
<script>
$(document).ready(function(){
$("#startingDate").blur(function (){
$("#endingDate").val($(this).val());
});
});
</script>

Disabling 2 future dates for reports

I want to limit the selection of date ranging from the past date and current date. The future dates must be disable. My "From Date" is functioning well, but the "To Date" is not. Does my Javascript code for To date is wrong?
Js Code
<script>
$(function() {
$("#datepicker").datepicker({maxDate: '+0d'});
})
$(function() {
$("#datepicker1").datepicker1({maxDate: '+0d'});
})</script>
Hmtl Code
<p>From Date: <input type="text" id="datepicker"></p>
<p>To Date: <input type="text" id="datepicker1"></p>
See my practice in this website:
https://jsfiddle.net/vr06um2a/

You wrote datepicker1 (extra '1') instead of datepicker for the 2nd function.
<script>
$(function(){
$("#datepicker").datepicker({maxDate: '+0d'});
$("#datepicker1").datepicker({maxDate: '+0d'});
});
</script>

Open two jquery datepickers simultaneously

I have two input fields containing a class that triggers a datepicker to open. Both work fine independently, i.e when I click on one or the other but I want for both datepickers to open when either input field is clicked.
Here is the script part of the code
$(document).ready(function() {
$( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});
and this is the html
<div id="quoteformcollection">
<h1>Collection</h1>
<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
<input type="hidden" id="DepotStart" value=""/></td>
<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div>
<div id="quoteformreturn">
<h1>Return</h1>
<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>
I have tried looking for an answer myself but am quite new to jquery and struggling a bit so any help would be much appreciated.
I would also like for whatever value is selected in the first datepicker, for the default date in the second to be incremented by x number of days, which again I am not sure of the best way to go about it.
Any advice would be hugely appreciated!

Try this code for instance to link the two datapickers:
$('#collectiondate').datepicker({
dateFormat: "#",
onSelect: function(dateText, inst) {
var dateText = eval(dateText);
var min = new Date();
min.setTime(dateText);
$('#end').datepicker('option', 'minDate', min);
}
});
$('#returndate').datepicker({
dateFormat: "#",
});

I think you'd have to use the calendar 'inline' and manage how it's popped up yourself through jQuery / Javascript. You need to point the cal to a div tag to use it inline.
http://jqueryui.com/demos/datepicker/#inline

AUI datepicker error and workaround

I am checking the Liferay Site for Alloy UI date picker.
The problem in the given example is that there is no select option. If the DOB of my user is in 70's then the user has to click back button multiple times.
This is not a happy scenario for the user. How can I edit my AUI javascript to something like month and year option given by jquery here

I'm assuming that you are using AlloyUI 1.5 here, and so I would recommend using the DatePickerSelect component but hiding the select elements that you don't need with display: none;. Assuming that you only want a year dropdown, you could hide both the month and day dropdowns. I've created a runnable snippet example here:
AUI().use('aui-datepicker', function (A) {
var datePicker = new A.DatePickerSelect({
dayNode: '#day',
monthNode: '#month',
yearNode: '#year',
calendar: {
dateFormat: '%m/%d/%Y'
},
render: true
});
// Working around the fact that the calendar does not get updated
// when a new year is selected:
var yearNode = A.one('#year');
yearNode.on('change', function(event) {
datePicker.calendar.set('currentYear', yearNode.get('value'));
var date = datePicker.calendar.date;
datePicker.calendar.clear();
datePicker.calendar.date = date;
});
});
<script src="http://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/1.5.1/aui-skin-classic/css/aui-skin-classic-all-min.css" rel="stylesheet">
<div id="datePicker">
<select id="month" style="display: none;">
<option></option>
</select>
<select id="day" style="display: none;">
<option></option>
</select>
<select id="year">
<option></option>
</select>
</div>

AUI Element:
<aui:input name="dateOfBirth" cssClass="dob" id="dateOfBirth" title="Date Of Birth" placeholder="dd/mm/yyyy" readonly="true" >
Script:
$(".dob").datepicker({ dateFormat: "dd/mm/yy",minDate: new Date(), changeYear: true,changeMonth: true,yearRange: "-0:+10y", onClose: function(date, datepicker) {$(".dob").focus(); }});