[p5.js] Date search related

Date search related.

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?

Link : Lightpick - Javascript date range picker - lightweight, no jQuery
@GoToLoop

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

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

1 Like

I am writing offline.

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

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

1 Like

@GoToLoop

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

Is there no way to ‘Date search related’?

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.

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

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

Regarding ‘date search’,

  1. p5-js
function setup() {
 createCanvas(600, 600);
 background(0);  
}
function draw() {
}
  1. HTML
<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 Litepicker

  2. example source :
    Lightpick - Javascript date range picker - lightweight, no jQuery

this is solved.

@GoToLoop

Thank you. ^^
fig1