rilwis/meta-box

( function ( $, _, rwmb, i18n ) {
    'use strict';

    /**
     * Transform an input into a datetime picker.
     */
    function transform() {
        var $this = $( this ),
            options = $this.data( 'options' ),
            $inline = $this.siblings( '.rwmb-datetime-inline' ),
            $timestamp = $this.siblings( '.rwmb-datetime-timestamp' ),
            current = $this.val(),
            $picker = $inline.length ? $inline : $this;

        $this.siblings( '.ui-datepicker-append' ).remove(); // Remove appended text

        options.onSelect = function() {
            $this.trigger( 'change' );
        }
        options.beforeShow = function( i ) {
            if ( $( i ).prop( 'readonly' ) ) {
                return false;
            }
        }

        if ( $timestamp.length ) {
            options.onClose = options.onSelect = function () {
                $timestamp.val( getTimestamp( $picker.datetimepicker( 'getDate' ) ) );
                $this.trigger( 'change' );
            };
        }

        if ( ! $inline.length ) {
            $this.removeClass( 'hasDatepicker' ).datetimepicker( options );
            return;
        }

        options.altField = '#' + $this.attr( 'id' );
        $this.on( 'keydown', _.debounce( function () {
            // if val is empty, return to allow empty datepicker input.
            if ( ! $this.val() ) {
                return;
            }
            $picker
                .datepicker( 'setDate', $this.val() )
                .find( '.ui-datepicker-current-day' )
                .trigger( 'click' );
        }, 600 ) );

        $inline
            .removeClass( 'hasDatepicker' )
            .empty()
            .prop( 'id', '' )
            .datetimepicker( options )
            .datetimepicker( 'setDate', current );
    }

    /**
     * Convert date to Unix timestamp in milliseconds
     * @link http://stackoverflow.com/a/14006555/556258
     * @param date
     * @return number
     */
    function getTimestamp( date ) {
        if ( date === null ) {
            return '';
        }
        var milliseconds = Date.UTC( date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds() );
        return Math.floor( milliseconds / 1000 );
    }

    // Set language if available
    function setTimeI18n() {
        if ( $.timepicker.regional.hasOwnProperty( i18n.locale ) ) {
            $.timepicker.setDefaults( $.timepicker.regional[i18n.locale] );
        } else if ( $.timepicker.regional.hasOwnProperty( i18n.localeShort ) ) {
            $.timepicker.setDefaults( $.timepicker.regional[i18n.localeShort] );
        }
    }

    function init( e ) {
        /**
         * WordPress sets localized data for jQuery UI datepicker at document ready.
         * Using setTimeout to ensure the code runs after the localized data is set.
         * @link https://wordpress.org/support/topic/inline-date-field-not-localization/
         */
        setTimeout( () => {
            $( e.target ).find( '.rwmb-datetime' ).each( transform );
        }, 0 );
    }

    setTimeI18n();
    rwmb.$document
        .on( 'mb_ready', init )
        .on( 'clone', '.rwmb-datetime', transform );
} )( jQuery, _, rwmb, RWMB_Datetime );