Top-Date-Picker 📅⏰

Top-Date-Picker is a Vue.js plugin designed for selecting Jalali (Persian) date and time, optimized for mobile screen sizes.

Installation

Using npm

npm install top-date-picker --save

To configure moment to ignore loading locales:

// webpack.config.js:
module.exports.plugins = [
  //...
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  //...
]

// vue.config.js:
module.exports = {
  //..
  configureWebpack: {
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  },
  //...
}

Usage

In main.js:

// main.js
//...
import topDatePicker from 'top-date-picker';
Vue.component('date-picker', topDatePicker);
//...

Then used in component:

<date-picker v-model="date" />

Or in component:

<template>
  <div>
    <date-picker v-model="date"></date-picker>
  </div>
</template>
 
<script>
import topDatePicker from 'top-date-picker'
export default {
  data(){
    return {
      date: ''
    }
  },
  components: {
    datePicker: topDatePicker
  }
}
</script>

✨ Features

📝 Custom Input

If you want to use a custom input or custom element to trigger and show the datepicker, use the custom-input option.

custom-input="#inputId" 

Example :

<template>
  <div>
    <!-- Your input -->
    <input type="text" id="inputId">

    <date-picker
        v-model="date"
        custom-input="#inputId" 
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      date: '2023-10-15',
    }
  },
}
</script>

🎉 Holidays

If you want to display holidays in the datepicker, use the holidays option.

:holidays="holidays"

Example :

<template>
  <div>
    <date-picker
      v-model="date"
      :holidays="holidays"
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      date: '2023-10-15',
      holidays: {
        "1402/12/29": "روز ملی شدن صنعت نفت ایران",
      },
    }
  },
}
</script>

💸 Day Price

If you want to display price or text for each day, use the dayPrice option.

:dayPrice="priceList"

Example :

<template>
  <div>
    <date-picker
      v-model="date"
      :dayPrice="priceList"
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      date: '2023-10-15',
      priceList : {
        "1402/06/30": "1500",
        "1402/07/30": "your text",
      } ,
    }
  },
}
</script>

⚡ Action Method

If you want to add an action when submitting a date in the datepicker, use the action option.

:action="yourMethod"

Example :

<template>
  <div>
    <date-picker
      v-model="date"
      :action="yourMethod"
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      date: '2023-10-15',
      priceList : {
        "1402/06/30": "1500",
        "1402/07/30": "your text",
      } ,
    }
  },
  methods: {
    yourMethod() {
      console.log('run your method ... ')
    }
  }
}
</script>

🖥️ Desktop View

If you want to use this plugin on desktop, use the desktop-view option:

desktop-view="true"

Example :

<template>
  <div>
    <date-picker
      v-model="date"
      desktop-view="true"
    />
  </div>
</template>

🔍 Get Visible Value

If you want to get the visible value or know whether the dialog is open or closed, use the @getVisibleValue method.

@getVisibleValue="yourMethod"

Example :

<template>
  <div>
    <date-picker
      v-model="date"
      @getVisibleValue="yourMethod"
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      date: '2023-10-15',
      priceList : {
        "1402/06/30": "1500",
        "1402/07/30": "your text",
      } ,
    }
  },
  methods: {
    yourMethod(visibleValue){
      console.log("visibleValue => " , visibleValue)
    } ,
  }
}
</script>

🌑 Dark Mode

If you want to set Dark Mode, use the dark option:

:dark="true"

Example :

<template>
  <div>
    <date-picker
      v-model="date"
      :dark="true"
    />
  </div>
</template>

✅ Submit text

If you want to change the default submit text, use submitText.

submitText="Submit"

Example :

<template>
  <div>
    <date-picker
      v-model="date"
      submitText="Submit"
    />
  </div>
</template>

Built With

• Vue.js - The Progressive JavaScript Framework.

• Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.

• moment-jalaali - A Jalaali (Jalali, Persian, Khorshidi, Shamsi) calendar system plugin for moment.js.

• vue-persian-datetime-picker - A Vue plugin to select Jalali date and time.