Search code examples
javascriptx-editable

Xeditable Date input configuration to accept dates before 1970


Using x-editable JS plugin I added a new date type input in my form (Combodate (date) element), everything looks fine, but the input accepts the only date starting from 1/1/1970. I need to change this configuration because the birthdate of my customer can be previous than 1970.

Unfortunately in the x-editable documentation (link) there isn't any configuration related to the date range.

Below my HTML code (with PHP data):

<a href="#" id="dipendente-datanascita" 
    data-type="combodate" 
    data-value="<?php echo $dipendente["datanascita"]; ?>" 
    data-format="YYYY-MM-DD" 
    data-viewformat="DD/MM/YYYY" 
    data-template="DD/MM/YYYY" 
    data-pk="1" 
    data-title="Select Date of birth" 
    data-url="api/update-dipendente.php?id=<?php echo $id_dipendente; ?>"
    class="editable editable-click" style="">
    <?php echo $utility->formatDate($dipendente["datanascita"]); ?>
</a>

and the JS part:

$('#dipendente-datanascita').editable({
    prepend: "Non selezionato",
    mode: 'inline',
    inputclass: 'form-control-sm'
});

Can anyone help with this? thank you in advance.


Solution

  • The year 1970 is a configuration that can be edit changing the file bootstrap-editable.js that is part of the library (remember to also generate the minified js if the app uses it). Here an example of the configuration:

    $.fn.combodate.defaults = {
         //in this format value stored in original input
        format: 'DD-MM-YYYY HH:mm',      
        //in this format items in dropdowns are displayed
        template: 'D / MMM / YYYY   H : mm',
        //initial value, can be `new Date()`    
        value: null,                       
        minYear: 1970,
        maxYear: 2015,
        yearDescending: true,
        minuteStep: 5,
        secondStep: 1,
        firstItem: 'empty', //'name', 'empty', 'none'
        errorClass: null,
        roundTime: true, // whether to round minutes and seconds if step > 1
        smartDays: false // whether days in combo depend on selected month: 31, 30, 28
    };
    

    Change the minYear value and it will work!!