2

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.

Community
  • 1
  • 1
adam rowe
  • 446
  • 1
  • 5
  • 15
  • 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 Mar 07 '16 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 Mar 07 '16 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 Mar 07 '16 at 16:54
  • When a date is selected, I want to use data that's associated with that date with js. – adam rowe Mar 07 '16 at 16:57
  • @adamrowe This will not be possible to do *as the calendar is created*. The class is added using 'beforeShow`, which is similar to `onSelect`, but it still requires user interaction, or an event to trigger the function. – Twisty Mar 07 '16 at 16:59
  • @adamrowe using `.date()` for this will not be a good way to go. We need more information about what you're trying to accomplish to be able to help. – Twisty Mar 07 '16 at 17:00
  • 2
    @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 Mar 07 '16 at 17:01

1 Answers1

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.

Twisty
  • 30,304
  • 2
  • 26
  • 45