PHP Date Formatter Demo php-date-formatter

Thankful to Krajee!
to get more out of us.

NOTE: The plugins on this site, strive to use a lot of CSS3 and HTML5 features in addition to JQuery. Hence, one may find either CSS3, HTML5 or a mix of both to achieve a plugin's requirements in many implementations.

A Javascript datetime library that allows you to manipulate date/times using PHP date-time formats. This library was built with an intention to read and write date/timestamps to the database easily when working with PHP server code. Use cases for this library would involve reading and saving a timestamp to database in one format, but displaying it on client or html forms in another format. Maintaining a consistent PHP Date time format for both server side and client side validation should help in building extensible applications with various PHP frameworks easily.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome).

PHP Date Formatter Demo
var fmt = new DateFormatter(),  fmts = [
        'd', 'D', 'j', 'l', 'N', 'w',  'z', 'W', 'F', 'm', 'M', 'n', 't', 'L', 'o', 
        'Y', 'y', 'a', 'A', 'B', 'g', 'G', 'h', 'H', 'i', 's', 'u', 'e', 'I', 'O', 'P', 
        'T', 'Z', 'c', 'r', 'U'
    ],
    kvSetFmt = function() {
        var dtParsed, dtFormatted, out = '';
        dtParsed = fmt.parseDate($("#input-date").val(), $("#input-format").val());
        $("#parsed-date").val(dtParsed);
        dtFormatted = fmt.formatDate(dtParsed, $("#output-format").val());
        $("#formatted-date").val(dtFormatted);
        if (!dtParsed) {
            $('#format-samples').html('<div class="alert alert-danger">' +
            '<h4>Error</h4>Cannot parse source date</div>');
            return;
        }
        $.each(fmts, function(i, f) {
            out += '<tr><td><code>' + f + '</code></td><td><samp>' + 
                fmt.parseFormat(f, dtParsed) + '</samp></td></tr>';
        });
        $('#format-samples').html('<table class="table table-bordered table-hover">' +
        '<caption>Date Format Patterns</caption>' + 
        '<tr class="active"><th>Format</th><th>Value</th></tr>' + out + '</table>');
    };
$(document).on("ready", function() {
   kvSetFmt();
});
$("#input-date, #input-format, #output-format").on("change", function() {
   kvSetFmt(); 
});