Created
March 29, 2018 18:49
-
-
Save navio/b6d82f43e522bf08fc31ff0a3d60634c to your computer and use it in GitHub Desktop.
JS Bin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"processors":{}} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| font-family: sans-serif; | |
| } | |
| .date-picker{ | |
| width:210px; | |
| height:100px; | |
| display:block; | |
| } | |
| .date-picker .container div{ | |
| display:inline-block; | |
| width:28px; | |
| border:1px solid black; | |
| } | |
| .controls { | |
| display:block; | |
| border:1px solid red; | |
| } | |
| .controls div{ | |
| display:inline-block; | |
| } | |
| .year{ | |
| float:right; | |
| } | |
| .present{ | |
| text-align:center; | |
| } | |
| .today{ | |
| text-color:red; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div class="date-picker"></div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const DAYS = 'Su,Mo,Tu,We,Th,Fr,Sa'.split(","); | |
| const MONTHS = '1,2,3,4,5,6,7,8,9,10,11,12'.split(","); | |
| // Utils | |
| let getDaysInMonth = (month, year)=> new Date(year, month, 0).getDate(); | |
| let getFirstDay = (month, year)=> (new Date(year, month, 1).getDay()+1); | |
| let getFirstDayName = (month, year) => DAYS[getFirstDay(month, year)]; | |
| let getBufferDays = (month, year) => Array.from({length:getFirstDay(month, year)}, (v, k) => '.'); | |
| let getCorrectMonth = (date) => date.getMonth()+1; | |
| let getMonthDays = (month,year) => Array.from({length:getDaysInMonth(month,year)}, (v, k) => k+1); | |
| let getMonthArray = (month,year) => getBufferDays(month,year).concat(getMonthDays(month,year)); | |
| // Locale | |
| let localMonthName = (date,locale="en-us") => (date).toLocaleString(locale, { month: "long" }); | |
| let localDayName = (date,locale="en-us") => (date).toLocaleString(locale, { weekday: "narrow" }); | |
| let getLocalMonthName = (Month) => localMonthName(new Date(`${Month}/01/2000`)); | |
| let getLocalMonthsArray = (months=MONTHS) => months.map(m=>getLocalMonthName(m)); | |
| // Rendering | |
| let createDays = (days) => days.map(day => `<div class="day ${(new Date()).getDay() === day ? 'today':''} day${day}">${day}</div>`); | |
| // Render Layout | |
| let renderLayout = (date) => { | |
| let currentDate = new Date(); | |
| let container = document.createElement('div'); | |
| let selector = document.createElement('div'); | |
| let wrapper = document.createElement('div'); | |
| let monthsList = getLocalMonthsArray().map((month,el) => `<option ${(currentDate.getMonth() === date.getMonth()?'selected':'')}>${month}</option>`).join(""); | |
| monthsList = `<select class="selectMonth">${monthsList}</select>`; | |
| let yearList = [date.getFullYear(),date.getFullYear()+1].map((year,el) => `<option ${(el===0?'selected':'')}>${year}</option>`).join(""); | |
| yearList = `<select class="selectYear">${yearList}</select>`; | |
| selector.classList.add('controls'); | |
| selector.innerHTML = `<div class="month">${monthsList}</div><div class="present">${localMonthName(date)}</div><div class="year">${yearList}</div>`; | |
| container.classList.add('container'); | |
| container.innerHTML = createDays(DAYS.concat(getMonthArray(date.getYear(),date.getMonth()))).join(""); | |
| wrapper.appendChild(selector); | |
| wrapper.appendChild(container); | |
| return wrapper; | |
| } | |
| let date = new Date(); | |
| let domElement = document.querySelector('.date-picker'); | |
| domElement.appendChild(renderLayout(date)); | |
| domElement.addEventListener('click',function(ev){ | |
| let target = ev.target; | |
| let month = this.querySelector('.selectMonth').value; | |
| let year = this.querySelector('.selectYear').value; | |
| if(target.matches('.day') && Number.isInteger(target.innerHTML*1)){ | |
| alert('Day Selected '+new Date(`${month}/${target.innerHTML}/${year}`)); | |
| } | |
| }); | |
| domElement.addEventListener('input',function(ev){ | |
| let target = ev.target; | |
| let dp = this; | |
| if(target.matches('.selectMonth')){let month = target.value | |
| let year = dp.querySelector('.selectYear').value; | |
| dp.innerHTML = ''; | |
| dp.appendChild(renderLayout(new Date(`${month}/01/${year}`))); | |
| } | |
| if(target.matches('.selectYear')){ | |
| console.log('year',target.value); | |
| let year = target.value; | |
| let month = dp.querySelector('.selectMonth').value;; | |
| dp.innerHTML = ''; | |
| dp.appendChild(renderLayout(new Date(`${month}/01/${year}`))); | |
| } | |
| }) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment