{"id":18624372,"url":"https://github.com/crazychicken/t-datepicker","last_synced_at":"2025-04-11T03:32:17.360Z","repository":{"id":95878539,"uuid":"135990721","full_name":"crazychicken/t-datepicker","owner":"crazychicken","description":"Date range picker, two-pane calendar with custom rendering and multiple selection. The tDatepicker more than 35 pretty options and many methods help you change date, getDate, update when you need.","archived":false,"fork":false,"pushed_at":"2018-12-09T16:22:37.000Z","size":193,"stargazers_count":49,"open_issues_count":24,"forks_count":17,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-25T09:02:31.038Z","etag":null,"topics":["autoclose","calendar","calendars","crazychicken","datepicker","datepicker-timeline","daterangepicker","daterangepickerinangular","getqwerty","holidays","hotel-datepicker","range","range-picker","range-query","t-datepicker","tuds","two-calendar"],"latest_commit_sha":null,"homepage":"https://t-datepicker.getqwerty.com/","language":"JavaScript","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/crazychicken.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-06-04T07:58:19.000Z","updated_at":"2025-02-16T13:51:22.000Z","dependencies_parsed_at":"2024-02-17T08:33:47.161Z","dependency_job_id":null,"html_url":"https://github.com/crazychicken/t-datepicker","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/crazychicken%2Ft-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazychicken%2Ft-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazychicken%2Ft-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crazychicken%2Ft-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crazychicken","download_url":"https://codeload.github.com/crazychicken/t-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248335547,"owners_count":21086614,"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":["autoclose","calendar","calendars","crazychicken","datepicker","datepicker-timeline","daterangepicker","daterangepickerinangular","getqwerty","holidays","hotel-datepicker","range","range-picker","range-query","t-datepicker","tuds","two-calendar"],"created_at":"2024-11-07T04:28:36.947Z","updated_at":"2025-04-11T03:32:16.463Z","avatar_url":"https://github.com/crazychicken.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# t-datepicker\n![enter image description here](https://t-datepicker.getqwerty.com/theme/images/about-themes.png)\n\njQuery-based date picker! This date picker provides an easy way of creating both single and multi-viewed calendars capable of accepting single, range, and multiple selected dates. Easy to style, with many example styles.\n\nt-datepicker is a responsive, flexible, elegant, themeable, highly-configurable data range picker written in JavaScript (jQuery) and CSS(SASS).\n\nSuitable for hotel app that enables the users to quickly select check-in and check-out dates in a convenient calendar popup.\n\n[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]\n\n![enter image description here](https://t-datepicker.getqwerty.com/theme/images/about-t-datepicker.png)\n\n## Quick start t-datepicker\n* Clone the repo: `git clone git@github.com:crazychicken/t-datepicker.git`\n* Install with npm: `npm install --save-dev t-datepicker`\n* Install with npm: `npm install --save-dev crazychicken/t-datepicker`\n* Or download the [latest release](https://github.com/crazychicken/t-datepicker/archive/master.zip)\n\n## Demos\nhttps://t-datepicker.getqwerty.com/demos.html\nhttps://t-datepicker.getqwerty.com/demo-only-calendar.html\n\n## Documentation\nhttps://t-datepicker.getqwerty.com/documents.html\n\n## Options\nhttps://t-datepicker.getqwerty.com/options.html\n## Events\nhttps://t-datepicker.getqwerty.com/events.html\n## Methods\nhttps://t-datepicker.getqwerty.com/methods.html\n\n## How to use\n\n* First, include CSS files into your HTML head:\n```html\n\u003clink rel=\"stylesheet\" href=\"public/theme/css/t-datepicker.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"public/theme/css/theme/t-datepicker-main.css\"\u003e\n```\n\n* Include file `t-datepicker.min.js` into the footer.\n```html\n\u003cscript src=\"your-part/jquery.min.js\"\u003e\u003c/script\u003e // ~1.9.2\n\u003cscript src=\"public/theme/js/t-datepicker.min.js\"\u003e\u003c/script\u003e\n```\n\n* Set HTML\n```html\n\u003cdiv class=\"t-datepicker\"\u003e\n  \u003cdiv class=\"t-check-in\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"t-check-out\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Call global the function\n```html\n\u003cscript type=\"text/javascript\"\u003e\n  $(document).ready(function(){\n    $('.t-datepicker').tDatePicker({\n      // options here\n    });\n  });\n\u003c/script\u003e\n```\n\n* If you want use two different calendar, you just insert the new class.\n\n```html\n\u003cdiv class=\"t-datepicker class_a\"\u003e\n  \u003cdiv class=\"t-check-in\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"t-check-out\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"t-datepicker class_b\"\u003e\n  \u003cdiv class=\"t-check-in\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"t-check-out\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Call only the function\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n  $(document).ready(function(){\n    // Call global the function\n    $('.t-datepicker').tDatePicker({\n      // options here\n    });\n    $('.class_a').tDatePicker({\n      // options only here\n    });\n    $('.class_b').tDatePicker({\n      // options only here\n    });\n  });\n\u003c/script\u003e\n```\n\n## Call only picker\n\n* You need add class .t-picker-only include .t-check-in.\n\n```html\n\u003cdiv class=\"t-datepicker\"\u003e\n  \u003cdiv class=\"t-check-in t-picker-only\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n* Now call the tDatePicker initializer function and your tDatePicker is ready. [View Demo](https://t-datepicker.getqwerty.com/demo-only-calendar.html)\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n  $(document).ready(function(){\n    $('.t-datepicker').tDatePicker({\n      autoClose: true,\n      limitNextMonth: 3,\n      numCalendar : 1,\n      dateRangesHover: false\n    });\n  });\n\u003c/script\u003e\n```\n\n## You can choose more themes color:\n* t-datepicker-blue.css\n* t-datepicker-bluegrey.css\n* t-datepicker-cyan.css\n* t-datepicker-green.css\n* t-datepicker-lime.css\n* t-datepicker-main.css\n* t-datepicker-orange.css\n* t-datepicker-purple.css\n* t-datepicker-teal.css\n* t-datepicker-yellow.css\n\n## Options\n\n// Action\n* autoClose\n* durationArrowTop\n* valiDation\n\n// Format\n* formatDate\n\n// Date\n* dateCheckIn\n* dateCheckOut\n* startDate\n* endDate\n* limitPrevMonth\n* limitNextMonth\n* limitDateRanges\n* fnDataEvent\n* mergeDataEvent\n* showFullDateRanges\n\n// Theme\n* numCalendar\n* titleCheckIn\n* titleCheckOut\n* titleDateRange\n* titleDateRanges\n* titleToday\n* titleDays\n* titleMonths\n* titleMonthsLimitShow\n* replaceTitleMonths\n* showDateTheme\n\n// Icons\n* iconArrowTop\n* iconDate\n* arrowPrev\n* arrowNext\n\n// Active date\n* toDayShowTitle\n* dateRangesShowTitle\n* dateRangesHover\n* toDayHighlighted\n* nextDayHighlighted\n* daysOfWeekHighlighted\n* dateDisabled\n\n## Tree\n```\npublic/\n  └── theme/\n      └── css/\n      |   └── t-datepicker.min.css\n      |   └── themes/\n      |        └── t-datepicker-main.css\n      |        └── more themes\n      └── js/\n          └── t-datepicker.min.js\nsass/\n  ├── // Themes Color\n  └── t-datepicker-v1.0.0.scss // @import 'path sass file your project';\n```\n\n## Template full feature list\n\n* Semantically Correct / Valid HTML Code\n* HTML5, CSS3\n* Javascript / JS6\n* Full project and seed project (build with: Gulp, Sass, Javascript, Npm, Babel, Webpack)\n* Cross browser compatible ( Internet Explorer 10+, Firefox, Safari, Opera, Chrome etc. )\n* W3C Valid source code, properly formatted and commented\n* Animations CSS3\n\n## Creators\n\n#### Tuds - Crazychicken (CLGT Groups)\n* website:  http://getqwerty.com/\n* Github:   https://github.com/crazychicken/t-datepicker\n* Facebook: https://www.facebook.com/tudscss/\n* Youtube:  https://www.youtube.com/channel/UCDACe-7BFGDucQoxTDfPotw\n* Twtter:   https://twitter.com/mtu_truong\n\n\n[downloads-image]: https://img.shields.io/npm/dm/t-datepicker.svg\n[npm-url]: https://www.npmjs.com/package/t-datepicker\n[npm-image]: https://img.shields.io/npm/v/t-datepicker.svg\n\n\n## Copyright and license\n\nCode and documentation copyright 2018, MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazychicken%2Ft-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrazychicken%2Ft-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrazychicken%2Ft-datepicker/lists"}