Streaming live at 10am (PST)

JQuery UI Date Picker - Webflow Implementation

JQuery UI Date Picker - Webflow Implementation

Ok here it is. Hopefully I didn’t mess something up.

If you find an issue - give me a holler.

http://jquery-ui-date-picker.webflow.io/

In the Forum… I post under my Team Account name… Revolution.

The demo is published by my Pro AccountControlledChaos

@cyberdave @PixelGeek @bdjidi @mr_hunt @George_Konig @Koen @Nightingall @Robinho

12 Likes

Thank you! I was looking for something like this, great job!

Now I’d like this to become a standard in webflow…not trying to ditch your work…but seems like a really simple and standard addition to the webflow fields that are already there :smirk:

2 Likes

Thanks for this @Revolution !

Yes, we need a date picker! put it on the wishlist!

3 posts were split to a new topic: jQueryUI Date Picker Restrict to Date Array

9 posts were split to a new topic: jQueryUI Date Picker Not Working

Great job @Revolution. Picker works perfect. Easy to implement to.

@Revolution Thank you. What if I need a datepicker with restrictions and links for events on those dates ie every Tuesday & Thursday of the month starting September 2017 ending December 2017

You’ll need to set these options:

http://api.jqueryui.com/datepicker/#option-minDate
http://api.jqueryui.com/datepicker/#option-maxDate
http://api.jqueryui.com/datepicker/#option-beforeShowDay

If you need help customizing third party plugins, you can find me here.

1 Like

@Revolution: Is it possible to change the display format of the date? We europeans need the Day/month/year format. Otherwise really great work brother!

Read the documentation of the plugin you are using.

http://api.jqueryui.com/datepicker/#option-dateFormat

dateFormat

Type: String
Default: “mm/dd/yy”
The format for parsed and displayed dates. For a full list of the possible formats see the formatDate function.
Code examples:
Initialize the datepicker with the dateFormat option specified:

$( “.selector” ).datepicker({
dateFormat: “yy-mm-dd”
});
Get or set the dateFormat option, after initialization:

// Getter
var dateFormat = $( “.selector” ).datepicker( “option”, “dateFormat” );

// Setter
$( “.selector” ).datepicker( “option”, “dateFormat”, “yy-mm-dd” );

Hey! thanks for this.
Is there anywhere I can alter the script to also include a time selector?

yeah this doesn’t work at all… anyone have something that works? why is it so hard to make a date picker?

Thanks so much for this @revolution

My calendar works, but I have the below issue with mine…

  1. The calendar is transparent. Am I able to adjust the code to edit this?
  2. There is the autofill which happens in the web browser. Do you have any ideas on how to remove this? I have tried setting the attribute of this text field to autocomplete = off, but this does not help.

https://preview.webflow.com/preview/bv-rooftop-event-venue?utm_medium=preview_link&utm_source=dashboard&utm_content=bv-rooftop-event-venue&preview=21565d7d333910bebad48cb4fd2338dd&mode=preview

Thanks
Clayten