You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

vue-persian-datetime-picker

Package Overview
Dependencies
1
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-persian-datetime-picker

A vue plugin to select jalali date and time


Version published
Weekly downloads
841
decreased by-33.09%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

vue-persian-datetime-picker

npm version

A vue plugin to select jalali date and time

See documentation and demo at vue-persian-datetime-picker

If you are using vuejs 3, please refer to this repository.

Installation

browser

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-jalaali@0.9.2/build/moment-jalaali.js"></script>
<script src="/dist/vue-persian-datetime-picker.umd.min.js"></script>
<div id="app">
  <date-picker v-model="date"></date-picker>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    date: '1397/02/02'
  },
  components: {
    DatePicker: VuePersianDatetimePicker
  }
});
</script>

npm

npm install vue-persian-datetime-picker --save

Configuration for 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

// main.js
//...
import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
Vue.component('date-picker', VuePersianDatetimePicker);
//...

Or in component

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

You can also set default values:

// main.js
import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
Vue.use(VuePersianDatetimePicker, {
  name: 'custom-date-picker',
  props: {
    inputFormat: 'YYYY-MM-DD HH:mm',
    format: 'jYYYY-jMM-jDD HH:mm',
    editable: false,
    inputClass: 'form-control my-custom-class-name',
    placeholder: 'Please select a date',
    altFormat: 'YYYY-MM-DD HH:mm',
    color: '#00acc1',
    autoSubmit: false,
    //...  
    //... And whatever you want to set as default 
    //... 
  }
});

Then use in component

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

Click to see full documentation and demo

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.

License

This project is licensed under the MIT License

Change log

2.10.4 (2022-03-04)

2.10.3 (2022-01-06)

2.10.2 (2021-12-24)

2.10.1 (2021-11-12)

  • Fixed build problem #191 #190 #188

2.10.0 (2021-11-03)

  • Feat: Added support for display format when using custom-input

2.9.1 (2021-10-31)

2.9.0 (2021-09-27)

2.8.0 (2021-08-01)

2.7.0 (2021-07-23)

2.6.1 (2021-05-17)

2.6.0 (2021-02-05)

2.5.0 (2021-01-30)

2.4.1 (2020-11-13)

2.4.0 (2020-10-17)

  • Added compat-time to display time on the front page (in datetime mode)
  • Fixed clear value #125
  • Fixed disabling in datetime mode #123
  • Fixed timezone in the first and second half of the year #108

2.3.0 (2020-08-30)

  • Added convert-numbers prop that converts numbers to persian in fa locale: <date-picker convert-numbers />

2.2.0 (2020-08-02)

2.1.6 (2020-07-13)

  • Fixed locale-config prop #116
  • Added show-now-btn prop #109

2.1.5 (2020-04-19)

  • Fixed wrong date in Safari browsers
  • Fixed scroll to element (year section)

2.1.4 (2020-01-30)

  • Fixed initial locale value

2.1.2 (2019-09-08)

  • Fixed jumpMinute and roundMinute in datetime mode
  • Fixed time animation effect

2.1.1 (2019-09-07)

  • Fixed JumpMinute and hour change

2.1.0 (2019-08-19)

  • Added "year-month" type <date-picker type="year-month" />. fixed #70
  • Timezone support <date-picker type="datetime" :timezone="true" />. fixed #33

2.0.2 (2019-07-17)

  • Flipped month change buttons in rtl direction
  • Added label to locales. fixed #67
  • Added display format to each locale. fixed #68
  • Fixed wrong date on date-time picker mode

2.0.1 (2019-05-11)

  • Fixed #53
  • Show the next step on submit button click, instead of submitting immediately #41

2.0.0 (2019-01-16)

  • Added gregorian support <date-picker locale="en" />
  • Added locale configuration support
  • Improved css transitions
  • Fixed min-max in time picker

1.1.7 (2018-12-31)

1.1.6 (2018-12-29)

  • Added jumpMinute and roundMinute to time-picker <date-picker type="time" :jumpMinute="5" :roundMinute="true" />
  • Added clear button <date-picker :clearable="true" />
  • Added inline mode <date-picker :inline="true" />
  • Fixed tab key press problem
  • Fixed responsive mode
  • Fixed watching to min-max changes

1.1.5 (2018-09-01)

  • Added emit on open
  • Added feature to highlight items and dates

1.1.4 (2018-08-12)

  • Added label for display
  • Added feature to disable some dates
  • Added feature to disable or enable the datepicker
  • Icons and css styles optimization
  • Load component via script tag

1.1.3 (2018-05-22)

  • Fixed "min-date" bug

1.1.2 (2018-05-12)

  • Updated "moment-jalaali" version to 0.7.3
  • Fixed "display-format" when is editable
  • Reset "view" value

1.1.1 (2018-05-03)

  • Added "append-to"
  • Added "display format"

1.1.0 (2018-05-01)

  • Added default settings feature

1.0.9 (2017-12-25)

  • Clear input value
  • Fixed editable input bug
  • Added "Initial value"
  • Package keywords
  • Fixed css class name
  • Fixed some other bugs

1.0.7 (2017-12-14)

  • Avoid submitting form
  • Auto submit on wrapper click

1.0.5 (2017-12-04)

  • Fixed default value for "value"

Keywords

FAQs

Package last updated on 05 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc