Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Date Picker, dynamically enable / disable dates

I’m trying to work out how to dynamically enable and disable dates using MultiDatesPicker for jQuery UI. http://luca.lauretta.info/Multiple-Dates-Picker-for-jQuery-UI/

I can use addDisabledDates and pass an array of dates to the picker, these dates will then show as disabled. That works, but how do I enable them again ?

I’ve tried amending the array of dates, and recalling the date picker, but that doesn’t seem to load the new dates.. the old dates are still showing as disabled.

This is a sample of what I’m doing:

$(document).ready(function() {
    
    addeddates = ['1 January 1970', '5 November 2024', '6 November 2024']       
    datepicker()
    
    function datepicker() {
            
        $('.cals').multiDatesPicker({
        dateFormat: "d MM yy",
        minDate: 0, // today
        maxDate: 365, // +30 days from today
        multidate: true,
        defaultDate:"0d", 
        addDisabledDates: addeddates,
        beforeShow: function(d) {
            addeddates = ['1 January 1970']     
            datepicker()
            }
        })
    }

})

When the date picker is called 5th and 6th November are disabled. I was hoping updating the addeddates array to be only one day and then recalling the function would allow them to be usable.

Is there anyway to dynamically enable / disable the dates ?
I’m open to using another date picker if it supports multiple dates and can be using on multiple input fields on the same page.

Thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've got this working using multiDatesPicker and created a fiddle here showing it working. https://jsfiddle.net/hb709gkx/

    var array = []

$('input').multiDatesPicker({
    dateFormat: "yy-mm-dd",
    multidate: true,
    beforeShow: function( a ) {
        $.each ( $('#' + a.id ).multiDatesPicker('getDates'), function( i, z )  {
            array.splice( $.inArray( z.trim() ,array ) ,1 );
        })
    },
    beforeShowDay: function (date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date );
        return [ array.indexOf(string) == -1 ]
    },

    onClose: function(u, i) {
        array = []
        $.each ( $('.mdp' ), function( i, elm )  {
            if ( $('#' + elm.id ).val().length >= 1 )  {
                vals = $('#' + elm.id ).val().split( ',' )
                if ( vals.length >= 1 )  {
                    $.each ( vals , function ( p, q ) {
                        array.push( q.trim() )
                    })
                }
            }
        })
    }
});

    This allows you to select dates in any of the date fields, they are then not available in the other date fields. When you go into a field its dates can be deselected. Seems to work OK.


  2. 0

    Looks like you have to rebuild them each time.

    https://jsfiddle.net/Twisty/om7hu4ga/60/

    JavaScript

    function buildDatePicker(target) {
  $(target).multiDatesPicker("destroy")
  $(target).multiDatesPicker({
    addDisabledDates: $("#mdp-demo-a").multiDatesPicker("getDates"),
  })
}

$("#mdp-demo-a").multiDatesPicker({
  onSelect: function (dt, ui) {
    console.log("A - Date Selected.")
    if ($("#mdp-demo-b, #mdp-demo-c").prop("disabled")) {
      $("#mdp-demo-b, #mdp-demo-c")
        .prop("disabled", false)
        .multiDatesPicker({
          addDisabledDates: $("#mdp-demo-a").multiDatesPicker("getDates"),
        })
    }
    buildDatePicker("#mdp-demo-b, #mdp-demo-c")
  },
})

    I disabled the secondary ones until the first had a value. Not doing this might throw errors about them not being initialized as MultiDatePckers or DatePicker.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search