{"id":18074402,"url":"https://github.com/headwinds/daterangepicker","last_synced_at":"2025-04-12T05:53:04.797Z","repository":{"id":23871267,"uuid":"27249980","full_name":"headwinds/daterangepicker","owner":"headwinds","description":"date range picker like the one from google analytics using momentjs and jquery","archived":false,"fork":false,"pushed_at":"2018-11-19T16:25:56.000Z","size":4629,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T05:52:57.025Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Clojure","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/headwinds.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":"2014-11-28T03:17:01.000Z","updated_at":"2020-01-06T06:44:41.000Z","dependencies_parsed_at":"2022-08-22T06:30:14.899Z","dependency_job_id":null,"html_url":"https://github.com/headwinds/daterangepicker","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/headwinds%2Fdaterangepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headwinds%2Fdaterangepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headwinds%2Fdaterangepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headwinds%2Fdaterangepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/headwinds","download_url":"https://codeload.github.com/headwinds/daterangepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525156,"owners_count":21118616,"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-10-31T10:12:31.133Z","updated_at":"2025-04-12T05:53:04.776Z","avatar_url":"https://github.com/headwinds.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RANGER: Date Ranger Picker\n\n## Clojurescript \u0026 Javascript Version\n\n![headwinds datepicker](ranger.png)\n\nI have a request to use a date range picker again and since the current native input control that relies on [datetime-local doesn't support date format](https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format) (or at least at the time of writing this) and I want to use Material UI with ClojureScript, I'll attempt to update this project and experiment with Javascript interop to produce a much more flexible date control that can accept different date formats.\n\n```\ncd ranger\nlein figwheel\n```\n\nOpen your browser to: http://0.0.0.0:5000\n\n[demo](https://ranger.now.sh)\n\nI'm also experimenting with a date \u0026 time picker in this [material-ui \u0026 starwars project](https://reagent-reframe-material.now.sh/#/demos/pickers). It's in a docker and may take some time to boot up.\n\n## Original Javascript Version\n\n![headwinds datepicker](daterangepicker.png)\n\n[demo](https://daterangepicker-jvonlbfvls.now.sh/original-plain-js/datepicker)\n\nThe original-plain-js folder was created in 2015 contains mainly plain javascript involving jquery \u0026 moment. Simply navigate to this original-plain-js folder and open the datepicker.html file in a browser like Chrome.\n\nThis was written well before components and es6 classes so there is no one element. The controller talks many elements on the provided html page. It has all the raw pieces to be ported into a modern component though.\n\n### Initialization\n\nThere is a init function (line 163) in DateRangeViewController which is called as soon as the script loads. You will see init() fire near the end of this file. Init initializes everything.\n\n### Why did I build it?\n\nI was tasked to create a date range picker that mirrored the behavoir found in the Google Analytics date range picker.\n\nI started with the code base from [Justin Stern](http://foxrunsoftware.github.com/DatePicker/) since it was mostly jquery and I knew that I could fairly easily port it to Angular or Backbone once it has stabilized.\n\nI decided to leverage momentjs to deal with dates and build custom ranges which [Dan Grossman](http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/) did in this example.\n\nThis date range picker can support:\n\n- user selected 1 day\n- user selected \u0026 pre-selected 2 dates for a base range\n- user selected \u0026 pre-selected 4 dates for a base vs range.\n\n### CSS\n\nThe CSS is generated from SCSS and Compass. I recommend using [Codekit](https://incident57.com/codekit/) for managing SCSS and Compass projects.\n\n### Log\n\nNov 18/2018\n\n- begun port to ClojureScript\n\nAug 29/2017  \n _ tossed out what I know and decided to learn something new  \n _ tried prettier and did light design concepting around the day and activity components  \n \\* exploring [Typescript, JSPM and observables](https://github.com/piotrwitek/react-redux-typescript-starter-kit)\n\nAug 28/2017  \n \\* Started with what I know [create-react-app-redux](https://github.com/notrab/create-react-app-redux)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheadwinds%2Fdaterangepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheadwinds%2Fdaterangepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheadwinds%2Fdaterangepicker/lists"}