Base solution for your next web application
Open Closed

date-picker set format to "dd/mm/yyyy HH:MM" instead of "L" #4570


User avatar
0
panic created

Hello, As taken from DemoUiComponents page, the below javascript is used to initialize a datetime-picker input. Now, I would like to apply a specific display format but I cannot do it because the option is already assigned value 'L'. How can I apply "dd/mm/yyyy HH:MM"?

$('.date-picker').datetimepicker({
            locale: abp.localization.currentLanguage.name,
            format: 'L'
        });

Additionally, just to mention that I tried to use the date-picker component and it would not work because file "bootstrap-datepicker.min.js" was not included in bundle.config.js. Below entries had to be added, to copy file under wwwroot/lib and then to bundle it in "app-layout-libs.js".

under mappings: "node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js": "bootstrap-datepicker/dist/js",
.
.
.
and then:
            outputFileName: 'wwwroot/view-resources/Areas/App/Views/_Bundles/app-layout-libs.js',
            inputFiles: [
                "wwwroot/lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",

3 Answer(s)
  • User Avatar
    0
    alirizaadiyahsi created

    Hi @Panic,

    Note: We use format: 'L' because if you change language format is changing automatically. If you set an absolute format, it won't change by localization.

    How can I apply "dd/mm/yyyy HH:MM"?

    format: 'dd/mm/yyyy HH:MM'
    

    There is datetimepicker component instead of datepicker. We use this component:https://github.com/pingcheng/bootstrap4-datetimepicker and related js definition

    "wwwroot/lib/bootstrap4-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
    
  • User Avatar
    0
    panic created

    Hello Aliriza, Thank you for your reply. Regarding format, I am actually asking if there is a way to combine s specific format with the "L" for preserving language localization. For example something like below:

    $('.date-picker').datetimepicker({
                locale: abp.localization.currentLanguage.name,
                format: 'L("dd MMM yyyy, HH:MM")'
            });
    

    Thank you.

  • User Avatar
    0
    alirizaadiyahsi created

    We use moment js formats. Check here to see all possible formats: <a class="postlink" href="https://momentjs.com/">https://momentjs.com/</a> And also this is the component that we use for datetimepicker: <a class="postlink" href="https://github.com/pingcheng/bootstrap4-datetimepicker">https://github.com/pingcheng/bootstrap4-datetimepicker</a>