We Keep Coding

Jquery datetimepicker opening first time at different position

I am using Jquery datetimepicker plugin link here
When I click on the field for first time, the datetimepicker is not opening near the field, something like below, the picker is way above the field.
When I close it and click on it second time and after, it is appearing in proper place. depicted below.
This is weird, and when I set either timepicker or datepicker to false, the picker is working fine from the first click.
The code I used to construct the picker is below,
HTML
<input id="DateTimeFrom" type="text" class="widthAdjust" />
JS
$('#DateTimeFrom').datetimepicker({
onShow:function( ct ){
this.setOptions({
maxDate:maximumDate,
maxTime:maximumTime
})
},
mask : true
});
I am not applying any CSS except for setting width to the field.
For maximumDate and maximumTime I performing some logic and setting to it, But I am pretty sure that the logic has no effect on this issue.
EDIT
I have my code in fiddle here. but I couldnt link the datetimepicker js and css.
Any sort of guidance will be helpful.

Try to set offset() for datetimepicker
$("#buttonID").click(function(){
$('.xdsoft_noselect').css('top', $("#DateTimeFrom").offset().top + $("#DateTimeFrom").outerHeight());
});

Bootstrap Datepicker Disable Past Dates After First Date Field is Set

I'm working on a Wordpress website with the theme based on Bootstrap 3.
In a form I need to include calendar date pickers. I added a js library from eyecon (Demo Website for Datepicker Library). I made it work with date selectors, but I'm having trouble disabling choosing the past times for arrival field, when the departure time is set.
For example, if the Departure time is set to be 1 March, when the user clicks on the Arrival field in the calendar that pops up, all the dates before 2nd March should be disabled.
I tried multiple versions of code given on demo website, but they didn't work. I think the problem might be that I have jQuery in noConflict mode.
My current script is located in footer.php of my theme. The calendar pop up works, and it disables past dates, but it doesn't disable dates before the Arrival field once the Departure date is set.
This was the most successful attempt, as at least the calendar popups were working on this attempt: http://jsfiddle.net/j5ZKc/
And this is my current script:
<script type="text/javascript">
jQuery(function() {
jQuery('#dp1, #dp2'
).datepicker({startDate: '-0m'}).on('changeDate', function(){
jQuery( '#dp1, #dp2'
).datepicker('hide');
})
});
</script>
Any suggestions please?

So after some trouble I finally got something working for you:
jsFiddle Bootstrap-datepicker
What did I do:
I used forked Bootstrap-datepicker. It is in my opinion way better documented and easier to use. I got it working so that should count for something.
For example I got the date of the respective datepicker by invoking getDate() on a datepicker:
checkout.datepicker("getDate").valueOf()
If you have any questions about my code, let me know!
EDIT:
I updated the former jsFiddle (see the link above). It automatically sets the value of #dp2 to the selected date of #dp1 + one day. Therefore you should always be in the correct month.
If you don't want the code to put the focus on #dp2 after a date is selected just remove the following line in the jsFiddle:
$('#dp2')[0].focus();

Try this code snippet:
$('#changestartdate').datetimepicker({
minDate:new Date()
});

jQuery calendar match date from previous input

So what I am trying to accomplish is what most Hotel or Airport sites have in general, after you've chosen a date for your arrival when clicking on the next calendar it automatically updates the calendar dates to the same month in which you chose your arrival.
See: http://hotelsaxchicago.com
I currently have jQuery UI and it's calendar plugin for a casino/hotel site: http://staging.comanchenationcasinos.com
Is there away to do something similar on here? How can I detect what's already in the input field without actually clicking the submit button.
At the same time, how can I trigger the calendar if someone clicks on the icon instead?
Thanks ahead of time.

What I usually do for the calendar link next to the input is something like
$('body').on('click', '.calendar_icon', function(){
$(this).prev('input[type="text"]').focus();
return false;
});
That will drop the focus onto the text input sitting previously in the markup.
Regarding the date resetting, try something like this:
Assuming you have the first input with the id of first_date and the second as second_date...
$('body').on('change', '#first_date', function(){
var this_date = $(this).val();
$('#second_date').datepicker("setDate", new Date(this_date) );
});
Worth noting, you could also attach the two date pickers with data-next-datepicker="#something" to make it really specific if you'd rather not use #second_date. I'd go that route if you had a series of dates on the page.

update label with selected date when selecting date in asp calendar

I have a asp calendar (i want to continue to use that calendar. NOT the jquery one)
When a date is selected in the calendar, i want to put that date in a label. I tried to write a piece of javascript, but it doesn't work. Can anyone help me point out what i am doing wrong?
Thanks!
<script type="text/javascript">
$('#Calendar1').change(function() {
var t1 = $('#Calendar1').val();
var result = t1;
$('#lbldate').html(result);
});
</script>

All the calendar is is a table with links. The best way to do this would be attach to a link click by capturing all of the link clicks using JQuery, or in the DayRender event, write out some javascript to call your own function with the current date. Not 100% sure how to do that, but DayRender lets you have access to a lot, so it should be possible.
The calendar control was really never meant to work client-side in this fashion, so you may run into quirks to work around because of that.

Change jquery ui datepicker programmatically

I've got a jquery ui datepicker on my page. It's linked to a span not an input. It's currently tweeked to select a week at a time. I've also got two buttons on my page 'Previous Week' and 'Next Week'. I want the buttons to control what's selected by the datepicker. (ie jump forward / backward by one week when pressed).
I'm not sure how to grab the datepicker so I can mess with it (or what I actually mess with - is there a real 'object' there, or is it a just a load of css / html component like 'ui-datepicker-current-day' etc).

there is a real object you can hold a reference to.
example:
var datePicker = $("#id").datepicker({firstDay: 1});
to know what you can do with it, check:
http://jqueryui.com/demos/datepicker/