Jump to content

using TheDatePicker


Jay@TastefulTitles.com

Recommended Posts

My website needs to use a date picker to choose first and last dates of a rental period. I chose TheDatePicker because it said it was pure JS and easy to use. The picker for the first date works fine. I am finally able to make the MinDate 10 days from the current date, as intended.

Once the first date is chosen, I need to make it the MinDate for the second chooser. I can't seem to find the correct code to do that. Do I need to use a callback? Do I have to set a listener? The docs for TheDatePicker show code for doing that, but that code is in TypeScript rather than straight JS, and I can't figure out how to implement it. Can someone point me to an example, or suggest a different picker where this is easier?

Here is my code:

                  <tr>
                     <td style="text-align:center"> 
                        <div id="input-wrapper" class="w3-container" style="text-align:center">
                           <input id="date1" type="text" class="form-control w3-show-inline-block w3-border") style="width:60%; min-width:11ch">
                              <script>
                                (function () {
                             		// This code works as intended.
                                    const input = document.getElementById('date1');
                                    const datepicker = new TheDatepicker.Datepicker(input);
												datepicker.options.setInputFormat("Y, m, d");
												datepicker.options.setMinDate("+ 10 days");
												datepicker.options.setDropdownItemsLimit(20);
                                    datepicker.render();
                                })();
                               </script>        
                        </div>
                     </td>
           <!--			2ND DATE FIELD			-->
                     <td id="wrapper2"> 
                        <div class="w3-container" style="text-align:center">
                           <input id="date2" type="text" placeholder="Last show" class="form-control w3-right w3-border" style="width:60%; min-width:11ch">
                           <script>
                                (function () {
                                    const input2 = document.getElementById('date2');
                                    const datepicker2 = new TheDatepicker.Datepicker(input2);
                                  
									//This code obviously needs to go somewhere else, because it can't run until date1 is chosen.
                                  		var d = new Date(document.getElementById("date1").value);
										datepicker2.options.setMinDate(d.toDateString()
                                  	//(I realize this code won't work anyway, but I can fix that. My question is how to access it.)
                                                                               
                                    datepicker2.render();
                                })();
                           </script>                  
                        </div>
                     </td>
                  </tr>

This is what's shown in the docs, but I can't figure out how to implement it.

		// Callback to be called just before the datepicker is opened or closed.
		// An Event instance and a boolean telling whether datepicker was opened (true) or closed (false) are given on input.
		// If callback returns false, action stops and datepicker will not be opened / closed.
		public onBeforeOpenAndClose(listener: OpenAndCloseListener): void {
			this.onEvent_(EventType_.BeforeOpenAndClose, listener as AnyListener);
		}

		public offBeforeOpenAndClose(listener: OpenAndCloseListener | null = null): void {
			this.offEvent_(EventType_.BeforeOpenAndClose, listener);
		}

		// Callback to be called immediately after the datepicker is opened or closed.
		// An Event instance and a boolean telling whether datepicker was opened (true) or closed (false) are given on input.
		public onOpenAndClose(listener: OpenAndCloseListener): void {
			this.onEvent_(EventType_.OpenAndClose, listener as AnyListener);
		}

		public offOpenAndClose(listener: OpenAndCloseListener | null = null): void {
			this.offEvent_(EventType_.OpenAndClose, listener);

 

Link to comment
Share on other sites

Not sure I understand the desired output, so this is just a guess.

It does not use your "TheDatePicker" functions, but it does use the new HTML 5 type="date" element.

Try it out and see if you can use it as is or modify to add additional validation checks.
See references in the code documentation

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!--
  From: http://w3schools.invisionzone.com/topic/61265-using-thedatepicker/ 
  See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
-->

<style>
 #date1,
 #date2 { width: 10em; }
</style>

</head><body>
<table>
 <tbody>
  <tr>
   <td style="text-align:center"> 
    <div id="input-wrapper" class="w3-container" style="text-align:center">
     <input id="date1" type="date"  onchange="dateExtend()"
            class="form-control w3-show-inline-block w3-border")>
     
    </div>
   </td>
<!--			2ND DATE FIELD			-->
   <td id="wrapper2"> 
    <div class="w3-container" style="text-align:center">
     <input id="date2" type="date" placeholder="Last show"
            class="form-control w3-right w3-border">
               
    </div>
   </td>
  </tr>
 </tbody>
</table>

<script>
Date.prototype.addDays = function (days) { return new Date(this.getTime() + days*24*60*60*1000); }
Date.prototype.toYYYYMMDD = function() {
  return `${this.getFullYear()}-${(''+(this.getMonth()+1)).padStart(2,'0')}-${this.getDate()}`; }

function dateExtend() {
  const minDate = document.getElementById('date1').value;

  const maxDate = document.getElementById('date2');
        maxD = new Date(minDate).addDays(11);
        maxDate.value = maxD.toYYYYMMDD();
}
</script>

</body></html>

BTW, welcome to the forums.

Edited by JMRKER
Link to comment
Share on other sites

Thanks for the welcome, and for the code. My problem is not in manipulating dates. I think it's that I'm still struggling to grasp callbacks and how to use them. 

The min date for the second datepicker can't be set until the user has chosen the starting date for his rental in the first datepicker. The code that sets up the 2nd datepicker appears to run when the page is drawn, but maybe I'm mistaken, and it is actually part of a callback that runs when the date2 field becomes active. I need to play with that idea and I'll get back.

Thanks again for trying to help. Sorry I didn't explain it better.

Link to comment
Share on other sites

Question: Did you try the code?

The second date does not appear until the first is selected. 
The second date can then be changed if necessary without effecting the first.
I did not include any validation/checks, but you did not specify any at the time.

It's your project, so you can choose to do whatever you please.
Unless your browser does not support the new tags, it should work as needed
without a lot of confusing callbacks that I'm not sure I see the need for (?)
but you may desire for some other reason you haven't specified in your code yet.

Either way, good luck! :)

Edited by JMRKER
Link to comment
Share on other sites

9 minutes ago, Jay@TastefulTitles.com said:

I can't run your code because it apparently uses Jquery or some format that I don't have, but I don't see anything in your code that looks like a date picker. I see the date fields, which are required for the date picker, but there is no date picker attached. Am I missing something?

No, it does not use JQuery.  If you copy the code into a text editor and save it with the .html extension,
you should be able to execute it from your local computer as is.  The entire "datePicker" (as you call it)
are included by the HTML5 tags with the type="date" and the information between the <script> tags.

It is just simple HTML, CSS and JS code without anything else to load or execute.

Link to comment
Share on other sites

DreamWeaver CS5 balks at this line:

  return `${this.getFullYear()}-${(''+(this.getMonth()+1)).padStart(2,'0')}-${this.getDate()}`; 

It objects to the $'s. I can't find any explanation for this use. I did find this: 

Quote

type="date" is not supported in Safari or Internet Explorer 11 (or earlier).

I'm working in Safari. Of course I could use a different browser, but I and many of my customers use Safari, so I need a solution with wider application.

I did finally get your code working in Chrome, but there doesn't seem to be a way to set a minimum date for it. As you mention, I can validate input after the fact, but why not make it easy for the user? TheDatePicker allows me to set minimum date, and starting date and lots of other options (if I can figure them out).

My earlier searches had not turned up the HTML5 picker, so I'm glad to know about that. Unfortunately, its realization is not standardized at all, so it doesn't seem to meet my needs.

The good news is that I've spent all day trying to learn more about callbacks, and I think I may be able to get what I have to work. I may very well employ your prototype functions for date manipulation.

Thanks again for your efforts.

 

Link to comment
Share on other sites

Looks like DW cannot process 'template' commands using the backtick. 

Also, if you want to apply code to both older and newer versions of the browsers
you will need to maintain a lot of unnecessary code and documentation.

Can not use newer versions of JS if you are stuck using older browsers and frameworks.
Sorry. :(

 

Link to comment
Share on other sites

All those new Javascript features are just syntactical sugar. Since they don't do anything particularly useful besides that, I generally don't use them since I prefer my websites to be accessible to the widest range of people. Now if Javascript introduced something useful like strict typing or passing primitive values by reference I'd be more in favor of pushing for new versions of Javascript.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

@Jay@TastefulTitles.com This is the code you are looking for:

 

<link rel="stylesheet" href="dist/the-datepicker.css">
<script src="dist/the-datepicker.js"></script>

<input id="date1">
<input id="date2">

<script>
	(function () {
		// 1st datepicker initialization
		var input1 = document.getElementById('date1');
		var datepicker1 = new TheDatepicker.Datepicker(input1);
		datepicker1.options.setMinDate('+ 10 days');
		datepicker1.render();

		// 1st datepicker initialization
		var input2 = document.getElementById('date2');
		var datepicker2 = new TheDatepicker.Datepicker(input2);
		datepicker2.options.setMinDate('+ 10 days');
		datepicker2.render();

		// change min date of 2st datepicker every time 1st datepicker is updated
		datepicker1.options.onSelect(function () {
			datepicker2.options.setMinDate(datepicker1.getSelectedDate() || '+ 10 days');
			datepicker2.render();
		});
	})();
</script>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...