10

We're using jquery UI 1.8.23 at my workplace.

How can I capture the date clicked in datepicker, so I can format the current date into a datestamp and pass that value into a hidden form field?

Here's some code I've tried to get working:

$('.ui-state-default').live('click', function(){
    console.log('date clicked');
    var currentdate = $(this).text();
    var d = currentdate;
    var m = monthFormat($('.ui-datepicker-month').text());
    var y = $('.ui-datepicker-year').text();
    $('a.ui-state-default').removeClass('ui-state-highlight');
    $(this).addClass('ui-state-highlight');

    if (currentdate.length < 2) {
    d = "0" + currentdate;
    }
    var datestamp = y + "-" + m + "-" + d;
    console.log(datestamp);
    $('#dateHidden').val(datestamp);
});

Thanks for looking at my code I appreciate any help you guys can offer.

1

4 Answers 4

21

You don't need to do anything to format the date. The DatePicker widget does it for you. Just use the altField and altFormat properties:

$("#myDatePicker").datepicker({
    // The hidden field to receive the date
    altField: "#dateHidden",
    // The format you want
    altFormat: "yy-mm-dd",
    // The format the user actually sees
    dateFormat: "dd/mm/yy",
    onSelect: function (date) {
        // Your CSS changes, just in case you still need them
        $('a.ui-state-default').removeClass('ui-state-highlight');
        $(this).addClass('ui-state-highlight');
    }
});

Documentation:

http://api.jqueryui.com/datepicker/#option-altField

http://api.jqueryui.com/datepicker/#option-altFormat

Demonstration:

http://jsfiddle.net/sFBn2/10/

6
  • and how is that outputting a value to a hidden field? Sep 5, 2013 at 15:28
  • 1
    It does it automatically. That's what the altField is there for. Sep 5, 2013 at 15:29
  • OK but how can I tell if the value is being passed to the hidden field if Chrome developer tools doesn't update during the onSelect event? Sep 5, 2013 at 15:38
  • Check the jsFiddle I've added to the answer. Sep 5, 2013 at 15:40
  • Works fine as a standalone fiddle but the hidden field is added using append() and the id is different. Here's my fork jsfiddle.net/bitmapshades/LFpwN/2 Sep 5, 2013 at 15:51
2
$('#calendar').datepicker({
        inline: true,
        firstDay: 1,
        changeMonth: false,
        changeYear: true,
        showOtherMonths: true,
        showMonthAfterYear: false,
        yearRange: "2015:2025",      
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        dateFormat: "yy-mm-dd",
        onSelect: function (date) {
            alert(date);
        }
    });
1
  • You should add a description to your solution.
    – user4698813
    May 5, 2015 at 5:47
1

jQuery Datepicker gives the option of formatting date. So why don't you make use of that?

$('element').datepicker({ dateFormat: 'dd-mm-yy' });

Also you don't need of a separate method to capture the click event. You the default method onSelect

$('input').datepicker({
 dateFormat: 'yy-mm-dd',
    onSelect: function (date) {
    //defined your own method here
    alert(date);
    }
})

Check this JSFiddle

4
  • all that does is set the attribute class="hasDatepicker" on the hidden field. (I didn't down vote you myself). Sep 5, 2013 at 15:31
  • @bitmapshades You're trying to assign the value to an hidden field. I could not get what you're trying to add datepicker class?Correct me if I was wrong.
    – Praveen
    Sep 5, 2013 at 15:34
  • I wasn't even aware that I needed to use the datepicker class to capture a click event with the datepicker component until today but thanks for chiming in. Sep 5, 2013 at 16:11
  • @bitmapshades I'm glad I was able to help :)
    – Praveen
    Sep 5, 2013 at 16:23
0

Your datepicker listens that.

see onSelect() function

Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

$('.date-pick').datepicker( {
    onSelect: function(date) {
        //play with date here
    },
----
----
---

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.