CODEWITHSUNDEEP
javascriptarraysvue.jsarray-splice
Synchro
Synchro

Reputation: 1269

Vue JS - How to apply color to text of specific element from array then remove last comma

I am using date, the user selects the date, and then the selected date is displayed in the browser, the problem is that I want to change the color for the last two items except that remove the last comma

I used splice to remove the first word, but I could not remove the last comma, that is, at the moment in May, the date looks like this

Please note that I do not need to change the date, I only need to change the color of the last two words and remove the comma

Also you can look at the whole code at codesandbox

enter image description here

I want to get the following result

enter image description here

    <date-pick
        v-model="date"
        :format="format"
        :parseDate="parseDate"
        :formatDate="formatDate">

    <template v-slot:default="{toggle, inputValue}">
        <div class="mount-container">
          <h1><span ref="mount" class="mount-title">
            {{ inputValue.split(' ').splice(0,3).join(' ') }}
          </span></h1>
        </div>
    </template>

   </date-pick>

I don't know how much you need it, but I want to leave a link to the npm package the date I use if you need more code or information, write I will definitely provide

Edited

I wanted to use this approach, but it didn't help

  mounted() {
    let mount = this.$refs.mount.split(' ').pop();
    mount.style.color = 'yellow'
  },

But the interesting thing is that if I apply the color without split then it works.

  mounted() {
    let mount = this.$refs.mount;
    mount.style.color = 'yellow'
  },

Upvotes: 2

Views: 1571

Answers (3)

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

To remove the last comma just update the date format to date: fecha.format(new Date(), "dddd, MMMM Do YYYY").

And to change the color update the span tag in the template to:

<h1>
    <span ref="mount" class="mount-title">
        {{ inputValue.split(" ").splice(0, 1).join(" ") }}
    </span>
    <span>
        {{ inputValue.split(" ").splice(1, 2).join(" ") }}
    </span>
</h1>

Upvotes: 2

tony19
tony19

Reputation: 138336

Instead of trying to parse the date string, you could update the format and date properties to be the format you need (i.e., dddd, MMMM D):

export default {
  data() {
    return {
      format: "dddd, MMMM D",
      date: fecha.format(new Date(), "dddd, MMMM D"),
    };
  },
  //...
}

Then, you could just split the string on the comma to get the day of week and date parts, applying CSS classes to each part:

<span class="mount-title">
  <span class="dow">{{ inputValue.split(",")[0] }}, </span>
  <span class="date">{{ inputValue.split(",")[1] }}</span>
</span>

Then add a style for the date class:

<style>
.date {
  color: #000;
}
</style>

demo

Upvotes: 1

Synchro
Synchro

Reputation: 1269

The first time this happened to my question, they answered correctly by specifying the link to the codepen, then, as I assume, this person deleted their correct answer :), but I managed to save that link from the codepen

<div id="app">
    <div class="red">{{ inputValue }}</div>
    <div><span class="red">{{ inputValue.match(/^([A-z]+) /i)[1] }}</span>, <span>{{ inputValue.match(/^.+ ([A-z]+) /i)[1] }} {{ inputValue.match(/ (\d{1,2}).+,/)[1] }}</span></div>
</div>

div {
  font-family: 'Fjalla One', sans-serif;
  font-size: 30px;
}
.red {
  color: #CA0340;
}

Upvotes: 0

Related Questions