{"id":14973179,"url":"https://github.com/amirkabirdataminers/adm-datetimepicker","last_synced_at":"2025-04-05T03:12:55.519Z","repository":{"id":40344783,"uuid":"47855051","full_name":"AmirkabirDataMiners/ADM-dateTimePicker","owner":"AmirkabirDataMiners","description":"Pure AngularJs dateTimePicker","archived":false,"fork":false,"pushed_at":"2020-11-02T22:25:09.000Z","size":1014,"stargazers_count":244,"open_issues_count":73,"forks_count":92,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-05T03:12:48.200Z","etag":null,"topics":["adm","adm-datetimepicker","adm-dtp","angularjs","datepicker","datetimepicker","gregorian-calendar","jalali-calendar","persian-calendar"],"latest_commit_sha":null,"homepage":"http://amirkabirdataminers.github.io/ADM-dateTimePicker","language":"CSS","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/AmirkabirDataMiners.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-11T22:53:50.000Z","updated_at":"2024-06-17T10:19:31.000Z","dependencies_parsed_at":"2022-08-09T17:41:19.124Z","dependency_job_id":null,"html_url":"https://github.com/AmirkabirDataMiners/ADM-dateTimePicker","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/AmirkabirDataMiners%2FADM-dateTimePicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmirkabirDataMiners%2FADM-dateTimePicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmirkabirDataMiners%2FADM-dateTimePicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmirkabirDataMiners%2FADM-dateTimePicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AmirkabirDataMiners","download_url":"https://codeload.github.com/AmirkabirDataMiners/ADM-dateTimePicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280272,"owners_count":20912967,"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":["adm","adm-datetimepicker","adm-dtp","angularjs","datepicker","datetimepicker","gregorian-calendar","jalali-calendar","persian-calendar"],"created_at":"2024-09-24T13:48:16.877Z","updated_at":"2025-04-05T03:12:55.502Z","avatar_url":"https://github.com/AmirkabirDataMiners.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ADM-dateTimePicker  \n![Version](https://img.shields.io/badge/npm-v1.2.0-brightgreen.svg)\n\u0026nbsp;\n![Version](https://img.shields.io/badge/bower-v1.2.0-brightgreen.svg)\n\u0026nbsp;\n![AngularJs](https://img.shields.io/badge/Pure-AngularJs-red.svg)\n\u0026nbsp;\n![License MIT](http://img.shields.io/badge/License-MIT-lightgrey.svg?style=flat)\n\n*Pure AngularJs Gregorian and Jalali smart dateTimePicker by [ADM | Amirkabir Data Miners](https://adm-co.net)*\n\n![ADM-dateTimePicker cover](http://amirkabirdataminers.github.io/ADM-dateTimePicker/images/cover.jpg)\n\n### Updates in V1.2.0\n* Now popup is appending to body instead of main element to fix some overflow \u0026 z-index issues\n* Add translate option. so days \u0026 months names are no more constants\n* Add option to watch options for changes\n* Add option to set start day of week. (setting Monday instead of Sunday for some calendars in Europe)\n* Add option to set minutes step\n* Now popup will close by hitting tab\n* Add ng-required support\n* Fix the bug that causes high cpu usage on Safari\n* Fix removeIcon bug\n\n### Updates in V1.1.9\n* Rediuce stylesheet size by 70%\n* Fix unused font dependency\n\n### Updates in V1.1.6\n* Fix bug for converting Gregorian dates after 2017/1/1\n* Prevent today button from posting form\n* Fix datePicker input stucking by pasting date\n\n### Updates in V1.1.0\n* Remove all other dependencies. (Bootstrap, Glyphicon, Fonts)\n* Add month and year quick select.\n* Date format is now fully customize with any combination of YYYY, YY, MM, DD, hh, mm.\n* Add custom input template option inside directive.\n* Add option to freeze input to prevent user from changing text.\n* Add option to hide time from dateTimePicker.\n* Add option to auto select current day, by puting 'today' in default parameter.\n* Fix bugs on IE9.\n\n---\n\n### Demo  \nSee ADMdtp live [HERE](https://amirkabirdataminers.github.io/ADM-dateTimePicker).\n\n---\n\n### Implementation steps\n\n#### Step 1: Install ADM-dateTimePicker\n````javascript\nnpm install adm-dtp\nbower install adm-dtp\n````\n#### Step 2: Include the files in your app\n```html\n\u003c!doctype html\u003e\n\u003chtml ng-app=\"myApp\"\u003e\n    \u003chead\u003e\n        \u003clink rel=\"stylesheet\" href=\"css/ADM-dateTimePicker.css\" /\u003e\n        \u003cscript src=\"js/angular.min.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"js/ADM-dateTimePicker.min.js\"\u003e\u003c/script\u003e\n        ...\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n#### Step 3: Inject the ADM-dateTimePicker module\n```javascript\nvar app = angular.module('myApp', ['ADM-dateTimePicker']);\n```\n#### Step 4: Add the adm-dtp directive to a DOM element\n```html\n\u003cadm-dtp ng-model='date'\u003e\u003c/adm-dtp\u003e\n```\n---\n### Options\n#### Set options for entire of app\n```javascript\napp.config(['ADMdtpProvider', function(ADMdtp) {\n    ADMdtp.setOptions({\n        calType: 'gregorian',\n        format: 'YYYY/MM/DD hh:mm',\n        default: 'today',\n        ...\n    });\n}]);\n```\n#### Set options for each directive\n```html\n\u003c!-- pass options from controller --\u003e\n\u003cadm-dtp ng-model='date1' options='date1_options'\u003e\u003c/adm-dtp\u003e\n\u003c!-- or write them inline --\u003e\n\u003cadm-dtp ng-model='date2' options='{calType: \"jalali\", format: \"YYYY/MM/DD\", default: 1450197600000}'\u003e\u003c/adm-dtp\u003e\n```\n#### Quick look\nName  |\tType  |\tDefault |\tDescription\n------------- | ------------- | ------------- | -------------\nwatchingOptions | Boolean | false | Whether watch options for changes or not\"\ncalType | String | 'gregorian' | 'gregorian' \u0026 'jalali' are available\ndtpType\t| String | 'date\u0026time' | 'date\u0026time' \u0026 'date' are available. (expect 'time' in next version)\ndefault | Number, String, Date | -- | Initial date can be Number(UNIX), String or Date and also word 'today' for auto set current date\ndisabled | Array | -- | Disable specific days with format of String, Date and UNIX, or days with pattern of 'i+[NUM]' and '[NUM]d+[NUM]\nfreezeInput | Boolean | false | Freeze input to prevent user changing text\nsmartDisabling | Boolean | true | Whether change Sunday from Gregorian calendar to Friday in Jalali calendar by switching calendar type or not\nformat | String | 'YYYY/MM/DD hh:mm' | Any combination of YYYY, YY, MM, DD, hh, mm. (e.g. YY/MM/DD, MM-DD (hh:mm))\nmultiple | Boolean | true | Whether user can change calendar type or not\nautoClose | Boolean | false | Closing ADMdtp on selecting a day\ntransition | Boolean | true | Transition on loading days\ngregorianStartDay | Number | 0 | 0 for Sunday, 1 for Monday, ...\nminuteStep | Number | 1 | Each step for increasing or decreasing minutes\ngregorianDic | Object | __ see on examples __ | Changing title, monthsNames, daysNames and todayBtn for Gregorian Calendar\njalaliDic | Object | __ see on examples __ | Changing title, monthsNames, daysNames and todayBtn for Jalali Calendar\nzIndex | Number | 9 | z-index of datePicker popup\n---\n### Custom input template\nYou can put custom input template inside `\u003cadm-dtp\u003e\u003c/adm-dtp\u003e` but with unwanted limits.\n```html\n\u003c!-- all optional actions --\u003e\n\u003cadm-dtp ng-model='date' full-data='date_details'\u003e\n    \u003c!-- fully access to 'date' and 'date_details' parameters --\u003e\n\n    \u003c!-- input is optional too, but must use in this format --\u003e\n    \u003cinput type='text' ng-model='date' dtp-input /\u003e\n\n    \u003c!-- attributes name are important, not tags name --\u003e\n    \u003cbutton dtp-open \u003e Open calendar \u003c/button\u003e\n    \u003cbutton dtp-close \u003e Close calendar \u003c/button\u003e\n    \u003cbutton dtp-toggle \u003e Toggle calendar \u003c/button\u003e\n    \u003cbutton dtp-destroy \u003e Destroy calendar \u003c/button\u003e\n\u003c/adm-dtp\u003e\n```\n---\n### Disabling days\n#### Disable specific days\n```html\n\u003c!-- it accept both unix and string date --\u003e\n\u003cadm-dtp ng-model=\"date\" options=\"disabled:['2016/1/20', 1453408200000]\"\u003e\u003c/adm-dtp\u003e\n```\n#### Disable with pattern\nCurrently two types of patterns are availble:\n* Days in a week: `i+[NUM]`\n    * `i` -\u003e will disable all Sundays in Gregorain calendar or Saturdays in Jalali calendars\n    * `i+6` -\u003e will disable all Saturdays in Gregorain calendar or Fridays in Jalali calendars\n    * ...\n* Days in a month: `[NUM]d+[NUM]`\n    * `d+1` -\u003e will disable the second day of all months\n    * `2d` -\u003e will disable the even days of all months\n    * `2d+1` -\u003e will disable the odd days of all months\n    * ...\n\n##### Inverse disabling:\nputting **Exclamation mark (!)** at the begining of the pattern will inverse disabling pattern:\n* `!i+6` -\u003e just Saturdays in Gregorain calendar or Fridays in Jalali calendars are available\n* `!2d+1` -\u003e it's exactly like `2d`\n\n##### Combine patterns:\npatterns of the same type can be combine with **Ampersand (\u0026)**. \nmention that `['2d+1', '7d']` and `['2d+1\u00267d']` are equal, but `['!2d+1', '!7d']` and `['!2d+1\u00267d']` are completely differents. \n\n##### Smart disabling:\n`i` in Gregorian calendar will disable Sundays (weekend) that is equal to Fridays (weekend) in Jalali calendar.  \noption `smartDisabling: true` change Sunday from Gregorian calendar to Friday in Jalali calendar by switching calendar type,  \nbut `smartDisabling: false` makes no different. \n```html\n\u003cadm-dtp ng-model='date' options=\"disabled:['2016/1/20', '!i\u0026i+1', '15d+2']\"\u003e\u003c/adm-dtp\u003e\n```\n---\n### Full data\nBeside ngModel you can access to date full details throw `full-data` attribute.\n```html\n\u003cadm-dtp ng-model=\"date\" full-data=\"date_details\"\u003e\u003c/adm-dtp\u003e\n```\n`date_details` contains following parameters:\n```javascript\n{\n    formated: \"2015/12/15\",\n    gDate: 2015-12-15T16:40:00.000Z,\n    //gDate is Date format of selected date in Gregorian calendar\n    unix: 1450197600000,\n    year: 2015,\n    month: 12,\n    day: 15,\n    hour: 20,\n    minute: 10,\n    minDate: null,\n    maxDate: null,\n    calType: \"gregorian\",\n    format: \"YYYY/MM/DD\"\n}\n```\n---\n### Smart range picker\n#### Static limitation\n```html\n\u003c!-- mindate \u0026 maxdate accept both unix and string date --\u003e\n\u003cadm-dtp ng-model=\"date\" options=\"{default:'2015/12/15'}\" mindate=\"1449866902553\" maxdate=\"'2015/12/18'\"\u003e\u003c/adm-dtp\u003e\n```\n#### Dynamic limitation\nNo need to destroy datepickers anymore!\n```html\n\u003cadm-dtp ng-model=\"date1\" full-data=\"date1_detail\" maxdate=\"{{date2_detail.unix}}\"\u003e\u003c/adm-dtp\u003e\n\u003cadm-dtp ng-model=\"date2\" full-data=\"date2_detail\" mindate=\"{{date1_detail.unix}}\"\u003e\u003c/adm-dtp\u003e\n\u003cadm-dtp ng-model=\"date3\" mindate=\"{{date1_detail.unix}}\" maxdate=\"{{date2_detail.unix}}\"\u003e\u003c/adm-dtp\u003e\n```\n---\n### Disabling ADMdtp\n```html\n\u003c!-- disable permanently --\u003e\n\u003cadm-dtp ng-model='date' disable='true'\u003e\u003c/adm-dtp\u003e\n\n\u003c!-- disable dynamicly --\u003e\n\u003cadm-dtp ng-model='date1' \u003e\u003c/adm-dtp\u003e\n\u003cadm-dtp ng-model='date2' disable='{{!date1}}'\u003e\u003c/adm-dtp\u003e\n```\n---\n### Dictionary\n```javascript\n{\n    calType:'gregorian', \n    multiple:false,\n    gregorianDic: {\n        title: 'Grégorien',\n        monthsNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],\n        daysNames: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],\n        todayBtn: \"Aujourd'hui\"\n    }\n}\n```\n---\n### Gregorian Start Day\n```html\n\u003c!-- \n    0 -\u003e Sunday\n    1 -\u003e Monday\n    ...\n    6 -\u003e Satudary\n--\u003e\n\u003cadm-dtp ng-model='date' options='{gregorianStartDay: 1}'\u003e\u003c/adm-dtp\u003e\n```\n---\n### Events\n#### Show / Hide\n```html\n\u003cadm-dtp ng-model=\"date\" on-open=\"open()\"\u003e\u003c/adm-dtp\u003e\n\u003cadm-dtp ng-model=\"date\" on-close=\"close()\"\u003e\u003c/adm-dtp\u003e\n```\n#### Change / Select\n```html\n\u003c!-- Note 1: you can access to the selected date full details in below functions --\u003e\n\u003c!-- Note 2: functions names are optional but input name must be 'date' --\u003e\n\n\u003c!-- event on any change occurs on input --\u003e\n\u003cadm-dtp ng-model=\"date\" on-change=\"change(date)\"\u003e\u003c/adm-dtp\u003e\n\u003c!-- event on selecting a day --\u003e\n\u003cadm-dtp ng-model=\"date\" on-datechange=\"dateChanged(date)\"\u003e\u003c/adm-dtp\u003e\n\u003c!-- event on changing the time --\u003e\n\u003cadm-dtp ng-model=\"date\" on-datechange=\"timeChanged(date)\"\u003e\u003c/adm-dtp\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famirkabirdataminers%2Fadm-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famirkabirdataminers%2Fadm-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famirkabirdataminers%2Fadm-datetimepicker/lists"}