bevacqua / rome

:calendar: Customizable date (and time) picker. Opt-in UI, no jQuery!
https://bevacqua.github.io/rome
MIT License
2.91k stars 223 forks source link

set id dynamically #170

Closed janokary closed 8 years ago

janokary commented 8 years ago

Hi, how do I set id dynamically? Something like

const later_date_id = 'later_date-'+this.id;
rome(
    later_date_id, {
            "appendTo": 'parent',
            "id": later_date_id,
            "inputFormat": 'YYYY-MM-DD',
            "time": false,
            "min": moment()
            }
);
ghost commented 8 years ago

I was trying to do this as well with multiple input fields on a single page. You have write it out to the document after the page loads.

in jquery:

$(document).ready(function () {
    const later_date_id = 'later_date-'+this.id;
    $('body').append("<script>rome(" + later_date_id + ")<\/script>");
});

Here's my code for initiating it on a class selector:

$(document).ready(function () {
    $('.rome).each(function () {
        var id = $(this).attr('id');
        $('body').append("<script>rome(" + id + ")<\/script>");
    });
});

I don't like this approach, but it works. I wish it were just: rome('.selector')

bevacqua commented 8 years ago

Guys, you're abusing a bad browser feature. Please pass DOM elements to rome, don't rely on window[id]

janokary commented 8 years ago

I don't like this approach either. @bevacqua, is there an other way to go about it? what I get now is an Uncaught TypeError: o.appendTo.appendChild is not a function On

function init (initOptions) {
    ...
    o.appendTo.appendChild(container);
   ...
ghost commented 8 years ago

@janokary I've found out you have to use document.getElementById() to get DOM elements.

My code ended up being:

$('.rome').each(function () {
    var id = $(this).attr('id');
    var el = document.getElementById(id);
    rome(el);
});
ghost commented 8 years ago

@kn21, why not use the this which jQuery automatically sets to the DOM element? Haven't tested, but should work the same:

$('.rome').each(function(){
    rome( this );
});
janokary commented 8 years ago

Yes, @kn21 this works fine. @erwinw I don't use jquery but I guess this should also work Thanks guys.

rizqinizamil commented 5 years ago

I don't use jQuery either.

var dateTimePicker = document.querySelectorAll('.datetimepicker');
for (var i = 0; i < dateTimePicker.length; i++){
    rome(dateTimePicker[i],{
        timeInterval: 900,
    inputFormat: 'ddd, MMMM Do YYYY - h:mm:ss a'
    });
}