How to use bootstrap-datepicker in Pinegrow

General
1

I try to use bootstrap-datepicker in Pinegrow. But always fails. I don’t know where I should save css and js file, and how to load them in my webpage. Could any expert help on it? Thank you.

2

A dirty solution for this:
Buy “Bootstrap Studio” (actual only $25) , create a new project/page, search in “Online” tab for datepicker, install the package, drag’drop the datepicker from “studio” tab into your page, export the page and open the project folder in Pinegrow.
I hope, that this “Online” function is sometime available in PG …

3

@ChrisLiu Try this, I’ve only just put together quickly and not really tested it but it seems to do the job for here.

  1. Visit this DatePicker and copy whichever link suits your needs, I used this one
    https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css
    but you might chose something different.
  2. In Pinegrow on whatever page you are planning to use DatePicker click Page > Edit Code and it will open up the code editor. Paste the link you copied into the head section of the page (see second link in screenshot)

Screen Shot 2016-10-05 at 21.38.12.png865×112 37.3 KB

  1. Go back to the DatePicker page from #1 and select whatever version of the javascript file you want to use, again I used this one
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

  2. Go back to Pinegrow and again if you’ve closed Code Edit window click Page > Edit Code and it will open up the code editor. Paste the link you copied into the section of the page where the other scripts are placed (see second link in screenshot)

Screen Shot 2016-10-05 at 21.39.09.png901×179 53.5 KB

  1. You might have to click Page > Refresh just to tidy up the tree view at this stage.

  2. Now to add the DatePicker to your form. Assuming you have a form on your page select it (might be easier to select the form in the Tree View then go to the page view and click on the contextual Actions menu > Edit Code. In code view paste the following code:

    1. At this stage you should have the DatePicker appearing in your form but there’s a little bit of tidying up to do by wrapping it in a form-group, I’d have pasted here but for some reason it stopped the rest of the DatePicker code from displaying. Easiest way to do this is use the search feature in Lib and type form group and drag it onto the Tree View just above your newly placed DatePicker. Then delete the placeholder section in the form group. Now drag the DatePicker element so it is indented under the the form group you just placed. Change the Label to whatever you want it to be and you should have something in Tree View that looks like this image

    While in you Page View you should have something like this image depending on whatever other elements you have in your form.

    Like I said I just tried this quickly here and haven’t done any testing so any feedback on how it works out for you would be great to share here just in case anybody else has the same problem.

    Hope it solves your problem.

4

Thanks a lot! I will try it.

5

@ChrisLiu, just following up to find out if this worked out for you or if you had any issues getting this sorted. Would be great to get feedback either way so it might be helpful for somebody else.