javascript - pikaday - obteniendo el valor de arranque de arranque de daterangepicker

daterangepicker reset

Question

Hola, soy nuevo en el uso de JavaScript y encontré un problema al usar el bootstrap daterangepicker. Me encargo de implementar esta demostración que obtuve, pero estoy atascado en obtener el valor de la fecha de inicio y la fecha de finalización de la javascript.

Este es el javascript

<script type="text/javascript">
$(document).ready(function() {
$(''#reportrange'').daterangepicker(
{
startDate: moment().subtract(''days'', 29),
endDate: moment(),
minDate: ''01/01/2012'',
maxDate: ''12/31/2014'',
dateLimit: { days: 60 },
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
''Today'': [moment(), moment()],
''Yesterday'': [moment().subtract(''days'', 1), moment().subtract(''days'', 1)],
''Last 7 Days'': [moment().subtract(''days'', 6), moment()],
''Last 30 Days'': [moment().subtract(''days'', 29), moment()],
''This Month'': [moment().startOf(''month''), moment().endOf(''month'')],
''Last Month'': [moment().subtract(''month'', 1).startOf(''month''), moment().subtract(''month'', 1).endOf(''month'')]
},
opens: ''left'',
buttonClasses: [''btn btn-default''],
applyClass: ''btn-small btn-primary'',
cancelClass: ''btn-small'',
format: ''DD/MM/YYYY'',
separator: '' to '',
locale: {
applyLabel: ''Submit'',
fromLabel: ''From'',
toLabel: ''To'',
customRangeLabel: ''Custom Range'',
daysOfWeek: [''Su'', ''Mo'', ''Tu'', ''We'', ''Th'', ''Fr'',''Sa''],
monthNames: [''January'', ''February'', ''March'', ''April'', ''May'', ''June'', ''July'', ''August'', ''September'', ''October'', ''November'', ''December''],
firstDay: 1
}
},
function(start, end) {
console.log("Callback has been called!");
$(''#reportrange span'').html(start.format(''D MMMM YYYY'') + '' - '' + end.format(''D MMMM YYYY''));
}
);
//Set the initial state of the picker label
$(''#reportrange span'').html(moment().subtract(''days'', 29).format(''D MMMM YYYY'') + '' - '' + moment().format(''D MMMM YYYY''));
});
</script>

Este es el botón que se va a manejar para hacer clic en el método

<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>

''inicio'' y ''final'' contendrían los valores de las fechas. Si quiero que estos valores sirvan como entradas para el uso posterior de la codificación en mi proyecto, por ejemplo, guardar en la base de datos, ¿cómo puedo llamarlos?

Answer 1

Dale a tu botón una identificación

<button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal">Save changes</button>

Agregue las variables startDate y endDate a su script

var startDate;
var endDate;

Establezca estas variables en la devolución de llamada daterangepicker

startDate = start;
endDate = end;

Conecta el evento click para ese botón en tu función $(document).ready

$(''#saveBtn'').click(function(){
console.log(startDate.format(''D MMMM YYYY'') + '' - '' + endDate.format(''D MMMM YYYY''));
});

El javascript completo

<script type="text/javascript">
var startDate;
var endDate;
$(document).ready(function() {
$(''#reportrange'').daterangepicker(
{
startDate: moment().subtract(''days'', 29),
endDate: moment(),
minDate: ''01/01/2012'',
maxDate: ''12/31/2014'',
dateLimit: { days: 60 },
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
''Today'': [moment(), moment()],
''Yesterday'': [moment().subtract(''days'', 1), moment().subtract(''days'', 1)],
''Last 7 Days'': [moment().subtract(''days'', 6), moment()],
''Last 30 Days'': [moment().subtract(''days'', 29), moment()],
''This Month'': [moment().startOf(''month''), moment().endOf(''month'')],
''Last Month'': [moment().subtract(''month'', 1).startOf(''month''), moment().subtract(''month'', 1).endOf(''month'')]
},
opens: ''left'',
buttonClasses: [''btn btn-default''],
applyClass: ''btn-small btn-primary'',
cancelClass: ''btn-small'',
format: ''DD/MM/YYYY'',
separator: '' to '',
locale: {
applyLabel: ''Submit'',
fromLabel: ''From'',
toLabel: ''To'',
customRangeLabel: ''Custom Range'',
daysOfWeek: [''Su'', ''Mo'', ''Tu'', ''We'', ''Th'', ''Fr'',''Sa''],
monthNames: [''January'', ''February'', ''March'', ''April'', ''May'', ''June'', ''July'', ''August'', ''September'', ''October'', ''November'', ''December''],
firstDay: 1
}
},
function(start, end) {
console.log("Callback has been called!");
$(''#reportrange span'').html(start.format(''D MMMM YYYY'') + '' - '' + end.format(''D MMMM YYYY''));
startDate = start;
endDate = end;
}
);
//Set the initial state of the picker label
$(''#reportrange span'').html(moment().subtract(''days'', 29).format(''D MMMM YYYY'') + '' - '' + moment().format(''D MMMM YYYY''));
$(''#saveBtn'').click(function(){
console.log(startDate.format(''D MMMM YYYY'') + '' - '' + endDate.format(''D MMMM YYYY''));
});
});
</script>

Answer 2

Debe recuperar el objeto de datos:

var startDate = $(''#reportrange'').data(''daterangepicker'').startDate._d;
var endDate = $(''#reportrange'').data(''daterangepicker'').endDate._d;

Observe la solicitud _d al final para obtener el objeto de fecha real de javascript.

Además, si el objeto de data está undefined , puede ser el resultado de que bootstrap.js se vuelva a crear una instancia. Esto me sucedió en una página de MVC donde olvidé rodear mis scripts con:

@region scripts {
}

Answer 3

Simple, obtener directo el rango de entradas:

$(document).ready(function(){
$(''#reportrange span'').bind(''DOMSubtreeModified'', function(e){
alert(''New value is: ''+$(''input[name=daterangepicker_start]'').val()+'' to ''+$(''input[name=daterangepicker_end]'').val());
});
})

Answer 4

$(''#IDOfDateRangePicker'').data(''daterangepicker'').startDate;
$(''#IDOfDateRangePicker'').data(''daterangepicker'').endDate;

Answer 5

var endDate= $("#IDOfDateRangePicker").data(''daterangepicker'').endDate.format(''YYYY-MM-DD'');

u otros formatos;

.endDate.format(''YYYY-MM-DD'');
.endDate.format(''D MM YYYY'');
.endDate.format(''D MMMM YYYY'');