aConic Admin Documentation - v1.0

Version - 1.0.0 Help

Datepicker (Flatpickr)

Flatpickr is a lightweight and powerful datetime picker.
Flatpickr documentation

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

                            
    <link rel="stylesheet" href="../node_modules/flatpickr/dist/flatpickr.min.css"> 
                        

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                            
    <script src="../node_modules/flatpickr/dist/flatpickr.min.js"></script> 
                        

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                            
    <script>
        // INITIALIZATION OF Datepicker 
        flatpickr(".js-flatpickr", {});
    </script> 
                        

Custom file input

                                            
    <input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"> 
                                        
                                            
    <script>
        flatpickr(".js-flatpickr", {});
    </script> 
                                        

DateTime

                                            
    <input type="text" class="date-time-js-flatpickr form-control flatpickr-custom" placeholder="Select dates"> 
                                        
                                            
    <script>
        flatpickr(".date-time-js-flatpickr", {
            enableTime: true,
            dateFormat: "Y-m-d H:i",
        });
    </script> 
                                        

With value

Use value attribute.

                                            
    <input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates" value="21/06/2019"> 
                                        
                                            
    <script>
        flatpickr(".js-flatpickr", {});
    </script> 
                                        

Range dates

Use range dates.

                                            
    <input type="text" class="range-js-flatpickr form-control flatpickr-custom" placeholder="Select dates"> 
                                        
                                            
    <script>
        flatpickr(".range-js-flatpickr", {
            dateFormat: "d/m/Y",
            mode: "range"
        });
    </script> 
                                        

Multiple dates

Use multiple mode.

                                            
    <input type="text" class="multiple-js-flatpickr form-control flatpickr-custom" placeholder="Select dates"> 
                                        
                                            
    <script>
        flatpickr(".multiple-js-flatpickr", {
            dateFormat: "d/m/Y",
            mode: "multiple"
        });
    </script> 
                                        

Plain Text

Use "inline": true

                                            
    <input type="text" class="inline-js-flatpickr d-none" placeholder="Select dates"> 
                                        
                                            
    <script>
        flatpickr(".inline-js-flatpickr", {
            dateFormat: "d/m/Y",
            inline: true
        });
    </script>