Set Date to the Jquery UI datepicker input textbox

Question

I am using jquery ui datepicker.and its working fine .my need is to set the date to the textbox when querystring contain any date

eg my url is localhost:301/?date=2013-12-01

so I want to set this date to input textbox.

my input box html is

<input type="text" id="datepicker" class="txt-cal hasDatepicker" name="addFromDate" date_name="2013-12-11">

I tried some thing but no result.

$(function () {

        var myDate = ?/*how to select the date_name from input textbox
        $('#datepicker').datepicker();
        $('#datepicker').datepicker('setDate', myDate);
        $('#datepicker2').datepicker();
        $('#datepicker2').datepicker('setDate', myDate);
        $('#datepicke3').datepicker();
        $('#datepicke3').datepicker('setDate', myDate);
        $('#datepicker4').datepicker();
        $('#datepicker4').datepicker('setDate', myDate);


    });

Thanks in advance

Can you provide us with a jsfiddle? You should call `.datepicker() `first and then `.datepicker('setDate', date)` on it — RononDex, Dec 12 '13 at 11:56
set your date format `dateFormat : 'yy-mm-dd' ` then you can assign you date value — Ashok Maharjan, Dec 12 '13 at 12:04

score 4 · Accepted Answer · edited May 23 '17 at 12:01

A better approach will be using custom data attribute.

data-date="2013-12-11"

Now you can access it

var myDate = $("#datepicker").data("date");
$('#datepicker').datepicker('setDate', myDate);

Update:

I doubt you're trying to get it from url(ie, query string)

If so check this answer, where a method is written to get

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Now

var myDate = getParameterByName("date");

score 1 · Answer 2 · answered Dec 12 '13 at 11:57

1

You need to use the .attr function:

var myDate = $("#datepicker").attr("date_name");

However, you should beware of creating non-standard HTML attributes

answered Dec 12 '13 at 11:57

CodingIntrigue

75,930
30
170
176

score 0 · Answer 3 · answered May 20 '16 at 10:41

You can do this:

$('#datepicker1').datepicker({ orientation: 'top', format: 'dd-mm-yyyy' });

var currentDate = new Date();
var day = ((currentDate.getDate()).toString().length == 1) ? '0' + (currentDate.getDate()).toString() : (currentDate.getDate()).toString();
var month = ((currentDate.getMonth() + 1).toString().length == 1) ? '0' + (currentDate.getMonth() + 1).toString() : (currentDate.getMonth() + 1).toString();
var year = currentDate.getFullYear();
$("#datepicker1").val(day + '-' + month + '-' + year);

I have tried in text input control. It just needed to apply datepicker 1st then set the current date to textbox.

Set Date to the Jquery UI datepicker input textbox

3 Answers3