update label with selected date when selecting date in asp calendar - javascript

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.

Related

How to perform click on DateRangePicker using Chrome Selenium C#

I am looking for a way to perform mouse click on DateRangePicker element.
I tried to write a tool for automation on https://rvshare.com/.
I need to click on DateRangePicker. I tried all the ways that are available on the internet but no luck.
Here are 3 ways I tried.
// 1.
Driver.FindElement(by).Click();
// 2.
Driver.ExecuteScript("arguments[0].click('');", ((RemoteWebDriver)Driver).FindElement(by));
// 3.
Actions action = new Actions(Driver);
action.MoveToElement(Driver.FindElement(by)).Perform();
action.Click(Driver.FindElement(by)).Perform();
The calendar controls are supposed to be shown but any of the above does not work.
Is there anybody who encountered similar issues?
I'm not sure what was your problem, but I was able to click on Datepicker(Pickup or Dropoff) using 1st method you mentioned, so I suggest that issue is not with methods u r using, but with your locator.
Your code is gonna be:
Driver.FindElement(By.XPath("//div[#class='DateRangePickerInput_arrow DateRangePickerInput_arrow_1']/following::div[#class='DateInput DateInput_1']")).Click();
If you are trying to select the data from the calendar then use the below script once you click on the either Pickup or Dropoff. The xpath works for both of them. Make sure to enter the date in the right format and you month you want to select is there in the calendar. You have to click on move to next month button until you reach the required month.
driver.FindElement(By.Xpath("//td[contains(#aria-label,'May 14, 2019')]")).click();

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.

jQuery UI datetimepicker bound to wrong input after DOM element removed

Here's something to bake everyone's noodle. I have a form on a website. You can look at it: My Website. Click book me and select a certain number of days at the top right. Manually remove a few of the form lines from the form using the '-' button. Then try to use the first input on the first line. It's linked to the wrong input. All the inputs have unique ID attributes, and I rebind datetimepicker class after a line is removed. Anyone have the foggiest idea why the datetimepicker pointing the the wrong object? Ironically enough, the timepicker portion, which is not from jQuery UI proper, still points to the correct input, it would seem. It seems that when you delete lines of a lower number, the lines of a higher number are moved and renamed, but the date portion f the datetime picker is still pointing the the line number that it was originally bound to, if that makes any sense.
Help is appreciated because this one has me stumped. I've tried manually releasing the datepicker objects before I remove the form lines, but nothing seems to help.
Thanks
Edit: Is there a way to completely destroy the instances of the datepicker that are bound to the input elements before I remove them?
Edit: Alright, I just had a realization. I am destroying the datepickers on the lines I'm removing, but not the lines that remain, so I'm going to work on this for a minute and see if destroying the datepickers completely when i rebuild the form helps.
No time to analyse all that code but could possible help to call $(elem).datetimepicker('destroy') when you remove a control before any rebinding.
In setAlts()
try removing var fields = $('.date').get();
and just doing:
$('.date').each(function() {
$(this).datetimepicker('destroy'); // From Marcell
$(this).datetimepicker({
minDate: now,
timeFormat: "h:mm tt",
stepMinute: 15,
});
});
If you remove dateCheck() all should be fine.
I assume below is what you are intending with dateCheck() though.
Ok in dateCheck()
change:
target.siblings('.date').datetimepicker('setDate', dateMin);
to:
target.next('.date').datetimepicker('minDate', dateMin);
Alright, so to answer the question: It seems obvious in retrospect, but the datetimepicker addon which is coded in a slightly different, and probably less efficient, manner was throwing me off the trail. At any rate, I'll try to explain what was happening in a clear fashion.
The datepicker object binds to the id of the element when it is created, and it keeps that id until it is destroyed. And apparently, attempting to bind a new datepicker object does nothing if there is already a datepicker object present.
To rememdy the problem, in the setAlts() method, I simply destroyed every single datepicker object, and recreated it. Pretty simple, but it was confusing the hell out of me.
And thanks for setting me on the right path. Otherwise I'd have probably had a chimpout and started smearing my poo on the walls.

Dynamically change highlighted dates in Jquery Datepicker

hi
I have a Jquery Datepicker object that is created fine with no highlighted dates and a particular minDate.
I want to add a highlights to this datepicker based on an AJAX call made by the user, but the only way I can see to change the highlights is adding a function to the beforeShowDay event, which is set on setup.
How can I change this function on an existing datepicker and force it to redraw so that I get my new date(s) to be highlighted.
Many thanks everyone.
Dave
Right the only way I could find to do this is to use the destroy method then redraw the picker with the new method attached to it. If anyone knows a better way of doing this please add it and I'll give you the answer.
Thanks
EDIT: Code...
Setup the picker...
var datePickerSettings = {
beforeShowDate: beforeShowDateMethod
};
var alternateDatePickerSettings = {
beforeShowDate: beforeShowDateMethodAlternate
};
$('#mydiv').datepicker(datePickerSettings);
Then once callback is complete
$('#mydiv').datepicker('destroy')
$('#mydiv').datepicker(alternateDatePickerSettings);
In the end I didn't use the date picker as the requirements changed, but this should solve the problem
Dave
There is the setDate method of the datepicker. I cannot link directly but it is here http://jqueryui.com/demos/datepicker/ under methods

Categories