[p5.js] Date search related

p5.js Libraries
1

Date search related.

fig
fig797Ɨ316 32.1 KB

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?

2

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

Canā€™t you solve it using ā€˜Lightpickā€™ on the above site?
Seniors please help

3

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

1 Like
4

I am writing offline.

Iā€™ll send you the example code, could you please review it?

5

Couldnā€™t you just post it online, for example as a Gist, like I did w/ my ā€œDat.GuiTestā€ sketch?

1 Like
6

@GoToLoop

I want ā€˜Date search relatedā€™.
I solved ā€˜dat-GUIā€™.

Is there no way to ā€˜Date search relatedā€™?

7

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?

8

Regarding ā€˜date searchā€™,

fig1
fig1488Ɨ537 6.79 KB

  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 easepick

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

this is solved.

fig2
fig2525Ɨ549 20.4 KB

9

@GoToLoop

Thank you. ^^
fig1