javascript - issue in disabling dates on datepicker -


i using vue-date-range date picker. here using disabledstart , disabledend props not disabling date on view. disabling date required object. passing object doesn't work.i don't know correct object format disabling dates.

any appreciated plugin link https://www.npmjs.com/package/vue-date-range

here html 

  <div class="form-group form-group-lg">                 <label>when required?</label>                  <daterange class="calendar"                    :sync-range.sync="range"                    :disable-days-before-today="disabledaysbeforetoday"                   :days-disabled-start="disablestart"                   :days-disabled-end="disableend"                   :lang="lang" @change="onchange">                   </daterange>                </div>

js

<script> import { daterange } 'vue-date-range'; export default {     data() {     return {       lang: 'en',       disabledaysbeforetoday: true,       disablestart: { startdate:moment()},       disableend: {        enddate: moment().add(7, 'days')       },       range: {}     }    },   components: {     'daterange': daterange   },    methods: {      onchange(range) {       console.log("start", range.startdate._d);       console.log("end", range.enddate._d);     },     disable() {       console.log("on button click disable dates");       this.disablestart._d = new date('2017-08-25').tostring()       }     }   } </script>

as phil pointed out, after looking source code of library, can confirm object used moment.js's date object.
pass moment.js's date object days-disabled-start , days-disabled-end.

see demo below.

new vue({      el: '#range',      components: {          'daterange':daterange.daterange      },      data() {        return {          lang: 'en',          range: {            startdate: moment(),            enddate: moment().add(2, 'days')          },          disablestart: moment().add(3, 'days'),          disableend: moment().add(6, 'days')        };      },      methods: {        onchange(range) {          this.range = range;        },        setrange (p) {          if (typeof p === 'number') {            console.log(p)            this.range = {              startdate: moment().add(p, 'days'),              enddate: moment()            }          }        },      }  });
<script src="https://cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>  <script src="https://unpkg.com/vue-date-range@2.2.2/dist/vue-date-range.min.js"></script>  <div id="range" class="calendar-wrapper">      <span>{{range.startdate.format('yyyy-mm-dd')}}</span>~<span>{{range.enddate.format('yyyy-mm-dd')}}</span>      <daterange class="calendar"         :sync-range="range"         :lang="lang"         :days-disabled-start="disablestart"        :days-disabled-end="disableend"        @change="onchange">      </daterange>      <button @click.stop.prevent="setrange(-7)">last 7 days</button>      <button @click.stop.prevent="setrange(-30)">last 1 month</button>  </div>


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more