JavaScript Module Date Time Control Info

Share this:  

I have created a date/time control that you can add to your web pages…

It is in the form of a JavaScript Module that you can add to you web project.

Is it perfect?  Nah!  But it is usable.  I will probably improve it here and there.

And yes, I know there is this JavaScript library out there called:  Moment.js    what can I say?   I wanted to do this!

This project is more of an experiment for future things to come (I hope).

What is it for?  If you are writing web software (for example) where a user is picking an appointment date and time.  See more info below

  • The control appears in your input “form.”
  • If a date/time is already set for the control, it displays its value in the control.
  • If no date/time has been set yet, the control displays a blank value.
  • The control has an ellipsis button.
  • When the user clicks this button, a calendar popup appears where the user can navigate to the date they are interested in and enter in a desired time in the form of hours/minutes and AM/PM.
  • The user clicks the SET button to set the date and time.
  • The calendar popup will disappear, and the date/time control will now show the date/time the user picked.

You can find the code in the Github Repo:     https://github.com/OrvilleChomer/dateTimeCtrl

To use Github as a CDN for this module, add the following line near the top of the JavaScript file that is going to use this module:

import DateTimeCtrl from 'https://orvillechomer.github.io/dateTimeCtrl/dateTimeCtrl.js'

 

More About Your JavaScript File

About the JavaScript file that includes that import statement shown above…

  • In your web page’s <script> tag for this file, it must have a:  type=”module” in it, or the “import” line in your JavaScript file will cause a parse error!
  • Any place in your pages HTML markup it has stuff like onclick= onselect=, etc., where it is calling JS functions in your JavaScript file, these will no longer work! Instead you will need to hook up event handlers using:
    • myDomNode.addEventListener(‘theEventName’, theEventHandlerFunctionName);
  • Note: This date/time control will handle wiring up all its own event handlers… you will not need to do anything to get this working yourself.  Yay!
Adding Date/Time Controls to your Form

Let’s just say that the DIV container that you are sticking your form’s HTML markup’s Id is: “myForm”. And, it is already in your page’s markup!

Here is some sample code you could possibly call:

function genSimpleForm() {
   const myFormNd = document.getElementById("myForm");
   const dtCtrl = new DateTimeCtrl();
   const s = [];

   s.push('<ul>');

   s.push('<li>Appointment Name: &nbsp;');
   s.push("<input id='appointmentName'></li>");

   const sCtrlMarkup = dtCtrl.newCtrlMarkup(
      {field:"apptDate",
       pickDateCaption:"Pick Appointment Date",
       editTime:true});

   s.push('<li>Appointment Date: &nbsp;'+sCtrlMarkup+'</li>');

   s.push('</ul>');
   s.push("<button id='btnSaveApptInfo'>Save Appointment</button>");
   myFormNd.innerHTML = s.join("");

   dtCtrl.activateControls();

   // set up a click event handler on the 'Save Appointment' button:
   const btnSaveApptInfoNd = document.getElementById("btnSaveApptInfo");
   btnSaveApptInfoNd.addEventListener('click', saveAppt);
} // end of function genSimpleForm()



/*
*/
function saveAppt(event) {
   const appointmentNameNd = document.getElementById("appointmentName");
   const apptDateNd = document.getElementById("apptDate");

   const sAppointmentName = appointmentNameNd.value;
   const sAppointmentDate = apptDateNd.value;


   // Do something with these values...
   // such as posting them via an Ajax call to an API end-point
   // that will save the values to a database!


} // end of function saveAppt()

It is your job as the developer to generate your input form’s markup and add it to an element’s innerHTML property.

Once it is part of the the web page’s Document Object Model (DOM), then you can call the date control’s activateControls() method. This wires everything up for date/time controls with event handlers, etc.

NOTE: If you call the above method before the desired date controls are added to the web page’s DOM, it will not work properly.

This is the basics of how to get a working date time control operating on your web page.

newCtrlMarkup() Method’s Parameters
  • the “field” parameter (string).  This is the only required parameter. It must be a unique identifier of the date/time field that you are editing. It has to be a value that the web page could use just fine as a page element id.
    • calling the: newCtrlMarkup() method will create a new hidden input tag that has an id set to a value of the field name you passed in.
    • When a user picks a date/time, the value that they picked is placed in that input control.
    • It is your job as the developer to check the “value” property of that control to get the value to do stuff like save the data in the form!
  • the optional “pickDateCaption” parameter (string). The prompt you want to appear on the calendar popup. If you do not use this parameter, the prompt will be “Pick Date
  • The optional “editTime” parameter (boolean). Determines if you are allowed to not only edit the calendar date but the time as well. If you do not use this parameter, the default value will be false.
  • The optional “dateValue” parameter (string). You would use this if you were building a form where you (for example) bringing up existing appointment info on an appointment saved previously and you wanted the value to be pre-populated.
Possible Future Parameters:
  • minDate (string/date). Not allow user to pick a date earlier than this date.
  • maxDate (string/date). Not allow user to pick a date later than this date.
  • formCaption (string). Allow control to handle displaying its own caption to the left of the control. If not provided, it would assume that the developer’s own code would handle any caption.
Possible Future methods:
  • setDateValue({field:’fieldName’,dateValue: sNewDateValue}).   Allow for developer to set a controls current date value after the form has been generated.
Other Possible Future Improvements:
  • Built in Localizable Date formatting used when displaying the date and time. Right now, it just supports what (I) want:  MM/DD/YYYY @ H12:mm A/PM
  • Be able to support 24 hour as opposed to just 12 hour time values.
  • Improve input validation on editing hours and minutes.
  • Improve CSS formatting of the control and give the ability to override the default CSS that is generated by the control.
  • Convenience methods that do stuff like:
    • return what week day a month begins on based on the month & year
    • return the total number of days in a month based on month & year
    • how many days/hours/minutes are between two date values