0

How to do this effect in jquery datepicker?

I click on the item (eg. Textbox), which contains the date in the format 2016-12-28. An example given date is Wednesday.

I want to click open a small calendar (datepicker), in which the active Only days from Monday to Friday that contain this date.

Christian Gollhardt
  • 16,510
  • 17
  • 74
  • 111
Rafik73
  • 51
  • 1
  • 2
  • 13

2 Answers2

0

I adjusted the answer from to also get Friday for the week of a given date: JavaScript - get the first day of the week from current date

First, get the dates for Monday and Friday for the date in the text box. Then set the maximum and minimum date for your date picker.

See my solution on JS Fiddle

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<input type="text" id="tbDate" class="datepicker" value="2016-12-28" />

<script type="text/javascript">
$(document).ready(
  function() {

    //GET THE DATE FROM THE TEXT BOX
    var placeholder = $("#tbDate").val();
    //MAKE A DATE FROM THE TEXT BOX VALUE
    d = new Date(placeholder);

    //MAKE THE TEXT BOX A DATE PICKER
    $(".datepicker").datepicker({
      minDate: x(d), //SET THE MIN ALLOWED DATE FOR YOUR DATE PICKER
      maxDate: y(d), //SET THE MAX ALLOWED DATE FOR YOUR DATE PICKER
      numberOfMonths: 2,
      beforeShowDay: $.datepicker.noWeekends,
      dateFormat: 'yy-mm-dd'
    });
  });

//FIND THE DAYS OF WEEK DESIRED FOR THE WEEK OF GIVEN DATE  
function x(d) {
  var date = new Date(d);
  if (date.getDay() > 0) {
    date.setDate(date.getDate() - (date.getDay() - 1));
    return date;
  } else {
    return date;
  }
}

function y(d){
  var date = new Date(d);
  if (date.getDay() < 6) {
    date.setDate(date.getDate() + ((6 - date.getDay())));
    return date;
  } else {
    return date;
  }
}


</script>
Community
  • 1
  • 1
godfathr
  • 416
  • 5
  • 12
  • how do you know what plugin OP is even using? – charlietfl Dec 31 '16 at 22:16
  • I don't. I suppose I should have asked. But it sounded like he didn't know how to add a date picker to a text box nor set its options. I just ran with the assumption that out of the box jQuery-UI and JS as a whole would provide a usable solution for him. – godfathr Jan 01 '17 at 01:12
  • I updated the script to address a bug where if the day of week was 0 (Sunday), the script would break by making the max date less than the min date. – godfathr Jan 01 '17 at 03:09
  • Thank you for your help. I did not write that the date is selected from the textboxes generated in the loop in chronological order, eg: 2017-01-03 2017-01-10 2017-01-17 2017-01-24 etc. So I think the variable "placeholder" must be a class, not a id. – Rafik73 Jan 01 '17 at 16:10
  • i just used a place holder to demonstrate a value. you can populate it however you want. – godfathr Jan 01 '17 at 16:11
  • The value "placeholder" changes dynamically depending on what date I click. – Rafik73 Jan 01 '17 at 16:12
  • What will advise? The event "click" or "change"? – Rafik73 Jan 01 '17 at 16:14
  • Without seeing your markup or what code you have, it's hard to say. Does your data source change available values? Is it strictly in a static list of date? Are users entering dates of their choice? Can you please provide more information? – godfathr Jan 01 '17 at 17:25
  • A list of dates (every Friday) is generated in the loop every week and displayed in the textbox read only. When I want to change the selected date in textbox I click, I get a calendar and I can change it. – Rafik73 Jan 01 '17 at 17:34
  • I thought your question was how to display a calendar with only Monday-Friday for a given date. It sounds like you are asking for something different now. Can you explain exactly what you need and show your markup? It'll be helpful to see what you have so far and to see what you are asking for. – godfathr Jan 02 '17 at 01:36
0

I try like this:

$('.oz_m_data').click(function() {
//GET THE DATE FROM THE TEXT BOX
var placeholder = $(this).val();    
//MAKE A DATE FROM THE TEXT BOX VALUE
d = new Date(placeholder);

//MAKE THE TEXT BOX A DATE PICKER
$(this).datepicker({
  minDate: x(d), //SET THE MIN ALLOWED DATE FOR YOUR DATE PICKER
  maxDate: y(d), //SET THE MAX ALLOWED DATE FOR YOUR DATE PICKER
  numberOfMonths: 1,
  beforeShowDay: $.datepicker.noWeekends,
  dateFormat: 'yy-mm-dd'

}).datepicker( "show" );
Rafik73
  • 51
  • 1
  • 2
  • 13