Is there any way to change input type=“date” format ?

Is there any way to change input type=“date” format ?

Asked on November 29, 2018 in HTML / CSS.
Add Comment


  • 4 Answer(s)

    First we have to find differentiate between the over the wire format and the browser’s presentation format.

    There is no restriction for the Presentation format Browsers for how they present a date input. At the time of writing Chrome, Edge, Firefox and Opera have date support (see here). They all display a date picker and format the text in the input field.

    Wire format The HTML5 date input specification refers to the RFC3339 specification, which specifies a full-date format equal to: yyyy-mm-dd. want more details. see this section 5.6 of the RFC3339 specification for more details.

     

    Input values only suitable and done by chrome browser. Edge, Firefox and Opera display the date with the day, month and year in the right order for the locale, but inconsistently use slashes (30/01/2018) where for example dashes (30-01-2018) are expected by the locale’s calendar format.

    The browsers which display the ext input field with the wire forma are  Internet Explorer 9, 10 and 11.

    Answered on November 29, 2018.
    Add Comment

    It is always  possible to style the field, it will  displays the date in a we desire format . Even though some of the possibilities to manipulate the date input is lost this way, but if the desire to force the format is greater, this solution might be a way. A date fields stays only like that:

    <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
    

    Its works on google chrome for desktop, safari on ios.

    Answered on November 29, 2018.
    Add Comment

    Yes, its possible. I have a solution that allows changing the format. There are a few caveats but it is usable if you wish to have ‘Jan’ or ’01’ displayed consistently. It works in Chrome on Windows and Mac only due to the fact that Firefox does not yet support native date pickers at all.

    https://github.com/northamerican/custom-input-date-format
    

    JS:

    function updateDateInputs() {
        $('input').each(function() {
            var $date = $(this),
                date = $date.val().split('-'),
                format = ['year', 'month', 'day'];
            $.each(format, function(i, v) {
                $date.attr('data-' + v, +date[i]);
            });
        });
    }
    

    SASS:

    $months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
    @each $month in $months {
        $i: index($months, $month);
     
        input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
            content: "#{$month}";
        }
    }
    
    Answered on November 29, 2018.
    Add Comment

    You can start with a simple (and working) solution like datetime-input for polymer that allows you to use a tag like this one:

     <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

    or you can get creative and pop-up complete date-pickers styled as you wish, with the formatting and locales you desire, callbacks, and your long list of options (you’ve got a whole custom API at your disposal!)

    Answered on January 27, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.