CODEWITHSUNDEEP
jqueryhtmljquery-ui-datepicker
Nejc Galof
Nejc Galof

Reputation: 2614

Datepicker change dateformat

How can I change date on datepicker "#to" dd.mm.yy. Now write mm/dd/yy. If I change / with . correct calculate and id I change (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear(); to (d.getDate() + '/' + d.getMonth() + 1) + '/' + d.getFullYear(); not working to.

Here is code:

$(function () {
    $('#to').attr('disabled', true);
    $("#from").datepicker({
        dateFormat: 'dd.mm.yy',
        onSelect: function (selectedDate) {
            var x = selectedDate.split('.');
            var d = new Date(x[1] + ',' + x[0] + ',' + x[2]);
            var res = d.setDate(d.getDate() + 7);
            var dateMsg = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
            $("#to").removeAttr('disabled').removeClass('hasDatepicker').datepicker({
                minDate: dateMsg
            });
        }
    });
});

and html:

<label for="from">From</label>
<input type="text" id="from" name="from" />
<br/>
<label for="to">to</label>
<input type="text" id="to" name="to" />

Here is all code: http://jsfiddle.net/JBrvn/4/

Upvotes: 0

Views: 120

Answers (3)

achakravarty
achakravarty

Reputation: 408

You have to cast the minDate property to a Date object and not a string. The string that you will get from setting the date is going to be the millisecond value and cannot be rendered by the datepicker. SO just cast the value and it should work just fine

$('#to').attr('disabled', 'disabled');
$("#from").datepicker({
    dateFormat: 'dd.mm.yy',
    minDate: new Date(),
    onSelect: function (selectedDate) {            
        var x = selectedDate.split('.');
        var d = new Date(x[1] + ',' + x[0] + ',' + x[2]);
        var res = d.setDate(d.getDate() + 7);
        $("#to").removeAttr('disabled').datepicker({
         dateFormat: 'dd.mm.yy',
         minDate: new Date(res)                
    });
  }
});

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

DEMO

$(function () {
    $('#to').attr('disabled', true);
    $("#from").datepicker({
        dateFormat: 'dd.mm.yy',
        onSelect: function (selectedDate) {
            var x = selectedDate.split('.');
            var d = new Date(x[1] + ',' + x[0] + ',' + x[2]);
            var res = d.setDate(d.getDate() + 7);
            var dateMsg = d.getDate() + '.' + (d.getMonth() + 1) + '.' + d.getFullYear();
            $("#to").removeAttr('disabled').removeClass('hasDatepicker').datepicker({
                minDate: dateMsg,
                dateFormat: 'dd.mm.yy'
            });
        }
    });
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

why not just set the date format when the widget is initialized - also I've redesigned the solution a bit

$(function () {
    var dateFormat = 'dd.mm.yy';

    $("#from").datepicker({
        dateFormat: dateFormat,
        onSelect: function (selectedDate) {
            var date = $.datepicker.parseDate(dateFormat, selectedDate)
            var tod = date.setDate(date.getDate() + 7);
            $to.prop('disabled', false).datepicker( "option", "minDate", new Date(tod ));
        }
    });
    var $to = $("#to").datepicker({
        dateFormat: dateFormat
    }).prop('disabled', true);
});

Demo: Fiddle

Upvotes: 1

Related Questions