Smopp_v2/asusg_dayplan.php

<?php
$str = "select * from asusg_dayplan where company=$companyID and day >= cast((now() - interval 0 day) as date)";
$query = mysqli_query($link, $str);
while ($res = mysqli_fetch_object($query))
{
    $dayplans[] = $res;
}
?>
<form onsubmit="return false;">
    <div class="activity">
        <input type="text" id="datepicker" value="Выберите дату">

        <input type="hidden" id="company" value="<?= $companyID ?>">
        <input id="loco_number" type="number" min="1" placeholder="Номер локомотива">
        <input id="priority" type="number" min="0" placeholder="Приоритет (целое число)">
        <select id="letter">
            <option><Выберите букву секции></option>
            <option value="А">А</option>
            <option value="Б">Б</option>
            <option value="В">В</option>
        </select>
        <button id="add">Добавить</button>
    </div>
    <div class="dayplans">
        <select name="letter[]" id="letters" multiple>
            <?php foreach ($dayplans as $plan): ?>
                <option value="<?= $plan->id ?>"><?php echo "Номер локомотива: $plan->loco_num; Дата: $plan->day Буква: $plan->letter Приоритет: $plan->priority" ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <button id="clear">Очистить план на сегодня</button>
    <button id="clearall">Очистить всё</button>
</form>
<div id="content"></div>
<script type="application/javascript">
    $(document).ready(function() {
        //Инициализация datapicker
        $('#datepicker').datetimepicker({
            format: 'Y-m-d',
            lang: 'ru',
            timepicker: false
        });

        $('#clear').on('click', function() {
            var dict = new Object();
            dict[ 'dayplan_clear' ] = 1;
            sendAjax('content', dict, Reload, "loco_response.php");
        });

        $('#clearall').on('click', function() {
            var dict = new Object();
            dict[ 'dayplan_clear_all' ] = 1;
            sendAjax('content', dict, Reload, "loco_response.php");
        });

        $('#add').on('click', function() {
            $('.loader').css('display', 'inline-block');
            $.ajax({
                type: 'GET',
                url: 'loco_response.php',
                data: {
                    dayplan: 1,
                    date: $('#datepicker').val(),
                    letter: $('#letter').val(),
                    loco_number: $('#loco_number').val(),
                    company: $('#company').val(),
                    priority: $('#priority').val()
                },
                success: function (data) {
                    $('#content').html(data);
                    $('.loader').css('display', 'none');
                     window.location.reload();

                }
            });
        });
    });


</script>
<link rel="stylesheet" href="css/preloader.css">
<style type="text/css">
    .main_content {
        overflow: unset;
    }
    form {
        display: flex;
    }
    .activity, .positions {
        border: 1px solid #aaa;
        border-radius: 5px;
        padding: 10px;
        margin: 5px;
        position: relative;
    }
    .activity input, .activity select, .activity button {
        margin: 5px;
    }
    .activity button {
        display: block;
        margin: 7px auto 0;
    }
    .loader {
        left: 137px;
        bottom: 42px;
        margin: 0;
    }
    #positions {
        float: left;
        margin: 0;
    }
    .positions button {
        display: block;
    }
    .buttons {
        display: inline-block;
    }
    #draw-positions {
        margin-left: 10px;
    }
    .print {
        margin: 0 auto;
    }
    @-moz-document url-prefix() {
        .print {
            left: 160px;
        }
    }
    @media print {
        .lc, .top_nav, form, .generate {
            display: none;
        }
        .main_content {
            top: 0;
            left: 30px;
            padding-top: 0;
        }
    }
</style>