# How to use bootstrap-datepicker in Pinegrow

**URL:** <https://forum.pinegrow.com/t/how-to-use-bootstrap-datepicker-in-pinegrow/240>\
**Category:** General\
**Created:** [October 5, 2016, 2:21pm UTC](https://forum.pinegrow.com/t/how-to-use-bootstrap-datepicker-in-pinegrow/240 "2016-10-05T14:21:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChrisLiu](https://avatars.discourse-cdn.com/v4/letter/c/4af34b/32.png) [@ChrisLiu](https://forum.pinegrow.com/u/ChrisLiu)\
**Post date:** [October 5, 2016, 2:21pm UTC](https://forum.pinegrow.com/t/how-to-use-bootstrap-datepicker-in-pinegrow/240/1 "2016-10-05T14:21:26Z")

</div>

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.

> **[uxsolutions/bootstrap-datepicker](https://github.com/uxsolutions/bootstrap-datepicker)**
>
> A datepicker for twitter bootstrap (@twbs). Contribute to uxsolutions/bootstrap-datepicker development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![fishmi](https://avatars.discourse-cdn.com/v4/letter/f/c89c15/32.png) [@fishmi](https://forum.pinegrow.com/u/fishmi)\
**Post date:** [October 5, 2016, 4:56pm UTC](https://forum.pinegrow.com/t/how-to-use-bootstrap-datepicker-in-pinegrow/240/2 "2016-10-05T16:56:31Z")

</div>

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 …

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [October 5, 2016, 9:07pm UTC](https://forum.pinegrow.com/t/how-to-use-bootstrap-datepicker-in-pinegrow/240/3 "2016-10-05T21:07:59Z")

</div>

@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](https://cdnjs.com/libraries/bootstrap-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)

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/239757a81cb3ab56740eb1f54d064303d68f9e91.png)

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)

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/bf8757712dafb36db5b877080f3330c17760c586.png)

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:

---

<div class="post-metadata">

**Author:** ![ChrisLiu](https://avatars.discourse-cdn.com/v4/letter/c/4af34b/32.png) [@ChrisLiu](https://forum.pinegrow.com/u/ChrisLiu)\
**Post date:** [October 6, 2016, 3:01am UTC](https://forum.pinegrow.com/t/how-to-use-bootstrap-datepicker-in-pinegrow/240/4 "2016-10-06T03:01:55Z")

</div>

Thanks a lot! I will try it.

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [November 25, 2016, 10:15pm UTC](https://forum.pinegrow.com/t/how-to-use-bootstrap-datepicker-in-pinegrow/240/5 "2016-11-25T22:15:52Z")

</div>

@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.