Added calendar / date picker but looks weird.. help?

lisahiggins
Explorer
59 1 15

I used some code I found to add a date picker to my product page. I have a couple of questions..

 

First, when you click on the go to next month arrow, it has a "NO" symbol over it, instead of a "mouse pointer".. like here: https://www.westmichiganballoons.com/products/character-column  You can still go to the next month it's just not right.


Second, does anyone know how I can make this a required field? Thank you

Replies 3 (3)
JayAdra
Shopify Partner
52 5 11

Hi Lisa!

 

Unfortunately there's only so much code snippets can do for you, and there's always going to be extra work to add on extra features or fix styling issues.

 

If you're interested in offloading that work, we built a date picker app called Bloom a few months back, with simplicity and ease-of-use in mind. You can make a date/time required, setup timeslots, block out certain days/dates, style it to match your store, plus some other handy options.

 

It has a 14-day free trial, so feel free to try it out and see if it works better for you. We have unlimited free support too if you need any help getting set up.

 

Best of luck with your store!

SteveWinch5DS
Excursionist
54 0 6

Hi Lisa

I'm not able to help with your query, but can I ask what code you used for the date picker, and where in the product 'section' you entered that code please?!
This is exactly what we're after for ours, just not for Delivery dates, so I'll have to edit that bit.

Thanks

Steve

EasifyApps-Zoe
Shopify Partner
581 13 34

Hi @lisahiggins,

I have a simple solution to suggest for adding a required Date Picker field to your product page, and it involves using the Easify Product Options app 🤗. Here's a quick demonstration on how to set it up:

  • Begin by creating a new option set:

EasifyAppsZoe_0-1691483162545.png

 

  • Add the Date Picker option type and configure it according to your preferences. This includes customizing the option label, making it a required field, selecting available dates, setting the number of selectable dates, adding a helpful text, and more:

EasifyAppsZoe_1-1691483216078.png

 

  • Select the specific products to which you want to apply the Date Picker option:

EasifyAppsZoe_2-1691483231840.png

 

That's all there is to it—your setup is complete!

 

I encourage you to explore the app; it's user-friendly and offers an array of 25 option input types to choose from 👍. These options include text boxes, time pickers, image swatches, dropdowns, checkboxes, quantities, and many more.

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support