Jquery datepicker make only 1 day selectable and copy date +x days in next input

Question

I am trying to make the Jquery-UI datepicker have only 1 date available per month, which is the 1st of every month, when selected the selected date + X days, should be copied into another text input field.

Additionally, the value of days to be added changes with what has been selected in the dropdown.

Fiddle what I have so far: http://jsfiddle.net/8y4Bf/

Code from fiddle:

Html

<div>
    <label>Select an Option:</label>
    <select id="select1">
        <option value="" disabled="disabled" selected="selected">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>
<br /><br />
<div>
    <label>Start Date:</label>
    <input type="text" id="startdate" />
    <br /><br />
    <label>End Date:</label>
    <input type="text" id="enddate" />
</div>

Jquery

$('#select1').change(function() {


    $('#startdate, #enddate').val("");


    if ($('#select1').val() == '1') {


        $('#startdate').datepicker({
            showButtonPanel: true,
            closeText: 'Close',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdate') {

                    // Parameters 1 day only & also copy result into enddate + 5 days
                }
            }
        });
    }

     else if ($('#select1').val() == '2') {


        $('#startdate').datepicker({
            showButtonPanel: true,
            closeText: 'Close',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdate') {

                   // Parameters 1 day only & also copy result into enddate + 7 days
                }
            }

            });

     }

});

I have read the documentation at http://jqueryui.com/datepicker/#min-max but can't figure out how do I make only the 1st of every month available.

And do I have to fetch the value of #startdate again, add the days and then paste it into #enddate or is that value saved somewhere so I can go from there ?

Answer 1

Tested and working!

• I have changed the logic of your jsfiddle.

• Just to know, in order to achieve what you need, datepicker must implement beforeShowDay function to override the days that will be displayed in the component, then the selected date must be converted into a Date object type to easily add 5 or 7 days (doing the right way because, for example, If you want to select the last day of each month that can be 30 or 31 plus 5 or 7 days, if you do it manually, you will get 36 or 38 and not a date in the other month and also there are many other possibilities - but this is not your case, I am just explaining).

• I also improved the code, take a look:

  Live demo: http://jsfiddle.net/oscarj24/q27EG/2/

jQuery code:

$(function() {

    var extraDays = 0;
    var combobox = $('#select1');
    var txtStartDate = $('#startdate');
    var txtEndDate = $('#enddate');
    var inputs = txtStartDate.add(txtEndDate);

    combobox.on('change', function() {

        inputs.val('');

        var val = $(this).val();
        if(val == 1) extraDays = 5;
        if(val == 2) extraDays = 7;

        txtStartDate.datepicker({
            showButtonPanel: true,
            closeText: 'Close',
            dateFormat: 'mm/dd/yy',
            beforeShowDay: function(date) {

                /* Check for the first day */
                if (date.getDate() == 1) { return [true, '']; } 
                else { return [false, '', 'Unavailable']; }
            },
            onSelect: function(selected) {

                /* Add extra days to the date according to 'combobox' selection */
                var endDate = new Date(selected);
                endDate.setDate(endDate.getDate() + extraDays);

                var m = pad(endDate.getMonth() + 1, 2);
                var d = pad(endDate.getDate(), 2);
                var y = endDate.getFullYear();
                var endDateStr = [m, d, y].join('/');

                txtEndDate.val(endDateStr);
            }
        });

    });

});

/* This function just adds a zero to get this format: "01, 02, etc" in a number less than 10 */
function pad(number, length) {
    var str = '' + number;
    while (str.length < length) { str = '0' + str; }
    return str;
};