There is a form http://joxi.ru/V2VR3GvS0334N2 , where in the “Date and time” field, the Bootstrap 3 Datepicker calendar is used to select the date (link to the plugin https://eonasdan.imtqy.com/bootstrap-datetimepicker/ ). The choice of date is as follows http://joxi.ru/LmGqn7pFR339jA

The date limit is set; you can only select a date 8 days later than the current one. When choosing a time, a problem arises, if you choose a time before the date (you click on the clock first http://joxi.ru/EA4n4abhDePpMm ), then the field with the date is cleared. How to make it not clean? Is it possible to make the second option so that the user cannot choose the time until the moment he chooses the date?

The error looks like this: http://joxi.ru/KAg7BEJhgvRpbA when clicking on the timing arrow, the value in the field is cleared and time itself cannot be changed either. As I understand it, the error is related to the minDate parameter, if you comment it, it does not occur.

Code:

$('#Date').datetimepicker({ language: 'ru', format: "YYYY-MM-DD HH:00", minDate:moment().add(2, 'days') });

    1 answer 1

    I can recommend to break your field with the "date time" into two separate - with the date and time. And to each bind your DateTimePicker. I use this method:

     var pickDateInputs = function() { var inputs = $('.js-date'); if (inputs.length) { inputs.each(function() { $(this).datetimepicker({ focusOnShow: false, format: 'YYYY-MM-DD', ignoreReadonly: true, locale: 'ru' }); $(this).attr('readonly', true); }); } }; var pickTimeInputs = function() { var inputs = $('.js-time'); if (inputs.length) { inputs.each(function() { $(this).datetimepicker({ focusOnShow: false, format: 'HH:mm ZZ', ignoreReadonly: true, locale: 'ru' }); $(this).attr('readonly', true); }); } }; $(document).on('ready', function() { pickDateInputs(); pickTimeInputs(); });

    In html it is enough to specify the class .js-date or .js-time for the input field:

     <input type="text" name="created_at_date" class="js-date"/> <input type="text" name="created_at_time" class="js-time"/>

    Please note that the input fields are text. The script will tie to them a deadpeaker or a teapicker depending on the class.

    The readonly: true attribute ensures that the field itself is not available for specifying the date and time from the keyboard. This is a useful hack for touchscreen devices, because otherwise, when displaying a calendar on them, the standard on-screen keyboard of the device will inevitably pop up.

    This method will definitely solve your second problem with time, as the timekeeper will be independent of the datepicker, and the date constraint will no longer affect it. And, probably, the method will solve also the first problem, due to readonly fields.

    • And how can you solve the problem with time in one field? - inviziblll
    • Is there any problem with time in one field? Did not quite understand the question. - Vitaliy Emelyantsev
    • Yes, there is a problem with time, it is necessary that the date and time be in the same field and the second condition - the minimum selection date should differ from the current one by 8 days. And here a bug arises, if the user clicks on the calendar and before choosing the date, first of all he starts clicking on the clock, the “Date and time” field is cleared, perhaps because the script perceives its action as an error, because the date has not been selected yet and there it is substituted The current date. For me, this is a problem, since after this another plug-in that checks the fields takes the “Date and time” field as empty. - inviziblll
    • Why not divide the time by date and time, and not show them in two separate fields? This will require adding a bit of logic to the back end, but the costs will pay off. - Vitaly Emelyantsev
    • In two separate fields it is impossible, the customer needs in one. If only the option that there can be 2 buttons the first one calls up the calendar of dates and the second calendar of time, but the value is substituted into one field. - inviziblll