Show the date always without seconds is not working

I have a page to edit the administrators of a post. I have some radio buttons in this page, each radio button corresponds to an administrator. When an administratotr is selected the details of that administrator appears on the form fields below the radio buttons.

One form field is a date. Im using cabon to show in this edit post administrators page the date in this format "format('d F Y - H:i')":

    <div class="input-group date" data-provide="datepicker">
        <input type='text' name="date" value="{{ $admin->date->format('d F Y - H:i') }}"
               class="form-control" placeholder="DD/MM/YYY" />
        <span class="input-group-addon"><i class="fa fa-calendar text-primary" aria-hidden="true"></i></span>
    </div>

And it works fine. The date appears on this format: "07 February 2018 - 6:30".

But then I have some jQuery that receives an array with the administrators of the post from the controller and populate the details of each administrator in the form when the corresponding radio button is selected.

With this jQuery when this edit administrators page is acessed the date appears on this same format ""07 February 2018 - 6:30". But then if some amdinistrator is selected through the radio button the date field of that administrator appears with seconds: ""07 February 2018 - 6:30:00". But I dont want to show the seconds. I want this format ""07 February 2018 - 6:30".

Do you know how to do this?

jQuery:


    $(document).ready(function () {
    
    
        var admins= {!!  $admin!!}
    
        $("input[name='radiobutton']").click(function() {
            let id = $(this).attr("id");
            let data = admins.find(e => e.id == id) || {
                name: "",
                date: "",
            };
    
            //alert(data.date); // 2018-02-07 6:30:00
            $("input[name='name']").val(data.name);
            ...
            $("input[name='date']").val(data.date);
        });
    });

jkew

8 years ago

Level 1

I also used moment.js like:

$("input[name='date']").val(data.date).format(MMMM Do YYYY, h:mm');

But also dont works properly and it appears in the console:

admins:233 Uncaught TypeError: $(...).val(...).format is not a function
    at HTMLInputElement.<anonymous> (admins:233)
    at HTMLInputElement.dispatch (jquery.min.js:3)
    at HTMLInputElement.q.handle (jquery.min.js:3)
(anonymous) @ admins:233
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3

rsvb

8 years ago

Level 2

Carbon only displays. Make an attribute or accessor in the data controller, and format how you want, attributes are string in, string out.

jkew

8 years ago

Level 1

Thanks for the answer. But what is that data controller? Im not finding that. I have the AdministratorsController that returns an array with the administrators details to the view where I have the form:

Form:

<form method="post" class="clearfix" action="{{route('admins.update', ['id' => $post->id])}}" enctype="multipart/form-data">
    {{csrf_field()}}
    @foreach($administrators $admin)
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radiobutton" id="{{$admin->id}}" value="">
            <label class="form-check-label" for="">
              {{$admin->name}}
            </label>
          </div>
    @endforeach
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radiobutton" id="create_administrator"
             value="option2">
      <label class="form-check-label" for="exampleRadios2">
          Create new administrator
      </label>
  </div>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" required class="form-control" value="{{ $admin->name }}" name="name">
  </div>

  <!-- below I have more form fields like administrator name, email, etc -->

  <input type="submit" id="adminStoreButton" class="btn btn-primary" value="Create"/>
  <input type="submit" id="adminUpdateButton" class="btn btn-primary" value="Update"/>
  </form>

```

rawilk

8 years ago

Best Answer

Level 47

@jonew - It doesn't work because it's not an instance of moment. You also need to put your format in quotes. Something like this should work:


$("input[name='date']").val(moment(data.date).format('MMMM D YYYY, h:mm');

1 like

rsvb

8 years ago

Level 2

Oh sorry, data model i meant.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * Get the user's first name.
     *
     * @param  string  $value
     * @return string
     */
    public function getFirstNameAttribute($value)
    {
        return ucfirst($value);
    }
}

replace with your date field, and strip the seconds.

1 like

jkew

8 years ago

Level 1

Thanks! With that code I get an issue. In the form there is a radio button "Create new administrator" when this button is selected the form fields should reset. The issue is that when using that moment code when the "Create new administrator" radio button is selected all fields reset unless the date field. Do you know why? Without that format date code in jQuery the date field is also reseted when the "Create new administrator" radio button is selected.

Please or to participate in this conversation.