javascript - Set Date to the Jquery UI datepicker input textbox - Stack Overflow

admin管理员组

文章数量:1356254

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

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

• javascript
• jquery
• jquery-ui
• datepicker

Share Improve this question Follow asked Dec 12, 2013 at 11:53 ArunArun 1,4821212 gold badges3333 silver badges5959 bronze badges 4

• Can you provide us with a jsfiddle? You should call .datepicker() first and then .datepicker('setDate', date) on it – RononDex Commented Dec 12, 2013 at 11:56
• jsfiddle/D9N6a/2 – Arun Commented Dec 12, 2013 at 12:01
• 2 Here you go: jsfiddle/D9N6a/3 – RononDex Commented Dec 12, 2013 at 12:04
• set your date format dateFormat : 'yy-mm-dd' then you can assign you date value – Ashok Maharjan Commented Dec 12, 2013 at 12:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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");

You need to use the .attr function:

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

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

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.

本文标签： javascriptSet Date to the Jquery UI datepicker input textboxStack Overflow