t1m0n/air-datepicker

Adding custom data attributes to air-datepicker-cell

alexbogias opened this issue · 7 comments

alexbogias commented

Can you please add the option to add more data attributes to air-datepicker-cell element like data-year data-month etc. I need to add bootstrap 5 tooltip

t1m0n commented

Hello @alexbogias! You could use onRenderCell option to add custom html elements.

new AirDatepicker('#el', {
  onRenderCell({ date, cellType }) {
    if (cellType === "day") {
      return {
        html: `<div data-custom-attribute='tooltip' class="air-datepicker--cell-inner">${date.getDate()}</div>`
      };
    }
  }
})

In this case add some custom styling to stretch inner content of the cells:

.air-datepicker--cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
alexbogias commented

I tried this already but it kills the select option :
image

t1m0n commented

oops) Seems like a bug.

  • 😄1
alexbogias commented

Great job @t1m0n. Waiting for the release...

t1m0n commented

@alexbogias new version is released! Thank you for the suggestion and bug report!

  • 🎉1
alexbogias commented

Refactored in my project and works great @t1m0n !
My thing is now that I have to trigger tooltip initialization after onRenderCell event.

I found out that I have to trigger this bootstrap tooltip init function to run after onChangeViewDate and onShow with 500ms timeouts because the onRenderCell rendering needs some time I suppose...

Is there any hook that I don't know after onRenderCell, so I can trigger it and tooltip and show up faster?
(PS, Sorry for my English!)

alexbogias commented

Also, a funny bug is that it adds and trigger tooltips on other month's cell which I got them disabled with showOtherMonths: false
image

PS, I successfully solve this by adding and if (!datepicker.isOtherMonth(date)) before adding extra atts in onRenderCell