Simply small picker

Class SimpleDatePicker is a script to generate calendar and select a single day, script has abilities like..
Four different languages with (AUTO) selection depending on your browser language, Clock, POP-UP messages and the ability to save directly any picked day, also calendar can be displayed with different sizes and different themes.
You can try it bellow! Or jump directly to setup Simple DatePicker

Called from plain <INPUT>, with default settings, language is AUTO*
we set to create a small calendar and light theme.
Note: For inputs, nothing saved to server on any selection.


HTML 
<input type="text" id="datepicker-input-one" value="" placeholder="Start small calendar" />

called
let args={
	id:"datepicker-input-one",
	calendarSize: "small",
	theme: "light",
	start: "0"
};
const Picker = new SimpleDatePicker(args);

Default picker

Display a default theme and size calendar, all days can selected, settings set to different output values.
Note: Default outputFormat is Y-M-D, in our case we use Y/M/D


HTML
<input type="text" id="datepicker-input-two" value="" placeholder="Start today default calendar" />

called
let args2={
	id: "datepicker-input-two",
	outputFormat: "Y/M/D"
};
const Picker2 = new SimpleDatePicker(args2);

Picker with custom language

Called from complex <BUTTON>, settings is to disable Saturdays, allows to select only from 10 years in past, display language in Dutch.
Note: Default position is fixed*
Note: Any selection saved to server*

View calendar

HTML
<button class="custom-btn btn-12"><span id="datepicker-button">Click!</span><span>View calendar</span></button>

called
let args3={
	id:"datepicker-button",
	start: "10",
	end: "0",
	disable:[0],
	locale: "nl",
	theme: "dark"
};
const Picker3 = new SimpleDatePicker(args3);

Picker position absolute

Absolute position removed due mobile issues..

Called from <A> tag, position absolute*, allows to select only from 10 years in future, disable a custom day, and dark theme.
Note: Bellow we set in disable "2024-01-21" as example, currently we have set a random day to disable.

Select single day

HTML
<a id="datepickerA" class="button">Select single day</a>

called example
let args4={
	id:"datepickerA",
	position: "absolute",
	start: "0",
	end: "10",
	disable:["2024-01-21"],
	theme: "dark"
};
const Picker4 = new SimpleDatePicker(args4);

Large picker inline

Called from plain <DIV>, display calendar inline, size large, has clock, and start calendar in specific day.
Note: Default inputFormat is "M/D/Y" if you need to startAtday with different format, you must define in inputFormat the format of startAtday. 


HTML
<div id="datepicker-inline"></div>

called
let args5={
	id:"datepicker-inline",
	position: "inline",
	calendarSize: "large",
	startClock: "1",
	start: "0",
	end: "0",
	inputFormat: "Y.M.D",
	startAtday: "2024.25.08",
	outputFormat: "D-M-Y"

};
const Picker5 = new SimpleDatePicker(args5);

Installation

  • This date picker has 19.647 bytes of code, Uncompressed and Unminify!
    Can set up and run with few options and uses four extra classes where builded exclusive for those datepickers.
    query-request 2.504 bytes
    popup-message 2.736 bytes
    datepicker-clock 1.635 bytes
    datepicker-language 2.140 bytes
    All scripts have 28.662 bytes of code.
    If you use some different library (as jQuery) for Ajax requests or alert messages those classes you can easily remove them, just dirt your hands and change a bit of the code inside (which is extremely easy).
  • Add styles in HTML
    <link href="css/datepicker-single.css">
<link href="css/popup-message.css">
<link href="css/datepicker-clock.css">


    Note: For styles and JS you can combine them to one file.
    For JavaScript you have 3-4 choices
    1. Directly in HTML
      <script type="module">
import {SimpleDatePicker} from "./js/SimpleDatePicker.js";
let args={
	id:"yourid"
};
const Picker = new SimpleDatePicker(args);
</script>
    2. If you use any app.js, just import the script in your app and call it where you need.
      <script type="module" src="js/app.js"></script>
    3. Scripts are made it to support NPM, although we don’t have setup it yet.
    4. Also, if for any reason you don’t want to use as module, and you want to use them in the old way, just remove all import/export from js files and call them in HTML as any script.

Configuration

  • Settings of calendar
    1. ID:
      Id of any html tag, this is the most important key, must be unique and generates calendar based on this ID.
      For example to start a calendar in input tag you only need in html..
      <input id="hello_calendar">
      and to call
      new SimpleDatePicker({id:"hello_calendar"});
    2. locale: Set language for calendar
      DatePicker has 4 different languages. 
      "en", "el", "nl", "fr"
      Script by default looks for browser locale, if locale match in script then builds calendar with this language otherwise display calendar in English.

      If you define a specific locale then creates a calendar with this locale, i.e
      locale: "fr"
      You can easily add or remove any language in datepicker-language.js
      Read how to add or remove a languages
    3. start:
      Define in which year Start the calendar.
      Example: start: 10 calendar adds 10 years BEFORE current year.

      start: 0 start in current year and dosen’t allow to select before current day.
    4. end:
      Define in which year Ends the calendar.
      Example: end: 10 calendar adds 10 years AFTER current year.

      end: 0 ends in current year and dosen’t allow to select after current day.

      To select days only from current YEAR starting by current DAY set
      start: 0, end: 0
    5. Starting a calendar in specific date:
      By default calendar start in current day. If your need to start calendar in specific day, add startAtday with the day you wish to start this calendar.
      For example:
      startAtday: "02/22/2024"
    6. inputFormat:
      Default format is MM/DD/YYYY
      Set new input
      inputFormat: "YYYY.MM.DD"
      Note: If you set a different format in inputFormat then you MUST have same format in startAtday and / or in disable.
    7. outputFormat:
      Default output format is YYYY-MM-DD
      Set new output
      inputFormat: "Y/M/D"
      Supported formats for inputFormat and outputFormat are the following.
      "D-M-Y"
"D.M.Y"
"D/M/Y"
"M-D-Y"
"M.D.Y"
"M/D/Y"
"Y-M-D"
"Y.M.D"
"Y/M/D"
    8. disable:
      Define days to disable them from calendar.
      To disable a specific day/s set full formatted day separated by comma i.e.
      disable: ["01/22/2024", "01/23/2024"]
      To disable entire days in weeks
      set number 0 - 6 : Sunday - Saturday
      disable: [0]
      Note: For entire days must be integer
      for full days must be string
      For example, to disable a custom day and all Mondays set
      disable: [1, "10/14/2024"]
    9. position:
      Set the position of calendar, default is fixed* script automatically changes to fixed if calendar starts from inputs.
      you can chose between fixed, absolute and inline.
      fixed:* (do not confuse by name) Display a calendar in absolute position relative to ID that called, script calculate width/height of ID and sets the values left/top in calendar.
      absolute: Absolute position removed due mobile issues
      Display a calendar in absolute position relative to ID that called, without any calculation, you must set position:relative in your style sheet for this specific tag#ID.
      inline: Display a calendar directly to ID you have chosen.
      i.e set
      position: "inline"
    10. theme:
      Set the appearance of calendar
      you can chose between dark, light, default
      theme: "dark"
      For default theme you don’t need to call theme:
      Themes created in datepicker-style.css and is easy to change the appearance of calendar or to create new.
    11. calendarSize:
      Set the size of calendar, default is medium
      you can chose between small, medium and large
      calendarSize: "small"
      Note: Large calendar must set position only inline
    12. startClock: Set clock for calendar.
      ClassDatePicker comes with 2 types of clock,
      1 plain and 2 graphical, to enable plain just add
      startClock: "1"
      Note: clock 2 designed to work ONLY with large calendars, also was issue with mobile devices, need to adjust clock size in CSS.

Setup language

  • To add or remove any language is very easy, you only need two litle steps to create new language
    For example, to add language for Russian open single-datepicker-language.js and follow the next steps.
    1) In object languages, Copy object en paste bellow and rename it as ru
    2) make the necessary translation.
    That"s all! You are finish and you can use your new language!
    NOTE: We don’t support all locales, script finds the first two/three letters from locales, i.e es-EC es-ES es-GT so, to display Espanol language just add es, you can find locales in List of Locales

Save to server

  • All selected days (except calendars that builded for inputs) saved in session Storage to prevent lost date on reloads or if user go to another page and come back later.
    Calendars that NOT builded from inputs, any selection by user saved also directly to server by making POST with XMLHttpRequest
    For those actions we use query-request.js and we POST data to action.php.
    Here is some basic info of how to use the Query class
  • Create a new instance of Query
    const Ajax1 = new Query({
 url:"./path/to/file.php"
});

    Thats all, now you can use Ajax1 to POST with XMLHttpRequest, GET with fetch, OR to save/read data from sessionStorage.
  • POST
    Ajax1.post({save: data}).then(response => {
 if (response.error) {
  console.log(response.error)
 }
 if (response.success) {
  console.log(response.success)
 }
}).catch(err => console.error(err));

    NOTE: POST save, and any response must be set in file.php.
  • GET
    let V = Ajax1.encodeData({
 data:"data_1",
 data2:"data_2"
});

Ajax1.get("?"+V).then(response => {
 if (response.error) {
  console.log(esponse.error)
 };
 if (response.data) {
  console.log(response.data)
 }
}).catch(err => console.error(err));

    NOTE: GET data, and any response must be set in file.php.
  • setStorage
    Ajax1.setStorage(id, data);
  • getStorage
    Ajax1.getStorage(id);
  • removeStorage
    Ajax1.removeStorage(id OR all);
  • Note: You can use query for lot of other actions out of calendar.
    Note: Is out of scope to explain how to use action.php, is up to you what to do with posted data.

POP-UP notification message

  • This is a simply pop up message that builded for this calendar, you can also use it separate for you own messages on other apps.
  • POP-UP message has three types of notifications. and can be called in the following format
    new PopupMsg({
 msg:"msg",
 type:"type",
 pop:"where to pop",
 ok:"text for button ok",
 cancel:"text for button cancel",
 style:"class-optional"
})

    1. signal: Creates a notification that disappear after 5 seconds. Mandatory is MSG, usage is easy as
      new PopupMsg({
 msg:"your cool msg",
 type:"signal"
});

      Note: You don’t need to write signal to create a pop up signal, you can call it as
      new PopupMsg({msg:"your cool msg"});

      If you want to use a specific class for style you can call as
      new PopupMsg({
 msg:"your cool msg",
 type:"signal",
 style:"black"
});

      style changes the background of POPUP, for more info view at popup-message.css > .msgPopin.black
    2. alert: Creates a notification that disappear when user click on OK button.
      Mandatory is MSG, alert, OK button call it as
      new PopupMsg({
 msg:"msg",
 type:"alert",
 ok:"OKIE"
});
    3. confirm: Creates a notification that disappear when user click on OK button or CANCEL, call it as
      let msg = new PopupMsg({
 msg:"question msg",
 type:"confirm",
 ok:"I agree",
 cancel"Not agree"
});
msg.waitForConfirm().then(confirmed => {
if (!confirmed) {
  alert("Cancel clicked")
}else{
  alert("Agree clicked")
}
});
  • Notification POPUP by default displayed as "msgPopup"
    This covers all page, but you can set to display POPUP inside in some element, by setting a different "pop" i.e
  • Display a MSG in specific div/area, call it as
    new PopupMsg({
 msg:"your cool msg",
 type:"signal"
 pop:"specific-div-id"
});

    This will display the msg inside the specific div as "msgPopin"
    Note: the pop ID must have position:relative in style.

Download

Those scripts builded as ECMAScript classes.
Before you use them please read if you can use javascript ES6 and above.
Or read more details for ES 2016 plus.
Cherry on top, forgot older browsers like I.E, edge18, etc.

License

Free to public. Do whatever you like with those Scripts.
Dig on code and do your magic to make it better.
Or make something new for your needs.
If you use it or if you like it, spread it to world, and if you are in good mood give us a backlink!

CC0 Free to public