html5 input element "date" - how to show calendar element - javascript

I have a calendar picker working using jqueryUI but wanted to try to convert it to the native date picker.
i'd like to be able to have the following:
start with the "< input id="nativedate" type="date"/>" element being hidden from the view.
when the main page element is clicked, have the < input > element show, with the calendar opened
when the user selecs a date on the calendar, the element is hidden.
Right now when i get to step 2, the < input > item is showing but with the calendar hidden,
so the user must click to have the element appear and then click again to have the calendar show and then a third click to select the date.
EDIT: I've tried the following:
$('#nativedate').click(function(){
console.log('click logged');
})
and then in another method:
$(#nativedate).trigger('click');
which works in terms of my event handler i've set up, but it does not open the calendar

Some Questions:
i) Is the browser's native datetime element is Opening or your calender is opening on input decleration ?
ii) If the your item is not showing after some time then try some javascript to force it to keep open nearby that specific input tag?
These May Help
Disable native datepicker in Google Chrome
Remove background arrow from date input in Google Chrome v20
or Try Google Search
or You can edit the browsers native DateTime Picker using CSS.

Related

Opening a calendar with a button HTML / JS / CSS

I'd like to setup a button that opens up a calendar after clicking on it. I've seen a lot of options online but they all require some type of input or a form. Ideally, I'd like to click the button, open up the calendar, click a date, then that date shows up next to "Date: ".
<div>
<div class="result">Date: <span></span></div>
<button>Calendar</button>
<button>Remove Date</button>
</div>
I first tried getting an ID via javascript and modifying the element but no luck with that option. Only CSS I have on this test file is just the basic styling you see in the screenshot.
So in the image above, click the calendar button, select a date, that date shows up to the text "Date: "
Then if I click remove date, well it should remove any date that is showing.
I've tried numerous options such as using inputs via forms and dom manipulation but wasn't what I was looking for.

ngb-datepicker and Angular 4: add button inside the datepicker box

I'd like to add a button inside the datepicker box, something like "Today" which is clickable and selects the current date;
From what i've seen in the documentation there's only the [dateTemplate] option which seems to affect the date elements inside the datepicker. [custom day view]
Is there another attribute or some other way one can use to add a button inside this box?

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.

date picker should appear when clicked on image

In fiddle i am displaying a dynamic date picker which displays date when we put curser on that text box, that is fine.i want a image to be placed right side of text box and when image will be clicked then same date picker will be displayed.
http://jsfiddle.net/cBwEK/
I am trying by putting an image there but when i click on that image nothing happens. How can it be done? Any help please
As it turns out, there is an option for this very thing: toggleElements. It expects a collection of other elements that can also invoke the datepicker. I added an array with a single element and it seems to work just fine.
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['imageInvokerP']
});
Fiddle: http://jsfiddle.net/cBwEK/10/
one ans was given by Jonathan and this should be the way of doing things of these kinds.
but therez an easy solution you can take
assuming id of your image is Image and that of text box is Input
you can do everything normally
binding the datepicker to the input element using $('#Input').datePicker() in document.Ready
next you can bind the click event of the $('#Image') like this
$('#Image').click(function(){
$('#Input').click();
});
this way automatically your input element will get focus when you will click on the image.

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/

Categories