Open daterangepicker calendar by icon

Asked

Viewed 136 times

0

I would like to open this calendar below by clicking on the icon, but the value should go to my input.

var date = new Date();
var primeiroDia = new Date(date.getFullYear(), date.getMonth(), 1).toLocaleDateString();
alert(primeiroDia)
var ultimoDia = new Date(date.getFullYear(), date.getMonth() + 1, 0);



$('#date').daterangepicker({
  "singleDatePicker": true,
  "autoApply": true,
  "locale": {
    "format": "DD-MM-YYYY",
    "separator": " / ",
    "applyLabel": "Apply",
    "cancelLabel": "Cancel",
    "fromLabel": "From",
    "toLabel": "To",
    "customRangeLabel": "Custom",
    "weekLabel": "W",
    "daysOfWeek": [
      "Su",
      "Mo",
      "Tu",
      "We",
      "Th",
      "Fr",
      "Sa"
    ],
    "monthNames": [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    "firstDay": 1,
  },
  "minDate": primeiroDia,
  "maxDate": ultimoDia

}, function(start, end, label) {
  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


<div class="input-group">
  <div class="input-group-addon" id="date">
    <i class="fa fa-calendar"></i>
  </div>
  <input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
</div>

https://jsfiddle.net/hto01c3g/5/]

javascript date

1 answer

1


Guy takes what’s in console.log and turns it into a variable, then puts that variable as .value of input, no mystery...

ódigo da imagem acima:

Follow code from the image above, left commented in the Script where I touched.

var date = new Date();
var primeiroDia = new Date(date.getFullYear(), date.getMonth(), 1).toLocaleDateString();
alert(primeiroDia)
var ultimoDia = new Date(date.getFullYear(), date.getMonth() + 1, 0);



$('#date').daterangepicker({
    "singleDatePicker": true,
    "autoApply": true,
    "locale": {
        "format": "DD-MM-YYYY",
        "separator": " / ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        "firstDay": 1,
    },
    "minDate": primeiroDia,
    "maxDate": ultimoDia

}, function(start, end, label) {
    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    
//aqui que eu pego o que está no console.log e incluo com valor no input
let x = 'New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')';
    let y = document.querySelector('input');
    y.value = x;
});
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


<div class="input-group">
    <div class="input-group-addon" id="date">
        <i class="fa fa-calendar"></i>
    </div>
    <input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
</div>

  • Good morning @hugocsl, how could I capture the current day without having to click the form ?

  • @Diêgocorreiadeandrade looks if it helps you, this script already picks up the current date and places inside the https://codepen.io/hugocsl/pen/NWKEONr input here are several more options to get the current date https://stackoverflow.com/questions/1531093/how-do-i-get-the-current-date-javascript/

  • This can do, but when I click on the incon to change the date it remains the current day set

  • @Diêgocorreiadeandrade I believe it is pq first you have to clean the input before putting the new date, in the event you click on the icon, updated the code there look, when you click on the body, it will put another value in the https://codepen.io/hugocsl/pen/NWKEONrinput

Browser other questions tagged javascript date

You are not signed in. Login or sign up in order to post.