# \[p5.js\] Date search related

**URL:** <https://discourse.processing.org/t/p5-js-date-search-related/35196>\
**Category:** Libraries\
**Created:** [February 16, 2022, 1:02am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196 "2022-02-16T01:02:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 16, 2022, 1:02am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/1 "2022-02-16T01:02:03Z")

</div>

Date search related.

 ![fig](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/58ed562c28448934f52802cb280e5abbd53f3b0c.jpeg)

If you look at the image, you can select the date.

within p5.js

1. library
2. If you have an example source code

Do you have any content?

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 16, 2022, 6:29am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/2 "2022-02-16T06:29:46Z")

</div>

Link : [Lightpick - Javascript date range picker - lightweight, no jQuery](https://wakirin.github.io/Lightpick/#installation)  
@GoToLoop

Can’t you solve it using ‘Lightpick’ on the above site?  
Seniors please help

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 16, 2022, 8:44am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/3 "2022-02-16T08:44:49Z")

</div>

Never heard about that Lightpick library? Have you tried it? Got some online sketch using it?

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 16, 2022, 8:57am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/4 "2022-02-16T08:57:36Z")

</div>

I am writing offline.

I’ll send you the example code, could you please review it?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 16, 2022, 9:06am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/5 "2022-02-16T09:06:35Z")

</div>

Couldn’t you just post it online, for example as a Gist, like I did w/ my “Dat.GuiTest” sketch?

> <https://gist.github.com/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62>

> **[Creating gists - GitHub Docs](https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists)**
>
> You can create two kinds of gists: public and secret. Create a public gist if you're ready to share your ideas with the world or a secret gist if you're not.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 16, 2022, 9:13am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/6 "2022-02-16T09:13:05Z")

</div>

@GoToLoop

I want ‘Date search related’.  
I solved ‘dat-GUI’.

Is there no way to ‘Date search related’?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 16, 2022, 9:32am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/7 "2022-02-16T09:32:33Z")

</div>

> [@GWAK](#):
>
> I solved ‘dat-GUI’.

That was just a sketch hosted in GitHub’s Gist.

If you wanna help you need to post some runnable code online so we can see what is wrong w/ it.

> [@GWAK](#):
>
> Is there no way to ‘Date search related’?

I dunno! Of course there should be libraries for it.

Have you already tried the 1 you found, the Lightpick?

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 16, 2022, 6:27pm UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/8 "2022-02-16T18:27:44Z")

</div>

Regarding ‘date search’,

 ![fig1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4aee2dbc763554003461e8a38af7a12d6cd5873e.jpeg)

1. p5-js

```auto
function setup() {
 createCanvas(600, 600);
 background(0);  
}
function draw() {
}

```

1. HTML

```auto
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/lightpick.js"></script>
  <script language="javascript" type="text/javascript" src="TEST_DATE.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="libraries/lightpick.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightpick.css">

  <!-- This line removes any default padding and style.
       You might only need one of these values set. -->
  <style> body { padding: 0; margin: 0; } </style>
</head>

<body>
  <h2>START-DATE : <input type="text" size="20" name="START-DATE" id="datepicker"/>
  
  
  
</body>

<script>

var picker = new Lightpick({
    field: document.getElementById('datepicker'),
    onSelect: function(date){
        document.getElementById('result-1').innerHTML = date.format('Do MMMM YYYY');
    }
});
</script>

</html>

```

1. css, js download link :  
[GitHub - wakirin/Lightpick: (deprecated) Check out the new date picker easepick](https://github.com/wakirin/lightpick)

2. example source :  
[Lightpick - Javascript date range picker - lightweight, no jQuery](https://wakirin.github.io/Lightpick/#installation)

this is solved.

> [@GoToLoop](#):
>
> > [@GWAK](#):
> >
> > I solved ‘dat-GUI’.
> 
> That was just a sketch hosted in GitHub’s Gist.
> 
> If you wanna help you need to post some runnable code online so we can see what is wrong w/ it.
> 
> > [@GWAK](#):
> >
> > Is there no way to ‘Date search related’?
> 
> I dunno! Of course there should be libraries for it.
> 
> Have you already tried the 1 you found, the Lightpick?

 ![fig2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1e07a81b6a08502f5c721e04d0061a657577dde8.jpeg)

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 12:49am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196/9 "2022-02-19T00:49:12Z")

</div>

@GoToLoop

Thank you. ^^  
 ![fig1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f3ea2db576ce3ebe18282f636d2ae28747862f40.jpeg)

[![](https://img.youtube.com/vi/GHoZbXPFRdE/hqdefault.jpg "WEB 날짜출력하기") ](https://www.youtube.com/watch?v=GHoZbXPFRdE)