css - How to style first and last element in the selected date range in JQuery datepicker? -


i can't solve 1 thing, how can style first , last element of selected date range in jquery ui datepicker? have code: 

 $(document).ready(function() {          // jquery datepicker settings          $(function() {              $("#datepicker").datepicker({                  numberofmonths: 3,                  showbuttonpanel: false,                  mindate: 0,                  beforeshowday: function(date) {                      var date1 = $.datepicker.parsedate($.datepicker._defaults.dateformat, $('#start-date').val());                      var date2 = $.datepicker.parsedate($.datepicker._defaults.dateformat, $('#end-date').val());                      if (date >= date1 && date <= date2) {                          return [true, 'ui-state-selected-range', ''];                      }                      return [true, '', ''];                  },                  onselect: function(datetext, inst) {                      var date1 = $.datepicker.parsedate($.datepicker._defaults.dateformat, $('#start-date').val());                      var date2 = $.datepicker.parsedate($.datepicker._defaults.dateformat, $('#end-date').val());                      if (!date1 || date2) {                          $('#start-date').val(datetext);                          $('.start-date-visible').text(datetext);                          $('#end-date').val('');                          $('.end-date-visible').text('');                          $(this).datepicker('option', datetext);                      } else {                          $('.end-date-visible').text(datetext);                          $('#end-date').val(datetext);                          $(this).datepicker('option', null);                      }                  }              });          });      });
td.ui-state-selected-range {     border: none !important;     padding: 1px 0 1px 0 !important;     background: none !important;     overflow:hidden;   }  td.ui-state-selected-range {     background-color: #f8c3b1;     border: 1px solid #f29676 !important;     border-right: none !important;     border-left: none !important;   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">    <input type="text" id="start-date" style="visibility: hidden">  <input type="text" id="end-date" style="visibility: hidden">  <div class="start-date-visible"></div>  <div class="end-date-visible"></div>  <div id="datepicker"></div>

i need style first , last selected elements , elements between them, should this:

screenshot

i have no idea how , banking on help!

you can in beforeshowday , check if date start , end date apply css.

if (date1 && date2 && date && (date1.gettime() == date.gettime() || date2.gettime() == date.gettime())) {           return [true, 'ui-red', ''];         }

i've added ui-red class start , end day.

$(document).ready(function() {    // jquery datepicker settings    $(function() {      $("#datepicker").datepicker({        numberofmonths: 3,        showbuttonpanel: false,        mindate: 0,        beforeshowday: function(date) {            var date1 = $.datepicker.parsedate($.datepicker._defaults.dateformat, $('#start-date').val());          var date2 = $.datepicker.parsedate($.datepicker._defaults.dateformat, $('#end-date').val());          if (date1 && date && (date1.gettime() == date.gettime())) {            return [true, 'ui-red-start', ''];          }          if (date2 && date && (date2.gettime() == date.gettime())) {            return [true, 'ui-red-end', ''];          }            if (date >= date1 && date <= date2) {            return [true, 'ui-state-selected-range', ''];          }          var d = date.gettime();            return [true, '', ''];        },        onselect: function(datetext, inst) {          var date1 = $.datepicker.parsedate($.datepicker._defaults.dateformat, $('#start-date').val());          var date2 = $.datepicker.parsedate($.datepicker._defaults.dateformat, $('#end-date').val());          if (!date1 || date2) {            $('#start-date').val(datetext);            $('.start-date-visible').text(datetext);            $('#end-date').val('');            $('.end-date-visible').text('');            $(this).datepicker('option', datetext);          } else {            if (new date(datetext) < date1) {              var sdate = $('#start-date').val();              $('.start-date-visible').text(datetext);              $('#start-date').val(datetext);              $(this).datepicker('option', null);                $('.end-date-visible').text(sdate);              $('#end-date').val(sdate);              } else {              $('.end-date-visible').text(datetext);              $('#end-date').val(datetext);              $(this).datepicker('option', null);            }          }        }      });    });  });
td.ui-state-selected-range {    background: none !important;    border: none !important;  }    td {    width: 40px;    height: 40px;  }    td {    text-align: center !important;  }    .ui-red-start {    background: #f29676;    border-radius: 50% 0 0 50%;  }    .ui-red-end {    background: #f29676;    border-radius: 0 50% 50% 0;  }    .ui-red-start .ui-state-default,  .ui-red-end .ui-state-default {    border: none !important;    ;    background: none !important;    ;    font-weight: normal;    color: #454545 !important;    ;  }    .ui-state-selected-range {    border: none !important;    font-weight: normal;    background: #f8c3b1 !important;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">      <input type="text" id="start-date" style="visibility: hidden">  <input type="text" id="end-date" style="visibility: hidden">  <div class="start-date-visible"></div>  <div class="end-date-visible"></div>  <div id="datepicker"></div>


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more