3

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:

  1. start with the "< input id="nativedate" type="date"/>" element being hidden from the view.
  2. when the main page element is clicked, have the < input > element show, with the calendar opened
  3. 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

jared
  • 652
  • 9
  • 19
  • Basically your trying to make things more user friendly? Do you have any code to provide? – NodeDad Apr 06 '13 at 07:02
  • yeah here's an example: http://jaredstanley.com/html5/moonphase/ 1.click on the main stage and you'll see the < input > date picker appear, then 2.click on the date picker and you'll see the calendar pop up, then 3. click on the calendar and the calendar disappears. i'd like to remove step 2... – jared Apr 06 '13 at 07:09
  • try adding `$('#datepicker').css("visibility", "visible");` so i think it would look something like this `$('#nativedate').click(function(){ $('#datepicker').css("visibility", "visible"); })` – NodeDad Apr 06 '13 at 07:55
  • i seen in your script.js your showCalender function has a commented out line of `$('#datepicker').show();` trying replacing that with the `$('#datepicker').css("visibility", "visible");` if what i said before doesnt work – NodeDad Apr 06 '13 at 08:00
  • thanks @AaronRussell - that was old code, used to show the jqueryUI calendar - the line two lines below it: '$('#nativedate').show();' is the one that shows the calendar element. Again, i'm able to show the element correctly, but it's in a closed state. I'd like to have it be in its **open** state when it appears. – jared Apr 08 '13 at 04:20

1 Answers1

-1

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.
Community
  • 1
  • 1
Aamir Shah
  • 646
  • 5
  • 14
  • testing in chrome on desktop: http://jaredstanley.com/html5/moonphase/ the aforementioned steps can be replicated. the browser's native datetime element is being used, but i'm trying to force the calendar open without actually clicking on the element. – jared Apr 06 '13 at 07:15
  • 1
    ?? you suggested "Try Google Search", "edit CSS", "try some javascript" - it goes without saying that i've spent time with all of these **before** coming here. – jared Apr 06 '13 at 07:28