datepicker widget

  • 1
  • Question
  • Updated 7 years ago
Hi has anyone any idea where I can get a simple date picker and time picker, either combined or separate, widget in html to simply cut and paste into my Yola site. I have found a few, but I am no programmer, and they start going into things you have to do to adjust this and that. I just want something to cut and pastE

Cheers
Ian
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Ian,

Have a look at Anytime

fairly easy to install with instructions.
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
Looking now

Thanks
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
Hi

Sorry but what part do I copy and paste. I have read it and it seems to be a lot of code on there to make adjustments and so on, and I really don't understand it all.
Sorry but it really has to be simple for an 'old' man like me.

Cheers
Ian
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Ian,

Do you have Yola Silver?

Asking because I can probably help you set it up quickly with Silver.
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
Yes I have a silver account with Yola
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. I'll get back to you here shortly.
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
thanks
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
Hi Gop, any news??
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Ian,

Please download and copy the anytime.js file and save it as anytime.js with Notepad say onto your desktop. (remove the last line from the JavaScript file)

Do the same with anytime.css using Notepad

and again the same with the jquery-1.x.x.min.js and save it as jquery-1.6.4.min.js again using Notepad.

Now create a folder in your file manager called "anytime". This will now have the partial address of "resources/anytime/..."

With your File manager copy the three files into that folder.

In an HTML widget placed at the top of your page

add this code:


<link rel="stylesheet" type="text/css" href="resources/anytime/anytime.css" />
<script src="resources/anytime/jquery.js"></script>
<script src="resources/anytime/anytime.js"></script>


At the place on your page you wish to display the time picker then add another HTML widget with

English: <input type="text" id="field1" size="50"
value="Sunday, July 30th in the Year 1967 CE" /><br/>
English: <input type="text" id="field2" value="12:34" />


Followed by another with

<script>
AnyTime.picker( "field1",
{ format: "%W, %M %D in the Year %z %E", firstDOW: 1 } );
$("#field2").AnyTime_picker(
{ format: "%H:%i", labelTitle: "Hours",
labelHour: "Hours", labelMinute: "Minutes" } );
</script>


That will get you there I hope.
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
Hi Gop

Have tried this, twice now. It seems to be doing something, but I just end up with 2 boxes. one saying Sunday, July 30th in the Year 1967 CE and the other says 12:34. I tried to type into the boxes to see if The value would change, but I can type whatever I want in either box. Letters or numbers. There is no calendar pop up. It may well be something I am doing wrong.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi ian,

What is your website address?
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
I am actually doing this on a 'dead website. I didn't want it to hamper my website in case it did something wrong. Is this a bad idea? should it be on a live website?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Great idea in fact. Always should do this when running development stuff
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
http://www.imigatwickairportparking.c...

This is the actual place it will go when sorted. Should I try here? Told you I know nothing!!

Let me just say thanks for the help by-the-way
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Oops! Just realised there's another file to paste. Sorry Ian. I have been doing this off and on and lost track. Beg your pardon.

The fix is to paste this below the last HTML widget:


<style type="text/css">
#field2 { background-image:url("clock.png");
background-position:right center; background-repeat:no-repeat;
border:1px solid #FFC030;color:#3090C0;font-weight:bold}
#AnyTime--field2 {background-color:#EFEFEF;border:1px solid #CCC}
#AnyTime--field2 * {font-weight:bold}
#AnyTime--field2 .AnyTime-btn {background-color:#F9F9FC;
border:1px solid #CCC;color:#3090C0}
#AnyTime--field2 .AnyTime-cur-btn {background-color:#FCF9F6;
border:1px solid #FFC030;color:#FFC030}
#AnyTime--field2 .AnyTime-focus-btn {border-style:dotted}
#AnyTime--field2 .AnyTime-lbl {color:black}
#AnyTime--field2 .AnyTime-hdr {background-color:#FFC030;color:white}
</style>
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That page should be fine also.
If it isn't we'll look closer at possible conflicts but shouldn't be
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You can check it out here: http://knows-picker.yolasite.com
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
This is my main website, the one the Yola sites point to, https://www.imiparking.co.uk/default.... . I have 2 Yola sites but would like them to be a bit more independent, and enable people to book through them. It is the quick quote box that I am trying to replicate, although I know that the pricing factor can't be done. It is just a date and time picker on my Yola web sites and from there I will send them to a payment page for the time they have input.
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
Sorry that should be 3 Yola sites.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Ian,

If I had only asked earlier I would have seen your requirement.

Please look at jotform.com

They have this facility almost ready to go with date pickers and all and it is included already in a form. This is most definitely the way to go

An example I have created: here
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
on it now cheers
Photo of Imi Parking

Imi Parking

  • 26 Posts
  • 0 Reply Likes
Have just watched the video and it would appear that that is the answer, although being told by the 'better' half to get off here now!!

Gop I owe you a crate of beer!!

Cheers
Ian
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Good luck. No you're hooked for years to come. Never finishes.