Moment Bundle Laravel Package

Getting Started

Minimal Setup

1. Install via Composer:

   composer require alexandermatveev/moment-bundle
   

2. Enable the Bundle in config/bundles.php (Symfony 4+) or AppKernel.php (Symfony 2/3):

   AlexanderMatveev\MomentBundle\AlexanderMatveevMomentBundle::class => ['all' => true],
   

3. Install Assets (Symfony 2/3):

   php bin/console assets:install public --symlink
   

4. Include in Twig Template:

   <script src="{{ asset('bundles/alexandermatveevmoment/moment.min.js') }}"></script>
   

First Use Case: Basic Date Manipulation

Use Moment.js directly in JavaScript for client-side date handling:

// Example: Format a date in Twig, then manipulate it in JS
const date = moment("{{ some_date|date('YYYY-MM-DD') }}");
date.format('LLLL'); // "Monday, January 1, 2023 12:00 PM"

Implementation Patterns

1. Twig Integration

• Pass Dates from PHP to JS:

  <script>
    const userCreatedAt = moment("{{ user.createdAt|date('x') }}");
    userCreatedAt.fromNow(); // "2 days ago"
  </script>
  

• Use date() Filter in Twig for consistency:

  {{ event.startTime|date('x') }}  {# Unix timestamp for Moment #}
  

2. Localization

• Load locales via moment-with-locales.min.js:

  <script src="{{ asset('bundles/alexandermatveevmoment/moment-with-locales.min.js') }}"></script>
  

• Set locale in JS:

  moment.locale('fr'); // French translations
  

3. Asset Management

• Symfony 4+: Use webpack or encore to bundle Moment.js with your app.
• Symfony 2/3: Leverage assets:install for symlinked assets (faster updates).

4. Common Workflows

• Date Picking: Pair with libraries like bootstrap-datetimepicker:

  $('#datetimepicker').datetimepicker({
    useCurrent: false,
    format: 'YYYY-MM-DD HH:mm'
  });
  

• Timezone Handling: Use moment-timezone (separate npm package) if needed.

Gotchas and Tips

Pitfalls

1. Outdated Version:

   • The bundle ships Moment.js 2.15.1 (2016). For security/critical apps, consider:
     • Using a CDN (e.g., https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js).
     • Upgrading via npm (npm install moment@latest) and bundling manually.

2. Asset Path Changes:

   • If the bundles/alexandermatveevmoment/ path breaks (e.g., Symfony 4+), check:

     php bin/console assets:install public --symlink --verbose
     

3. Locale Conflicts:

   • Ensure no duplicate Moment.js instances load (check browser console for moment is not a function).

Debugging Tips

• Verify Asset Loading:

  php bin/console assets:debug
  

• Check Console Errors:
  • Look for Uncaught ReferenceError: moment is not defined (missing script tag or wrong path).

Extension Points

1. Custom Builds:

   • Use moment-with-locales.min.js for minimal footprint (only include needed locales).
   • Example: Build a custom bundle with npm run build (if using npm).

2. Symfony 4+ Compatibility:

   • Override the bundle’s Resources/public/ in your project to use public/bundles/... paths.

3. Testing:

   • Mock Moment.js in PHPUnit with:

     // In your test JS file
     window.moment = require('moment');