WordPress.org
Get WordPress

Plugin Directory

Changeset 1748812


Ignore:
Timestamp:
10/18/2017 05:03:30 PM (8 years ago)
Author:
Moisture
Message:

New datetime picker (​https://github.com/chmln/flatpickr)

Doesn't require jQuery + looks better + is more lightweight

Location:
am-events/trunk
Files:
2 added
9 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • am-events/trunk/am-events.php

    r1397489 r1748812  
    144144add_action('admin_print_styles-post.php', 'am_custom_css');
    145145add_action('admin_print_styles-edit.php', 'am_custom_css');
    146 add_action('admin_print_scripts-post-new.php', 'am_custom_script_post');
    147 add_action('admin_print_scripts-post.php', 'am_custom_script_post');
     146add_action('admin_enqueue_scripts', 'am_custom_script_post');
    148147add_action('admin_footer-edit.php', 'am_admin_edit_event_foot', 11);
    149148add_action('admin_enqueue_scripts', 'am_custom_script_edit');
    … …  
    292291    if ($post->post_type === 'am_event' && is_admin()) {
    293292
    294         // include JQuery
    295         wp_enqueue_script(
    296                 'jquery-custom', plugins_url('/script/jquery-ui.min.js', __FILE__)
    297         );
    298 
    299         // JQuery datetime picker from http://trentrichardson.com/examples/timepicker/
     293        // Add Timepicker script
     294        wp_register_script('flatpickr', plugins_url('/script/flatpickr.min.js', __FILE__));
     295        wp_enqueue_script('flatpickr', plugins_url('/script/flatpickr.min.js', __FILE__));
     296
     297        // Custom script for assigning jquery to inputs
     298        wp_register_script('am_custom_script', plugins_url('/script/admin-post.js', __FILE__));
     299       
     300       
    300301        // datetimepicker localization
    301302        $localization = array(
    302 
    303             // Date picker
    304             'clearText' => _x('Clear', 'date picker', 'am-events'), //Display text for clear link
    305             'clearStatus' => _x('Erase the current date', 'date picker', 'am-events'), //Status text for clear link
    306             'closeText' => _x('Close', 'date picker', 'am-events'), //Display text for close link
    307             'closeStatus' => _x('Close without change', 'date picker', 'am-events'), //Status text for close link
    308             'prevText' => _x('<Prev', 'date picker', 'am-events'), //Display text for previous month link
    309             'prevBigText' => _x('<<', 'date picker', 'am-events'), //Display text for previous year link
    310             'prevStatus' => _x('Show the previous month', 'date picker', 'am-events'), //Status text for previous month link
    311             'prevBigStatus' => _x('Show the previous year', 'date picker', 'am-events'), //Status text for previous year link
    312             'nextText' => _x('Next>', 'date picker', 'am-events'), //Display text for next month link
    313             'nextBigText' => _x('>>', 'date picker', 'am-events'), //Display text for next year link
    314             'nextStatus' => _x('Show the next month', 'date picker', 'am-events'), //Status text for next month link
    315             'nextBigStatus' => _x('Show the next year', 'date picker', 'am-events'), //Status text for next year link
    316             'currentText' => _x('Today', 'date picker', 'am-events'), //Display text for current month link
    317             'currentStatus' => _x('Show the current month', 'date picker', 'am-events'), //Status text for current month link
    318303            'january' => __('January', 'am-events'), 'february' => __('February', 'am-events'), 'march' => __('March', 'am-events'),  'april' => __('April', 'am-events'),  'may' => __('May', 'am-events'), 'june' => __('June', 'am-events'), 'july' => __('July', 'am-events'), 'august' => __('August', 'am-events'), 'september' => __('September', 'am-events'), 'october' => __('October', 'am-events'), 'november' => __('November', 'am-events'), 'december' => __('December', 'am-events'),
    319304            'januaryShort' => __('Jan', 'am-events'), 'februaryShort' => __('Feb', 'am-events'), 'marchShort' => __('Mar', 'am-events'),  'aprilShort' => __('Apr', 'am-events'),  'mayShort' => __('May', 'am-events'), 'juneShort' => __('Jun', 'am-events'), 'julyShort' => __('Jul', 'am-events'), 'augustShort' => __('Aug', 'am-events'), 'septemperShort' => __('Sep', 'am-events'), 'octoberShort' => __('Oct', 'am-events'), 'novemberShort' => __('Nov', 'am-events'), 'decemberShort' => __('Dec', 'am-events'),
    320             'monthStatus' => _x('Show a different month', 'date picker', 'am-events'), //Status text for selecting a month
    321             'yearStatus' => _x('Show a different year', 'date picker', 'am-events'), //Status text for selecting a year
    322             'weekHeader' => _x('Wk', 'date picker', 'am-events'), //Header for the week of the year column
    323             'weekStatus' => _x('Week of the year', 'date picker', 'am-events'), //Status text for the week of the year column
    324305            'dayNameFullMon' => __('Monday', 'am-events'), 'dayNameFullTue' => __('Tuesday', 'am-events'), 'dayNameFullWed' => __('Wednesday', 'am-events'), 'dayNameFullThu' => __('Thursday', 'am-events'), 'dayNameFullFri' => __('Friday', 'am-events'), 'dayNameFullSat' => __('Saturday', 'am-events'), 'dayNameFullSun' => __('Sunday', 'am-events'),
    325306            'dayNameShortMon' => __('Mon', 'am-events'), 'dayNameShortTue' => __('Tue', 'am-events'), 'dayNameShortWed' => __('Wed', 'am-events'), 'dayNameShortThu' => __('Thu', 'am-events'), 'dayNameShortFri' => __('Fri', 'am-events'), 'dayNameShortSat' => __('Sat', 'am-events'), 'dayNameShortSun' => __('Sun', 'am-events'),
    326307            'dayNameMinMon' => __('Mo', 'am-events'), 'dayNameMinTue' => __('Tu', 'am-events'), 'dayNameMinWed' => __('We', 'am-events'), 'dayNameMinThu' => __('Th', 'am-events'), 'dayNameMinFri' => __('Fr', 'am-events'), 'dayNameMinSat' => __('Sa', 'am-events'), 'dayNameMinSun' => __('Su', 'am-events'),
    327             'dayStatus' => _x('Set DD as first week day', 'date picker', 'am-events'), //Status text for the day of the week selection
    328             'dateStatus' => _x('Select D, M d', 'date picker', 'am-events'), //Status text for the date selection
    329             'dateFormat' => _x('mm/dd/yy', 'date picker, see http://docs.jquery.com/UI/Datepicker/parseDate', 'am-events'), //See format options on parseDate
    330             'firstDay' => 1, //The first day of the week, Sun = 0, Mon = 1, ...
    331             'initStatus' => _x('Select a date', 'date picker', 'am-events'), //Initial Status text on opening
    332             'isRTL' => false, //True if right-to-left language, false if left-to-right
    333 
    334             // Time picker
    335             'minuteStep' => get_option('am_timepicker_minutestep', 15),
    336             'currentText' => _x('Now', 'time picker', 'am-events'),
    337             'closeText' => _x('Done', 'time picker', 'am-events'),
    338308            'amNames' => _x('AM', 'time picker', 'am-events'),
    339309            'amNamesShort' => _x('A', 'time picker', 'am-events'),
    340310            'pmNames' => _x('PM', 'time picker', 'am-events'),
    341             'pmNamesShort' => _x('P', 'time picker', 'am-events'),
    342             'timeFormat' => _x('HH:mm', 'time picker', 'am-events'),
    343             'timeSuffix' => _x('', 'time picker', 'am-events'),
    344             'timeOnlyTitle' => _x('Choose Time', 'time picker', 'am-events'),
    345             'timeText' => _x('Time', 'time picker', 'am-events'),
    346             'hourText' => _x('Hour', 'time picker', 'am-events'),
    347             'minuteText' => _x('Minute', 'time picker', 'am-events'),
    348             'secondText' => _x('Second', 'time picker', 'am-events'),
    349             'millisecText' => _x('Millisecond', 'time picker', 'am-events'),
    350             'timezoneText' => _x('Time Zone', 'time picker', 'am-events'),
    351             'isRTL' => false
     311            'pmNamesShort' => _x('P', 'time picker', 'am-events')
    352312        );
    353 
    354         // Add Timepicker script
    355         wp_register_script('jquery-ui-timepicker', plugins_url('/script/jquery-ui-timepicker-addon-min.js', __FILE__));
    356         wp_localize_script('jquery-ui-timepicker', 'localization', $localization); //pass any values to javascript
    357         wp_enqueue_script(
    358                 'jquery-ui-timepicker', plugins_url('/script/jquery-ui-timepicker-addon-min.js', __FILE__), array('jquery-custom')
    359         );
    360 
    361         // Custom script for assigning jquery to inputs
    362         wp_enqueue_script(
    363                 'am_custom_script', plugins_url('/script/admin-post.js', __FILE__), array('jquery-custom')
    364         );
     313       
     314        $startDate = mysql_to_rfc3339(get_post_meta($post->ID, 'am_startdate', true));
     315        $endDate = mysql_to_rfc3339(get_post_meta($post->ID, 'am_enddate', true));
     316
     317        $eventData = array(
     318            'startDate' => $startDate,
     319            'endDate' => $endDate,
     320            'minuteStep' => get_option('am_timepicker_minutestep', 15),
     321        );
     322
     323        //pass values to javascript
     324        wp_localize_script('am_custom_script', 'localization', $localization);
     325        wp_localize_script('am_custom_script', 'event_data', $eventData);
     326        wp_enqueue_script('am_custom_script', plugins_url('/script/admin-post.js', __FILE__, null, true));
     327       
    365328    }
    366329}
    … …  
    392355function am_custom_css() {
    393356    // Date/time picker styles
    394     wp_enqueue_style(
    395             'jquery.ui.theme', plugins_url('/css/jquery-ui.min.css', __FILE__));
    396     wp_enqueue_style(
    397             'jquery.ui.timepicker', plugins_url('/css/jquery-ui-timepicker-addon-min.css', __FILE__));     
    398     wp_enqueue_style(
    399             'jquery.ui.timepicker', plugins_url('/css/jquery-ui.structure.min.css', __FILE__));
    400     wp_enqueue_style(
    401             'jquery.ui.timepicker', plugins_url('/css/jquery-ui.theme.min.css', __FILE__));
     357    wp_enqueue_style('flatpickr', plugins_url('/css/flatpickr.min.css', __FILE__));
    402358
    403359    // Other styles (for metabox etc.)
    404     wp_enqueue_style(
    405             'am-events', plugins_url('/css/am_events.css', __FILE__));
     360    wp_enqueue_style('am-events', plugins_url('/css/am_events.css', __FILE__));
    406361}
    407362
    … …  
    442397        wp_nonce_field(plugin_basename(__FILE__), 'am_nonce');
    443398
    444     // The actual fields for data entry
    445     // Use get_post_meta to retrieve an existing value from the database and use the value for the form
    446     // DATE FIELDS
    447     $metaStartDate = get_post_meta($post->ID, 'am_startdate', true);
    448     $metaEndDate = get_post_meta($post->ID, 'am_enddate', true);
    449 
    450     // Convert dates from 0000-00-00 00:00:00 to 00.00.0000 00:00
    451     $startDate = '';
    452     $endDate = '';
    453     if ($metaStartDate !== '')
    454         $startDate = date(_x('m/d/Y H:i','administration', 'am-events'), strtotime($metaStartDate));
    455     if ($metaEndDate !== '')
    456         $endDate = date(_x('m/d/Y H:i','administration', 'am-events'), strtotime($metaEndDate));
     399   
    457400
    458401    // Echo content of the meta box
    … …  
    466409            </td>
    467410            <td>
    468                 <input type="text" id="am_startdate" name="am_startdate" value="<?php echo esc_attr($startDate) ?>" />
     411                <input type="text" id="am_startdate" name="am_startdate"/>
    469412            </td>
    470413        </tr>
    … …  
    474417            </td>
    475418            <td>
    476                 <input type="text" id="am_enddate" name="am_enddate" value="<?php echo esc_attr($endDate) ?>" />
     419                <input type="text" id="am_enddate" name="am_enddate"/>
    477420            </td>
    478421        </tr>

  • am-events/trunk/css/am_events.css

    r923767 r1748812  
    3636}
    3737
     38#am_startdate, #am_enddate {
     39    width: 150px;
     40}
     41

  • am-events/trunk/languages/am-events-fi.po

    r1022383 r1748812  
    33"Project-Id-Version: am-events\n"
    44"POT-Creation-Date: 2014-05-30 16:35+0200\n"
    5 "PO-Revision-Date: 2014-11-09 12:18+0200\n"
    6 "Last-Translator: Atte Moisio <atte.moisio@attemoisio.fi>\n"
    7 "Language-Team: \n"
     5"PO-Revision-Date: 2017-10-17 20:36+0000\n"
     6"Last-Translator: Atte <ammois@utu.fi>\n"
     7"Language-Team: Finnish\n"
    88"Language: fi\n"
    99"MIME-Version: 1.0\n"
    1010"Content-Type: text/plain; charset=UTF-8\n"
    1111"Content-Transfer-Encoding: 8bit\n"
    12 "X-Generator: Poedit 1.6.5\n"
     12"X-Generator: Loco - https://localise.biz/\n"
    1313"X-Poedit-SourceCharset: UTF-8\n"
    1414"X-Poedit-KeywordsList: __;_e;__ngettext:1,2;_n:1,2;__ngettext_noop:1,2;"
    … …  
    1616"esc_attr__;esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c\n"
    1717"X-Poedit-Basepath: .\n"
    18 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
     18"Plural-Forms: nplurals=2; plural=n != 1\n"
    1919"X-Poedit-SearchPath-0: .\n"
    2020"X-Poedit-SearchPath-1: ..\n"
     21"Report-Msgid-Bugs-To: "
    2122
    2223#: ../am-events.php:132
    … …  
    409410msgctxt "administration"
    410411msgid "m/d/Y H:i"
    411 msgstr "d.m.Y H:i"
     412msgstr "Y年m月d日H:i"
    412413
    413414#: ../am-events.php:408
    … …  
    865866#, php-format
    866867msgid ""
    867 "Event scheduled for: <strong>%1$s</strong>. <a target=\"_blank\" href=\"%2$s"
    868 "\">Preview event</a>"
     868"Event scheduled for: <strong>%1$s</strong>. <a target=\"_blank\" "
     869"href=\"%2$s\">Preview event</a>"
    869870msgstr ""
    870 "Tapahtuman julkaisuaika: <strong>%1$s</strong>. <a target=\"_blank\" href="
    871 "\"%2$s\">Esikatsele</a>"
     871"Tapahtuman julkaisuaika: <strong>%1$s</strong>. <a target=\"_blank\" "
     872"href=\"%2$s\">Esikatsele</a>"
    872873
    873874#. translators: Publish box date format, see http://php.net/date
    … …  
    881882msgid "Event draft updated. <a target=\"_blank\" href=\"%s\">Preview event</a>"
    882883msgstr ""
    883 "Tapahtuman luonnos päivitetty. <a target=\"_blank\" href=\"%s\">Esikatsele</"
    884 "a>"
     884"Tapahtuman luonnos päivitetty. <a target=\"_blank\" href=\"%s\">"
     885"Esikatsele</a>"
    885886
    886887#: ../template-tags.php:187
    … …  
    984985msgid "Display after events:"
    985986msgstr "Näytä tapahtuman jälkeen:"
    986 
    987 #~ msgid "times"
    988 #~ msgstr "kertaa"
    989 
    990 #~ msgid "View all posts in %s"
    991 #~ msgstr "Näytä kaikki artikkelit paikassa %s "
    992 
    993 #, fuzzy
    994 #~ msgctxt "am-events"
    995 #~ msgid "Tue"
    996 #~ msgstr "Ti"
    997 
    998 #, fuzzy
    999 #~ msgctxt "am-events"
    1000 #~ msgid "Wed"
    1001 #~ msgstr "Ke"
    1002 
    1003 #, fuzzy
    1004 #~ msgctxt "am-events"
    1005 #~ msgid "Thu"
    1006 #~ msgstr "To"
    1007 
    1008 #, fuzzy
    1009 #~ msgctxt "am-events"
    1010 #~ msgid "Fri"
    1011 #~ msgstr "Pe"
    1012 
    1013 #, fuzzy
    1014 #~ msgctxt "am-events"
    1015 #~ msgid "Sat"
    1016 #~ msgstr "La"
    1017 
    1018 #, fuzzy
    1019 #~ msgctxt "am-events"
    1020 #~ msgid "Sun"
    1021 #~ msgstr "Su"
    1022 
    1023 #~ msgid "No upcoming events."
    1024 #~ msgstr "Ei tulevia tapahtumia."
    1025 
    1026 #~ msgid "Date"
    1027 #~ msgstr "Päivämäärä"
    1028 
    1029 #~ msgid "Title"
    1030 #~ msgstr "Otsikko"
    1031 
    1032 #~ msgid "Category"
    1033 #~ msgstr "Kategoria"
    1034 
    1035 #~ msgid "first page"
    1036 #~ msgstr "ensimmäinen"
    1037 
    1038 #~ msgid "previous page"
    1039 #~ msgstr "edellinen"
    1040 
    1041 #~ msgid "next page"
    1042 #~ msgstr "seuraava"
    1043 
    1044 #~ msgid "last page"
    1045 #~ msgstr "viimeinen"
    1046 
    1047 #~ msgid "AM Events"
    1048 #~ msgstr "Tapahtumat"

  • am-events/trunk/script/admin-post.js

    r923214 r1748812  
    1 /*
    2  *
    3  *
    4  */
    5 
    61jQuery(function($) {
    72
    8         // LOCALIZATION
    9         $.timepicker.regional['am'] = {
    10             timeOnlyTitle: localization.timeOnlyTitle,
    11             timeText: localization.timeText,
    12             hourText: localization.hourText,
    13             minuteText: localization.minuteText,
    14             secondText: localization.secondText,
    15             millisecText: localization.millisecText,
    16             timezoneText: localization.timezoneText,
    17             currentText: localization.currentText,
    18             closeText: localization.closeText,
    19             timeFormat: localization.timeFormat,
    20             amNames: [localization.amNames, localization.amNamesShort],
    21             pmNames: [localization.pmNames, localization.pmNamesShort],
    22             isRTL: false
    23         }
    24         $.timepicker.setDefaults($.timepicker.regional['am']);
    25        
    26         $.datepicker.regional['am'] = {
    27             clearText: localization.clearText ,
    28             clearStatus: localization.clearStatus,
    29             closeText: localization.closeText, closeStatus: localization.closeStatus,
    30             prevText: localization.prevText,
    31             prevStatus: localization.prevStatus,
    32             nextText: localization.nextText,
    33             nextStatus: localization.nextStatus,
    34             currentText: localization.currentText,
    35             currentStatus: localization.currentStatus,
    36             monthNames: [localization.january,
    37                 localization.february,
    38                 localization.march,
    39                 localization.april,
    40                 localization.may,
    41                 localization.june,
    42                 localization.july,
    43                 localization.august,
    44                 localization.september,
    45                 localization.october,
    46                 localization.november,
    47                 localization.december],
    48             monthNamesShort: [localization.januaryShort,
    49                 localization.februaryShort,
    50                 localization.marchShort,
    51                 localization.aprilShort,
    52                 localization.mayShort,
    53                 localization.juneShort,
    54                 localization.julyShort,
    55                 localization.augustShort,
    56                 localization.septemberShort,
    57                 localization.octoberShort,
    58                 localization.novemberShort,
    59                 localization.decemberShort],
    60             monthStatus: localization.monthStatus,
    61             yearStatus: localization.yearStatus,
    62             weekHeader: localization.weekHeader,
    63             weekStatus: localization.weekStatus,
    64             dayNames: [localization.dayNameFullSun,
    65                 localization.dayNameFullMon,
    66                 localization.dayNameFullTue,
    67                 localization.dayNameFullWed,
    68                 localization.dayNameFullThu,
    69                 localization.dayNameFullFri,
    70                 localization.dayNameFullSat],
    71             dayNamesShort: [localization.dayNameShortSun,
    72                 localization.dayNameShortMon,
    73                 localization.dayNameShortTue,
    74                 localization.dayNameShortWed,
    75                 localization.dayNameShortThu,
    76                 localization.dayNameShortFri,
    77                 localization.dayNameShortSat],
    78             dayNamesMin: [localization.dayNameMinSun,
    79                 localization.dayNameMinMon,
    80                 localization.dayNameMinTue,
    81                 localization.dayNameMinWed,
    82                 localization.dayNameMinThu,
    83                 localization.dayNameMinFri,
    84                 localization.dayNameMinSat],
    85             dayStatus: localization.dayStatus,
    86             dateStatus: localization.dateStatus,
    87             dateFormat: localization.dateFormat, firstDay: 0,
    88             initStatus: localization.initStatus,
    89             isRTL: localization.isRTL
    90         };
    91         $.datepicker.setDefaults($.datepicker.regional['am']);
     3
     4        var AmEventsLanguage = {
     5            firstDayOfWeek: 1,
     6            weekdays: {
     7                shorthand: [
     8                    localization.dayNameShortSun,
     9                    localization.dayNameShortMon,
     10                    localization.dayNameShortTue,
     11                    localization.dayNameShortWed,
     12                    localization.dayNameShortThu,
     13                    localization.dayNameShortFri,
     14                    localization.dayNameShortSat
     15                ],
     16                longhand: [
     17                    localization.dayNameFullSun,
     18                    localization.dayNameFullMon,
     19                    localization.dayNameFullTue,
     20                    localization.dayNameFullWed,
     21                    localization.dayNameFullThu,
     22                    localization.dayNameFullFri,
     23                    localization.dayNameFullSat
     24                ],
     25            },
     26            months: {
     27                shorthand: [
     28                    localization.januaryShort,
     29                    localization.februaryShort,
     30                    localization.marchShort,
     31                    localization.aprilShort,
     32                    localization.mayShort,
     33                    localization.juneShort,
     34                    localization.julyShort,
     35                    localization.augustShort,
     36                    localization.septemberShort,
     37                    localization.octoberShort,
     38                    localization.novemberShort,
     39                    localization.decemberShort,
     40                ],
     41                longhand: [
     42                    localization.january,
     43                    localization.february,
     44                    localization.march,
     45                    localization.april,
     46                    localization.may,
     47                    localization.june,
     48                    localization.july,
     49                    localization.august,
     50                    localization.september,
     51                    localization.october,
     52                    localization.november,
     53                    localization.december
     54                ],
     55            }
     56        };
    9257
    9358        // REPEAT INPUTS
    … …  
    9762
    9863        // DATETIME PICKERS
    99         var startDateTextBox = $('#am_startdate');
    100         var endDateTextBox = $('#am_enddate');
     64   
     65       
     66        var flatpickrOptions = {
     67            enableTime: true,
     68            time_24hr: true,
     69            allowInput: true,
     70            locale: AmEventsLanguage,
     71            minuteIncrement: parseInt(event_data.minuteStep)
     72        };
     73       
     74        var startPicker = $('#am_startdate').flatpickr(flatpickrOptions);
     75        var endPicker = $('#am_enddate').flatpickr(flatpickrOptions);
     76       
     77        startPicker.setDate(event_data.startDate);
     78        endPicker.setDate(event_data.endDate);
    10179
    102         startDateTextBox.datetimepicker({
     80        /*startDateTextBox.datetimepicker({
    10381                stepMinute: parseInt(localization.minuteStep),
    10482                onClose: function(dateText, inst) {
    … …  
    133111                        startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
    134112                }
    135         });
     113        });*/
    136114       
    137115       

  • am-events/trunk/template-tags.php

    r1088893 r1748812  
    6464    $post = get_post( $post );
    6565
    66         $id = isset( $post->ID ) ? $post->ID : 0;
    67         $date = get_post_meta($id, 'am_startdate', true);
    68 
    69         if ( strlen($format) != 0)
    70             $date = date_i18n($format, strtotime($date));
    71        
    72         return $date;
    73        
    74 }
    75 
    76 
    77 /**
    78  * Display or retrieve the current event start date.
     66    $id = isset( $post->ID ) ? $post->ID : 0;
     67    $date = get_post_meta($id, 'am_startdate', true);
     68
     69    if ( strlen($format) != 0)
     70        $date = date_i18n($format, strtotime($date));
     71   
     72    return $date;
     73       
     74}
     75
     76
     77/**
     78 * Display or retrieve the current event end date.
    7979 *
    8080 * @since 1.3.0
Note: See TracChangeset for help on using the changeset viewer.