CODEWITHSUNDEEP
jquerydatepicker
rubberchicken
rubberchicken

Reputation: 1322

jquery datepicker range disable field

I have 2 input fields. One is for a datepicker range and the other is for datepicker month only. I want the month input field (also month datepicker) to become disabled if a user selects a date range... ive tried many things and tried searching but no luck.. maybe someone can turn me in the right direction..

in simple terms... if someone selects 1st input field (#daterange) then I want the 2nd input field (#monthselect) to be disabled and i want datepicker disabled on #monthselect

thanks

jquery datepicker:

new Picker.Date.Range($$('input[id="daterange"]'), {
        timePicker: false,
        columns: 2,
        format: '%Y/%m/%d',
        positionOffset: {x: 0, y: 0},
        onSelect: function(date){
        $('#monthselect').attr("disabled",true);
        }
    });

new Picker.Date($$('input[id="monthselect"]'), {
    positionOffset: {x: 0, y: 0},
    pickOnly: 'years',
    pickOnly: 'months',
    format: '%Y/%m',
    useFadeInOut: !Browser.ie
    });

my input fields:

<input type="text" name="daterange" id="daterange" style="width: 200px">

<input type="text" name="monthselect" id="monthselect">

This works for me (Thanks Andrew Donald Johnson):

new Picker.Date.Range($$('#daterange'), {
        timePicker: false,
        columns: 2,
        format: '%Y/%m/%d',
        positionOffset: {x: 0, y: 0},
        onSelect: function(date){
        document.getElementById("monthselect").disabled = true;     
        }
    });

Upvotes: 0

Views: 785

Answers (2)

Andrew Johnson
Andrew Johnson

Reputation: 446

This code should help you!

var data_01 = document.getElementById("daterange");
data_01.onchange = function () {
   if (this.value != "") {
      document.getElementById("monthselect").disabled = true;
   }
}

Upvotes: 1

Sam Battat
Sam Battat

Reputation: 5745

Based on the discussion in the comments, here is what you asked for

$('#daterange').datepicker({
        timePicker: false,
        columns: 2,
        format: '%Y/%m/%d',
        positionOffset: {x: 0, y: 0},
        onSelect: function(date){
        $('#monthselect').attr("disabled",true);
        }
    });

$('#monthselect').datepicker({
    positionOffset: {x: 0, y: 0},
    pickOnly: 'years',
    pickOnly: 'months',
    format: '%Y/%m',
    //useFadeInOut: !Browser.ie
    });

http://jsfiddle.net/pdhb9/1/

Upvotes: 2

Related Questions