add data attribute to jquery ui datepicker on initialization

Question

I am initializing jquery ui's datepicker as follows:

var datesArray=['3/7/2016','3/12/2016']
$('#datepicker').datepicker({
    inline: true,
    beforeShowDay: function (date) {
        var theday = (date.getMonth()+1) +'/'+ 
            date.getDate()+ '/' + 
            date.getFullYear();
        return [true,$.inArray(theday, datesArray) >=0 ? "specialDate":''];
    }
});

This creates the calendar with the class specialDate applied to all dates in datesArray.

Additionally, I need to add a unique data attribute value (something like data-value="39") to these same dates on initialization of the datepicker, but I am not sure how to select the dates.

I can use something like

var datavalues = {
    "3/7/2016" : "38",
    "3/12/2016" : "39"
};

where 38 and 39 are the data-values.

This question about adding a custom parameter gets me close, but I'm not sure exactly how to use this to just add the data attributes on creation.

There's no out-of-the-box way to do this. The shortest way would be to use onChangeMonthYear, but it would still be pretty cumbersome and/or fragile. What're you trying to achieve? I'm fairly sure there're better ways than constantly binding and unbinding data — blgt
– blgt, Commented Mar 7, 2016 at 16:30
@blgt remember, though, I'm basically trying to populate the calendar with a datalayer. I'm sure I can do some goofy thing immediately after creating the calendar, but I'd much rather add the data attributes as the calendar is created, sort of like how that class is being applied. — adam rowe
– adam rowe, Commented Mar 7, 2016 at 16:37
That's a re-statement of the question. Could you provide more details about what you're trying to achieve with the additional data? (also, relevant info could be edited into the question instead of a comment, for the better formatting) — blgt
– blgt, Commented Mar 7, 2016 at 16:54
When a date is selected, I want to use data that's associated with that date with js. — adam rowe
– adam rowe, Commented Mar 7, 2016 at 16:57
@adamrowe You could bind the full [date-data] array against the relevant input and use onSelect to pick the one you need, when you need it. Or not bother binding it at all, just keep it as an in-memory variable — blgt
– blgt, Commented Mar 7, 2016 at 17:01

Twisty · Accepted Answer · 2016-03-07 17:14:46Z

1

You won't be able to do this with .data() or as a data attribute when the datepicker is created. You can use onSelect like so:

Working Example: https://jsfiddle.net/ha5zgvby/

HTML

<p>Date:
  <input type="text" id="datepicker" />
</p>
<p>Stuff:
  <input type="text" id="special" />
</p>

JQuery

var datavalues = {
  "03/07/2016": "38",
  "03/12/2016": "39"
};
$(function() {
  var $result = $("#special");
  $('#datepicker').datepicker({
    inline: true,
    onSelect: function(dt, obj) {
      $result.val(datavalues[dt]);
    },
    altField: "#result"
  });
});

When a date is picked, the function is passed the value that is selected. If that value is in your Object as an Index, then you can make use of it in some way.

answered Mar 7, 2016 at 17:14

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pathik Vejani Over a year ago

@Twisty.. How can i display count of any number in datepicker's date?

Twisty Over a year ago

@PathikVejani Not sure I understand the question. Do you mean show a count of days between a range of two dates?

Pathik Vejani Over a year ago

@Twisty see this my qtn: stackoverflow.com/questions/36625021/…

Collectives™ on Stack Overflow

add data attribute to jquery ui datepicker on initialization

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related