I don't know how to set up javascript that integrates calendar with pulldown.

I am an amateur in my first year of web design.
I would appreciate it if you could reply.

an answer.

I'm currently creating a calendar function that works with pulldown, but it doesn't work.

The desired display is
·Click the calendar icon to display the calendar.
·Clicking on the calendar date also changes the pull-down.

Click on the calendar icon and the part that the calendar displays worked.

At first, I created the pulldown separately by year, month, and day, and at that time, I was able to display it in conjunction with
If you try to integrate the year with the month, the year pull-down does not change.
It shows that the number of months is included in the day.

Please refer to the
Integrate https://beanb.wordpress.com/2014/10/29/ form with calendar (pulldown)/
http://www.tabikobo.com/
I referred to two things.

If you write a brief description of the calendar part,
[HTML]

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../js/jquery-ui.min.js">/script>
<script src="../js/script.js"></script>
</head>

<body>
    <ddid="date" class="form-inline-fix calendar">

        <div class="sp-block">
            <select id="year_month" class="form-control w-s">
                <option value=""> None specified </option>
            </select><span>Month>/span>

            <select id="day" class="form-control w-s">
                <option value=""> None specified </option>
            </select><span>day>/span>
            <input type="hidden" name="value="/>
        </div>
    </dd>
</body>

[JS]

// Below is the schedule pulldown and calendar
function updateSelected(date){
    console.log(date);
    $('#year_month') .val(date.substring(0,4)+'-'+date.substring(5,7));
    $('#day').val(date.substring(8,10));
}
$(function(){

    var myD = new Date();
    var myYear=myD.getFullYear();
    var myMonth=myD.getMonth()+1;
    for(i=myMonth;i<=12;i++){
        var val = myYear+'-'+('00'+i).slice(-2);
        varhtml=myYear+'Year'+('00'+i).slices(-2)+'Month';
        $('#year_month') .append($('<option/>').val(val).html(html));
    }
    var myYear=myYear+1;
    for(i=1;i<=myMonth;i++){
        var val = myYear+'-'+('00'+i).slice(-2);
        varhtml=myYear+'Year'+('00'+i).slices(-2)+'Month';
        $('#year_month') .append($('<option/>').val(val).html(html));
    }
    // Generate a number from 1 to 31
    for(vari=1;i<=31;i++){
        if(i<10){
            i = '0' + i;
        }
        $('#day').append($('<option/>').val(i).html(i));
    }

    // Update pulldown from calendar
    $('.calender').each(function(){
        varid='#'+$(this).attr('id');
        $(id+'input').bind('change', function(){
            vari = 0;
            var dates=$(this).val().split('/');
            $(id+'select').each(function(){
            var year = dates [0];
                $(this).val(dates[i]);
                i++;
            });
        });
    });

    // Update calendar from pulldown
    $('.calender').each(function(){
        varid='#'+$(this).attr('id');
        $(id+'select').bind('change', function(){
            vari = 1;
            dates = new Array(3);
            $(id+'select').each(function(){
                dates[i] = $(this).val();
                i++;
            });
            var newdate = dates[0]+'/'+ dates[1]+'/'+ dates[2];
            $(id+'input').val(newdate);
        });
    });

    // View Calendar
    var date = new Date();
    var year=date.getFullYear();
    $.datepicker.setDefaults({
        showOn: 'button',
        buttonText:',
        // buttonImage: '.../img/calender.jpg',
        // buttonImageOnly: false,
        closeText: 'Close',
        prevText: 'Previous',
        nextText: 'Next',
        currentText: 'Today',
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
                     'July', 'August', 'September', 'October', 'November', 'December',
        monthNamesShort: ['January', 'February', 'March', 'April', 'May', 'June',
                          'July', 'August', 'September', 'October', 'November', 'December',
        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
        dayNamesShort: ['Sun', 'Mon', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sat',
        dayNamesMin: ['Sun', 'Mon', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sat',
        weekHeader: 'Week',
        dateFormat: 'yy/mm/dd',
        firstDay: 0,
        isRTL —false,
        showMonthAfterYear: true,
        yearSuffix: 'Year',
        minDate —new Date (year, 1-1, 1),
        maxDate —new Date (year+1,12-1,31)
    });
    $('.calender input').datepicker();

    //$('#ui-datepicker-div').hide();
});

It is shaped like this

I think it's a JS configuration problem, but I don't know why.

Can someone please teach me?

javascript html5

2022-09-30 19:46

1 Answers

If you correct the following two parts, there will be no problem

[JS]

// Update pulldown from calendar
$('.calender').each(function(){
    varid='#'+$(this).attr('id');
    $(id+'input').bind('change', function(){
        vari = 0;
        var dates=$(this).val().split('/');
        $(id+'select')[0].value=dates[0]+'-'+dates[1];
        $(id+'select')[1].value=dates[2];
    });
});

// Update calendar from pulldown
$('.calender').each(function(){
    varid='#'+$(this).attr('id');
    $(id+'select').bind('change', function(){
        vari = 0;
        dates = new Array(2);
        $(id+'select').each(function(){
            dates[i] = $(this).val();
            i++;
        });
        var newdate = dates[0].replace('-', '/')+'/'+ dates[1];
        $(id+'input').val(newdate);
    });
});

Results after modification:

// Below is the schedule pulldown and calendar
function updateSelected(date){
    console.log(date);
    $('#year_month') .val(date.substring(0,4)+'-'+date.substring(5,7));
    $('#day').val(date.substring(8,10));
}
$(function(){

    var myD = new Date();
    var myYear=myD.getFullYear();
    var myMonth=myD.getMonth()+1;
    for(i=myMonth;i<=12;i++){
        var val = myYear+'-'+('00'+i).slice(-2);
        varhtml=myYear+'Year'+('00'+i).slices(-2)+'Month';
        $('#year_month') .append($('<option/>').val(val).html(html));
    }
    var myYear=myYear+1;
    for(i=1;i<=myMonth;i++){
        var val = myYear+'-'+('00'+i).slice(-2);
        varhtml=myYear+'Year'+('00'+i).slices(-2)+'Month';
        $('#year_month') .append($('<option/>').val(val).html(html));
    }
    // Generate a number from 1 to 31
    for(vari=1;i<=31;i++){
        if(i<10){
            i = '0' + i;
        }
        $('#day').append($('<option/>').val(i).html(i));
    }

    // Update pulldown from calendar
    $('.calender').each(function(){
        varid='#'+$(this).attr('id');
        $(id+'input').bind('change', function(){
            vari = 0;
            var dates=$(this).val().split('/');
            $(id+'select')[0].value=dates[0]+'-'+dates[1];
			$(id+'select')[1].value=dates[2];
        });
    });

    // Update calendar from pulldown
    $('.calender').each(function(){
        varid='#'+$(this).attr('id');
        $(id+'select').bind('change', function(){
            vari = 0;
            dates = new Array(2);
            $(id+'select').each(function(){
                dates[i] = $(this).val();
                i++;
            });
            var newdate = dates[0].replace('-', '/')+'/'+ dates[1];
            $(id+'input').val(newdate);
        });
    });

    // View Calendar
    var date = new Date();
    var year=date.getFullYear();
    $.datepicker.setDefaults({
        showOn: 'button',
        buttonText: '○',
        // buttonImage: '.../img/calender.jpg',
        // buttonImageOnly: false,
        closeText: 'Close',
        prevText: 'Previous',
        nextText: 'Next',
        currentText: 'Today',
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
                     'July', 'August', 'September', 'October', 'November', 'December',
        monthNamesShort: ['January', 'February', 'March', 'April', 'May', 'June',
                          'July', 'August', 'September', 'October', 'November', 'December',
        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
        dayNamesShort: ['Sun', 'Mon', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sat',
        dayNamesMin: ['Sun', 'Mon', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sat',
        weekHeader: 'Week',
        dateFormat: 'yy/mm/dd',
        firstDay: 0,
        isRTL —false,
        showMonthAfterYear: true,
        yearSuffix: 'Year',
        minDate —new Date (year, 1-1, 1),
        maxDate —new Date (year+1,12-1,31)
    });
    $('.calender input').datepicker();

    $('#ui-datepicker-div').hide();
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">/script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">/script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"media="all"/>
</head>

<body>
    <ddid="date" class="form-inline-fix calendar">

        <div class="sp-block">
            <select id="year_month" class="form-control w-s">
                <option value=""> None specified </option>
            </select><span>Month>/span>

            <select id="day" class="form-control w-s">
                <option value=""> None specified </option>
            </select><span>day>/span>
            <input type="hidden" name="value="/>
        </div>
    </dd>


</body>

</html>

2022-09-30 19:46

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656