{"id":21891399,"url":"https://github.com/pitpik/tinydatepicker","last_synced_at":"2025-03-22T03:14:25.127Z","repository":{"id":141376242,"uuid":"63334592","full_name":"PitPik/tinyDatePicker","owner":"PitPik","description":"NEW: Tiny javascript and jQuery date / time picker [datepicker]","archived":false,"fork":false,"pushed_at":"2018-05-12T00:59:17.000Z","size":220,"stargazers_count":57,"open_issues_count":6,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-26T21:56:29.286Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.dematte.at/tinyDatePicker/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PitPik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-14T12:27:02.000Z","updated_at":"2024-02-21T11:42:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"389ea035-3b37-4ef2-9507-d780e353126a","html_url":"https://github.com/PitPik/tinyDatePicker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FtinyDatePicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FtinyDatePicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FtinyDatePicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2FtinyDatePicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PitPik","download_url":"https://codeload.github.com/PitPik/tinyDatePicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898458,"owners_count":20528341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T12:35:18.839Z","updated_at":"2025-03-22T03:14:25.108Z","avatar_url":"https://github.com/PitPik.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# tinyDatePicker and calendar\n\nThis 5KB (gZip; 12.5KB minified) small date/time picker provides a lot of hooks for developers to write calendars, agendas, booking systems, plugins, etc. This is not only a picker but a set of modules that can be used to build a date/agenda based app. The flexibility of this tool makes integration of bootstrap or other frameworks easy.\n\n##Demo\nSee **demos** at:\n\n - [dematte.at/tinyDatePicker](http://dematte.at/tinyDatePicker)\n - or a clean version at [dematte.at/tinyDatePicker/themes/naked](http://dematte.at/tinyDatePicker/themes/naked)\n - extended clean version in white [dematte.at/tinyDatePicker/themes/white](http://dematte.at/tinyDatePicker/themes/white)\n\n## Usage\n\n```javascript\n\u003cscript type=\"text/javascript\" src=\"jqDatePicker.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    $('.date').datePicker([options]); // that's it\n\u003c/script\u003e\n```\n```jqDatePicker.min.js``` (the jQuery version) holds all necessary files such as calendar.js, datePicker.js and jqDatePicker.js. So, it is not needed to include anything else than this file (except some CSS that makes your datePicker look nice).\u003cbr\u003e\nIf you need to debug things for development, you can also use ```calendar.js```, the month/week rendering module, ```datePicker.js```, the javascript UI and picker module and ```jqDatePicker.js```, the jQuery wrapper separately.\n```javascript\n\u003cscript type=\"text/javascript\" src=\"calendar.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"datePicker.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"jqDatePicker.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    $('.date').datePicker([options]);\n\u003c/script\u003e\n```\nIf you don't want a jQuery dependency just use ```datePicker.min.js``` (the javascript version):\n```javascript\n\u003cscript type=\"text/javascript\" src=\"datePicker.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    var myDates = new DatePicker('.date', [options]); // first arg. can also be ElementCollection/Array or $()\n\u003c/script\u003e\n```\nor for debugging:\n```javascript\n\u003cscript type=\"text/javascript\" src=\"calendar.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"datePicker.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    var myDates = new DatePicker('.date', [options]); // first arg. can also be ElementCollection/Array or $()\n\u003c/script\u003e\n```\n```datePicker.js``` doesn't render anything or installs event listeners for the UI and doesn't initialize Caledar until you first use it (focusing / clicking an input field) to save memory and keep markup as small as possible.\n\nThe standard date/time formats datePicker works with is: 'YYYY-MM-DD HH:MM:SS AM' whereas -DD is optional if no time is set and :SS, AP/PM and the time as such is also optional. It is possible to only set the time though too. Then datePicker works as a time picker only. See also demo on how to use data attributes in input fields to pick up some options from there.\n\nSee the Demos at ```/demo/index.html``` or [dematte.at/tinyDatePicker](http://dematte.at/tinyDatePicker) for more examples on how ```calendar.js``` and ```datePicker.js``` can be used. You can also build a whole agenda app with only a fiew options added...\n\n## Themes\ncalendar and datePicker are, because of their options, very flexible in how to render markup so that it is very easy to change the look and feel and the grade of information you want to provide in your calendars. Changing from a table-based month view to a div-based view (see month.js) is that easy and you're also free in chooseing, changing and adding your own class names and markup.\n\nThe CSS in the demo is not very useful (quick and dirty), so you might want to make your own anyhow. (demo/month.css holds some rendering of the common month rendering incl. events etc., demo/datePicker.css is the CSS for the UI of datePicker excluding the months). I prepared a simple, unstyled version in ./naked/index.html (including CSS and days-of-week rendering) to show you a clean starting point for your styling.\n\nSo, feel free to participate and create some nice themes and let me know where they are: I'll publish the links to your work right here.\n\n - See \"white\" simple demo at ./themes/white/index.html or [dematte.at/tinyDatePicker/themes/white/](http://dematte.at/tinyDatePicker/themes/white/)\n\n## AMD / CommonJS wrapper\ntinyDatePicker supports AMD and CommonJS import in all, the minified versions and the single files (```calendar.js```, ```datePicker.js``` and ```jqDatePicker.js```).\n\n```javascript\n// example for requirejs configuration\nrequirejs.config({\n    baseUrl: 'scripts',\n    paths: {\n        jquery: 'lib/jquery-2.2.1.min'\n    },\n    shim: {\n        'datePicker': {\n            deps: [ 'jquery' ],\n            exports: 'jQuery.fn.datePicker'\n        }\n    }\n});\n\n// then use tinyDatePicker in your module...\n(function (root, factory) {\n    if (typeof define === 'function' \u0026\u0026 define.amd) {\n        define(['jquery', 'jqDatePicker'], function (jQuery) {\n            return factory(root, jQuery);\n        });\n    } else {\n        factory(root, root.jQuery);\n    }\n}(this, function(window, $){\n    $('.date').datePicker(options);\n}));\n```\n\n\n## jqDatePicker.js\n\n```jqDatePicker.js``` is a jQuery plugin (actually just a wrapper for ```datePicker.js```) and uses an instance of Calendar (from ```calendar.js```) for rendering months and weeks. It passes the options to that instance, so some values might be the same when inspecting...\n\n```javascript\n$('.date').datePicker({\n    // the datePicker options\n    useCache: false, // disables calendar's cash for use with ranges\n    closeOnSelect: true // weather the picker auto closes after picking a date or not\n    elements: '.date', // the selector for the input fields using datePicker\n    body: document.body, // element the picker should be depended on\n    pickerAttribute: 'data-picker', // attribute used for internal date transfer\n    datePickerClass: 'date-picker', // class name of the datePicker wrapper\n    selectedDayClass: 'selected-day', // class name for date representing the value of input field\n    disabledClass: 'disabled', // class name for disabled events\n    initCallback: function(elements) {}, // callback used right after datePicker is instantiated (no calendar available)\n    // the following callbacks hold standard routines that can be overwritten\n    renderCallback: function(container, element, toggled) {}, // every time the picker gets toggled or redrawn (by UI action)\n    renderValue: function(container, element, value) {}, // when date is picked, the value needs to be transferred to input\n    readValue: function(element) {}, // when toggling the datePicker, this will pick up the value of the input field\n    header: 'some HTML', // the HTML rendered before the display of the month. The following strings will be replaced:\n        // {{disable-prev}}, {{prev}}, {{disable-next}}, {{next}}, {{day}}, {{month}}, {{months}}, {{year}}, {{years}}\n        // look at the code (original option HTML) and it's clear what all those placeholders mean\n    nextLabel: 'Next month', // text written instead of {{next}}\n    prevLabel: 'Previous month', // text written instead of {{prev}}\n    minDate: '1969-01-01', // standard minimal displayable date\n    maxDate: '2050-12-31', // standard maximal displayable date\n    minDateAttribute: 'data-mindate', // attribute that could hold minimal displayable date data\n    maxDateAttribute: 'data-maxdate', // attribute that could hold maximal displayable date data\n    // classes for event listeners (click)\n    nextButtonClass: 'dp-next', // next month button class name\n    prevButtonClass: 'dp-prev', // previous month button class name\n    selectYearClass: 'dp-select-year', // select year element class name\n    selectMonthClass: 'dp-select-month', // select month element class name\n    footer:'some HTML', // the HTML rendered after the display of the month. The following strings will be replaced:\n        // {{hour}}, {{hours}}, {{minute}}, {{minutes}}, {{second}}, {{seconds}}, {{am-pm}}, {{am-pms}}\n    timeFormat: '', // can be HH:MM:SS AM, HH:MM AM, HH:MM:SS or HH:MM \n    timeFormatAttribute:'data-timeformat', // attribute holding the timeFormat information if different from standard\n    doAMPM: false, // switch for standard AM / PM rendering\n    minuteSteps: 5, // steps of minutes displayed as options in {{minutes}}\n    secondSteps: 10, // steps of seconds displayed as options in {{seconds}}\n    AMPM: ['AM', 'PM'], // rendered strings in picker options and input fields\n    // classes for event listeners (change of selects)\n    selectHourClass: 'dp-select-hour', // class name of select for hours\n    selectMinuteClass: 'dp-select-minute', // class name of select for minutes\n    selectSecondClass: 'dp-select-second', // class name of select for seconds\n    selectAMPMClass: 'dp-select-am-pm', // class name of select for AM/PM\n    rangeStartAttribute: 'data-from', // attribute holding the name of the other input in a range collective (either rangeEndAttribute or name attribute)\n    rangeEndAttribute: 'data-to' // attribute holding the name of the other input in a range collective\n\n    // the Calendar options\n    picker: {}, // reference to instance of datePicker\n    sundayBased: true, // renders weeks starting with Monday or Sunday\n    renderWeekNo: false, // enables / disables rendering of week numbers\n    renderDaysOfWeek: true, // depends also on template.start. {{days}} has to be returned as well\n    equalHight: false, // renders extra days in next month to keep heights (row count) of all months the same\n    useCache: true, // month that has been rendered will be cached on never be calculated again (also events)\n    months: ['Jan', ...], // array of strings of all months in a year\n    weekDays: ['Su', ...], // array of strings of week days\n    workingDays: [1, 2, 3, 4, 5], // Date() based; 0 = Sun; others will be signed as week-end\n    events: [], // see below for more information,\n    template: { // holds all template based elements:\n        start: function() {return '\u003ctable class=\"cal-month\"\u003e{{days}}\u003ctbody\u003e\u003ctr\u003e'}, // callback that returns the HTML needed for the beginning of a month. {{days}} will be replaced by days of week HTML (if enabled)\n        daysOfWeekStart: '\u003cthead\u003e\u003ctr\u003e',\n        daysOfWeek: '\u003cth class=\"day-of-week\"\u003e{{day}}\u003c/th\u003e',\n        daysOfWeekEnd: '\u003c/tr\u003e\u003c/thead\u003e',\n        daysOfWeekHead: '',\n        colGlue: '\u003c/tr\u003e\u003ctr\u003e', // HTML for connecting every week (row)\n        weekNo: '\u003ctd class=\"\"\u003e{{day}}\u003c/td\u003e', // HTML used to render a week number\n        row: '\u003ctd class=\"\"\u003e{{day}}\u003c/td\u003e', // HTML used to render a regular day\n        end: function() {return '\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e'}, // callback that returns the HTML needed for the end of a month\n        today: _noop, // callback that returns the HTML for replacing {{today}} in template.row\n        day: _noop, // callback that returns the HTML needed for replacing {{day-event}} in template.row\n        event: _noop, // callback that returns the HTML needed for replacing {{event}} in template.row\n    },\n    todayClass: 'today', // class name for the current day\n    weekEndClass: 'week-end', // class name for week-end day\n    prevMonthClass: 'previous-month', // class name for day in previous month\n    nextMonthClass: 'next-month', // class name for day in next month\n    currentMonthClass: 'current-month', // class name for day in current month\n    weekNoClass: 'week-no' // class name for week numbers\n});\n```\n\n## The rendering engine of Calendar\ndatePicker's power lies in its flexibility. It might seem a little complicated but if you got the idea, you'll love it.\n\nin calendar.js you have all the options for rendereing seperated in ```options.template```. ```Calendar``` loops through all the days and replaces some placeholders in template strings, defined in several other options, with every day. Most replacements are done by the return value of a function (```start```, ```end```, ```today```, ```day```, ```event``` (where ```this``` is the instance and scope of the function)) and the others are strings that can hold placeholders that then are replaced (```weekNo```, ```row```). ```colGlue``` is the HTML used to end a row (in case you're using tables).\n\nThe placeholders ```{{year}}}```, ```{{month}}```, ```{{day}}``` are the simple replacements (only numbers) and ```{{day-event}}```,  ```{{today}}``` and ```{{event}}``` get replaced by the callbackFunction's return value (\n```day()```, ```today()``` and ```event()```). So, ```row``` and ```weekNo``` are the most important options for every-day-rendering. They hold the most placeholders. (In your callBack functions you can certainly define your own placeholders that can be replaced somewhere else...)\n\nFor example: In the default options you'll find:\n```javascript\nrow: '\u003ctd class=\"\"\u003e{{day}}\u003c/td\u003e'\n```\nSo with every day, ```{{day}}``` gets replaced by the number of the day. That's it. It's also handy to define the attribute ```class=\"\"``` inside this template string (```row``` or ```weekNo```) as it will automatically be filled with the class names you defined earlier in your options (```todayClass```, ```weekEndClass``` (reverse defined by options.workingDays), ```prevMonthClass```, ```nextMonthClass```, ```currentMonthClass```, ```weekNoClass```)\n\nHere is a more complex example:\n```javascript\nrow: '\u003ctd class=\"\"{{event}}\u003e{{day}}\u003c/td\u003e',\nevent: function(day, date, event) {\n    return ' data-events=\"true\"';\n}\n```\nLet's assume it's June 12th, so in this case, if there where an event defined in ```options.events``` for that specific day, the rendering engine would output the following:\n```HTML\n\u003ctd class=\"current-month event\" data-events=\"true\"\u003e12\u003c/td\u003e\n```\n\n```start()```, ```end()``` and ```today()``` are a bit special callbacks as they get rendered only once (if at all, as today might not exist in current displayed month...). You might have guessed already, ```start()``` gets only rendered at the beginning, ```end()``` only at the end of the HTML rendering and ```today()``` only if the current rendered day is actually today.\n\nIn the demo page you can see how I use ```start()``` to render the days of the week ('Mo, Tu, We, ...) in a ```\u003cthead\u003e```. By defining ```options.template.start``` you have to keep in mind that you're actually overwriting the default callback, so the default rendering doesn't happen any more (The same for ```initCallback```, ```renderCallback```, ```renderValue``` and ```readValue```, the callBack functions of ```datePicker.js``` you'll hear about later on).\n\nThe rendering in ```datePicker()``` works with the same idea: ```options.header``` and ```options.footer``` can be replaced by some other markup and placeholders like ```{{prev}}``` etc. will be replaced the same way (see default HTML with its placeholders and replaced HTML in browser and you'll see the logic behind, it's quite straight forward)\n\n## datePicker.js\n```datePicker.js``` works the same way as ```jqDatePicker.js```. It's the javascript only version and has the same options. Only the initialization works differently (See **Usage**)\n\n## Methods\n\n#### datePicker.js\n\n```destroy()```: removes all event listeners, detaches the markup from the document and removes some variables.\n\n```toggle(on[, element])```: toggles the datePicker on its last trigger or on element; true = on\n\n#### calendar.js\n\n```addEvent(event, id)```: Adds an event to the list of events and automatically converts the dates to the internal format. See format of events below (**Some tips**). ```id``` marks the events for easy removal later on. Doesn't necessarily be unique.\n\n```removeEvent(id)```: Removes above described events marked by the id attribute.\n\n```getMonth(year, month, week)```: Returns markup described by the template options from a given year / month. If optional week is set (relative to month) you'll only get this week.\n\n```getWeekNumber(date)```: Returns the number of the week described by ISO 8601. ```date``` can be a date object, a number as milliseconds or a string that converts to a date if passed to ```Date```.\n\n```convertDateString(string, end)```: Receives a string ```string```like 'YYYY-MM-DD HH:MM:SS' where the time is optional. ```end``` is a boolean that adds ```23:59:59``` to the date to make it the very end of the day. Returns a date in milliseconds.\n\nSee the following section or the demos on how the callbacks work and what you can do with them...\n\n#### Some tips\n**Callbacks** from **datePicker.js**\n\nAll callbacks deliver ```this``` as a reference to the instance of **DatePicker()**\n\n```initCallback: function(elements) {}``` Is called right after DatePicker() is initialized. Calendar() is not available yet. elements is the list of all elements (for example ```$('.date')```) that are listening to the click or focus events.\n\n```renderCallback: function(container, element, toggled) {}``` Is called every time the picker gets visible, hidden or redrawn. ```toggled``` is true if the picker was just toggled on or off. To determine if it was turned on or off you can read the attribute ```this.isOpen```. ```toggled``` is ```undefined``` when callback gets called on resize.\nIf you define your own function and still want the default action to happen (positioning, hideing), return a ```true``` or the ```element``` the picker should be positioned to, or return falsy value if you do your own stuff and want to prevent default behaviour (maybe you need to position above, aside, ...).\n\n```renderValue: function(container, element, value) {}``` Is a method that gets called when the user clicked on a date on the picker. It gives you access to the ```container```, the picker UI, ```element```, the current input field and ```value```, the choosen value in the format ```YYYY-MM-DD HH:MM:SS AM``` where as -DD, :SS and AM are optional.\nIf you define your own function and still want the default action to happen, return a ```true``` or the ```element``` the value should be passed to. Otherwhise nothing will happen unless you wrote it in your own code.\n\n```readValue: function(element) {}``` Method called when the picker opens and picks up the value where as ```element``` is the input field that was focused. Return your own value if not from default input field.\n\nOther **Callbacks** from **calendar.js**\n\n```calendar.js``` has some callbacks in its templating engine to return a string that replaces a certain string in the template or get called in the beginning or end of the rendering.\n\n```start: function() {}```, gets called befor the month/week gets rendered. Use this, for example to render the start of a table...\n\n```end: function() {}```, Same as above, just at the end of the rendering.\n\n```today: function() {}```, replaces {{today}} in your ```row``` template\n\n```day: function() {}```, replaces {{day-event}} in your ```row``` template\n\n```event: function() {}```, replaces {{event}} in your ```row``` template\n\nAll callbacks are called in the context of ```this```, the instance of its constructor. So, inspect the instance to discover some more helpful properties of the model such as ```date```, the rendered date, ```currentDate``` the value of the current input field, ```currentInput``` and ```currentPartner```, the input field and a possible connected input field for ranges, etc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitpik%2Ftinydatepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpitpik%2Ftinydatepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitpik%2Ftinydatepicker/lists"}