Get the dates between start/end date in ExtJS

Question

I am trying to get the range between two dates. This is the code I use:

          var startDateStr = Ext.getCmp('startDateFoi').getSubmitValue();
           //console.log(startDateStr); // 10-Mar-2015
          var endDateStr = Ext.getCmp('endDateFoi').getSubmitValue();
           //console.log(endDateStr); // 12-Mar-2015

            allDates = [];

            while (startDateStr <= endDateStr) {
                allDates.push(new Date(startDateStr));
                startDateStr.setDate(startDateStr.getDate() + 1);
            }

            console.log(allDates);

What am I missing here? Does the format have to be in some specific type?

Answer 1

This is how I did it after all: First I made a function:

         var ImagedbyDate = function(){ 
           $(document).ready(function(){

        // GET ALL THE DATES BETWEEN TWO SELECTED DAYS AND STORE THEM IN AN ARRAY (allDates[])

             var startDateStr = Ext.getCmp('startDateFoi').getSubmitValue();
             alert(startDateStr);
             var endDateStr = Ext.getCmp('endDateFoi').getSubmitValue();
             alert(endDateStr);

             currentDate = new Date(startDateStr);
             endDate = new Date(endDateStr);
             alert(currentDate);
             allDates = [];

            while (currentDate <= endDate) {
                allDates.push(new Date(currentDate));
                currentDate.setDate(currentDate.getDate() + 1);
            }

Actually I added these two lines:

        currentDate = new Date(startDateStr);
        endDate = new Date(endDateStr);

This is how my items looks:

    {
            region: 'center', 
            title: "Rural Broadband",
            layout: 'fit',
            collapsible: false,
            items: [mappanel] , //mapPanel
            dockedItems: [{ //Toolbar with Actions - Beginn
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                text: 'Current center of the map',
                handler: function(){
                    var c = GeoExt.panel.Map.guess().map.getCenter();
                    Ext.Msg.alert(this.getText(), c.toString());
                    }
                },{
                text: 'See Unassigned Images',
                handler: function(){
                    UnassignedImg();
                    }   
                },
                {
                    fieldLabel: 'Start Date',
                    name: 'startDate',
                    xtype: 'datefield',
                    id: 'startDateFoi',
                    format: 'd-M-Y'
                },
                {
                    fieldLabel: 'End Date',
                    name: 'startDate',
                    id: 'endDateFoi',
                    xtype: 'datefield',
                    format: 'd-M-Y'
                }, ...

I hope this helps someone.

Answer 2

You can use the Ext.Date class to handle this: Ext.Date.diff

// calculate the difference in days between two dates
var diff = Ext.Date.diff(date1, date2, 'd'));

Or if you want the standard JS version so you know how it works:

Fiddle Link

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var processRequest = function() {
                var date1 = Ext.getCmp('date1').getValue();
                var date2 = Ext.getCmp('date2').getValue();

                // JS counts it in milliseconds
                var diff = (date2 - date1) / 1000;

                // Number of seconds in one day
                console.log(diff / 86400);
            };

        Ext.create('Ext.panel.Panel', {
            title: 'Choose a future date:',
            width: 300,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'datepicker',
                id: 'date1',
                minDate: new Date(),
                handler: function(picker, date) {
                    processRequest();
                }
            }, {
                xtype: 'datepicker',
                id: 'date2',
                minDate: new Date(),
                handler: function(picker, date) {
                    processRequest();
                }
            }]
        });
    }
});