icklechris / jquery-date-dropdowns Goto Github PK

I have implemented your date-dropdown in Asp.net MVC5.
Their are various input box where i have implemented this.
But Basically i do need required validation for only 2 field, but it is working only for one field. I couldn't find the issues or solved it.

Please help !

Where Validation is working !!

<input class="dateDD form-control" id="Q23_DateOfConvictionFelony" name="Q23_DateOfConvictionFelony" type="hidden" value="03/03/2015" required="required">

<select class="month valid" name="date_[month]" required="required" aria-required="true" aria-describedby="date_[month]-error" aria-invalid="false">....</select>

<select class="day valid" name="date_[day]" required="required" aria-required="true" aria-describedby="date_[day]-error" aria-invalid="false">...</select>

<select class="year" name="date_[year]" required="required">...</select>

Where validation is not working !!

<input class="dateDD form-control" id="Q24_DateOfRelease" name="Q24_DateOfRelease" type="hidden" value="" required="required">

<select class="month" name="date_[month]" required="required">...</select>
<select class="day" name="date_[day]" required="required">...</select>
<select class="year" name="date_[year]" required="required">...</select>

Jquery Code !!

  $(".dateDD").dateDropdowns({
            daySuffixes:false,
            defaultDateFormat: "mm/dd/yyyy",
            submitFormat: "mm/dd/yyyy",
            displayFormat: "mdy",
            required: true

        });

I selected a date. then I change the values in the date drop-downs to day, month and year. Even then it's showing the date that I selected before.

Currently, the minAge and maxAge only take year into account when calculating the values. Depending on the time of year, a minAge set at 13 can potentially allow 12yr + 1-11 month-old people pass through. Doesn't make any sense, or seem any different from min or max year parameters.

Please add a possibility to overwrite monthShort and monthLong with localized versions.

This would be useful when working e.g. with bootstrap, when you want to assign existing classes to elements instead of using custom css.

In the config.:

datePicker.dateDropdowns({
    dropdownClass: 'form-control'
});

And in the plugin:

buildBaseDropdown: function(type) {
    return $("<select></select>", {
        class: type + ' ' + this.config.dropdownClass,
        name: this.config.submitFieldName + "_[" + type + "]"
    });
}

Documentation and demo states defaultInput sets the initial date (as far as I understand) but in fact defaultDate does this.

Pls, add maxDate to API, example:
now: january 2019
maxDate: 01.02.2019
I don't set February 2019

When no one modify the date in the picker, then defaultDate has to be used.
The problem is that this defaultDate is stored without converting it into the submitFormat that I have choose.

$("#date").dateDropdowns({
submitFieldName: 'date',
submitFormat: 'mm/dd/yyyy',
defaultDate: '2001-02-01'
});

In this case, if I submit the value this will remain 2001-02-01 and never been changed to the submitFormat requested.

The issue is when i was designing for mobile breakpoints , noticed that date drop down is discarding all the media queries and taking only the main css.

HTML:

<input type="text" id="dob"/>

JS:

$("#dob").dateDropdowns({
        submitFormat: "dd-mm-yyyy",
        daySuffixes: false,
        submitFieldName: 'dob'
});

Output:

"dob" => null
  "dob_" => [
    "day" => "17"
    "month" => "11"
    "year" => "1957"
  ]

Why my dob is NULL?

I am trying to setup two date-dropdowns but i get this error "Uncaught Error: Duplicate element found"
I check the attribute "name" for both and those are different

<input type="hidden" name="start_date_mob" id="start_date_mob" class="date_dropdown">

<input type="hidden" name="finish_date_mob" id="finish_date_mob" class="date_dropdown">

$('.date_dropdown').dateDropdowns
        defaultDateFormat: 'dd/mm/yyyy'
        submitFormat: 'dd/mm/yyyy'
        defaultDate: day + '/' + month + '/' + year
        minYear: year
        maxYear: year

Hi Chris , this is a very good plugin. I have added few more enhancement for some date formats. Please Review those changes and reply me if these are fine on :- [email protected]

Please provide a method that will allow us to reverse the HTML modifications done by this plugin. Something similar to destroy.

Thanks for the plugin!

Followup on #5

This change introduced a side effect.

hiddenField = this.$element.attr("type", "hidden")
    .attr("name", this.config.submitFieldName)
    .wrap("<div class=\"" + this.config.wrapperClass + "\"></div>");

If the plugin is called on an existing input element, and that input element already has a name attribute that attribute it gets overwritten (i.e. it currently sets it to default value of submitFieldName - 'data'). This is not good behavior, since name attributes are used to build post data and this can break forms.

IMHO it could work like this:

• input has name, no submitFieldName => keep input name
• input has name, submitFieldName is set => use submitFieldName
• input has no name, no submitFieldName => default value of submitFieldName ('date')

Inside bindChangeEvent you are checking if date is invalid with checkDate and if so you return back without triggering change event even though you are changing date inside checkDate:

    checkDate: function (day, month, year) {
        var invalidDate;

        if (month !== '00') {
            var numDaysInMonth = (new Date(year, month, 0).getDate()),
                selectedDayInt = parseInt(day, 10);

            invalidDate = this.updateDayOptions(numDaysInMonth, selectedDayInt);

            // If the date is invalid, empty the hidden field to prevent invalid submissions
            if (invalidDate) {
                this.internals.objectRefs.hiddenField.val('');
            }
        }

        return invalidDate;
    }

We should add:

                    this.internals.objectRefs.hiddenField.change();

right after this.internals.objectRefs.hiddenField.val('');

OR

Add it inside bindChangeEvent just before return false.

            if (invalidDate) {
                objectRefs.dayDropdown.addClass('invalid');
                return false;
            }

This causes that in case you select December 31st and you switch to february, change event won't be triggered even though is invalid date. But I think it really should

Dynamically set date is not working

Thanks for putting this nice plugin together!

I noticed currently there is no option to make the date input required.

I know the final input that collects the entire date is of type="hidden" and as such it can't be required according to the standards.

On the other hand, it would be useful to figure out a way around this. For example the validation could be done through JavaScript inside the plugin, and in case some value is missing the plugin can mark the parent form as invalid or emit a custom event.

Thoughts?

Am using this date drop downs , now I want to show only year drop down, No need for month and year drop down. I tried like this
displayFormats: "y"
but It didn't work.

According to documentation

// Specify the name attribute for the hidden field that will contain the formatted date for submission.
submitFieldName: "date", 

It seems that it sets the name only for the 3 input fields, but not for the formatted hidden input.
Looking at the sources

    // Build a hidden input and set this.$element as the wrapper
    hiddenField = $("<input/>", {
        type: "hidden", // Set to type hidden after development
        name: this.internals.submitFieldName
    });

Should probably be:

     name: this.config.submitFieldName

In build year, i see sort year by decreasing, but if i want sort year by accending. Can you do it

Is it possible to set defaults like labels, classes, or formats for dateDropdowns(), so next time it is called earlier specified options are not need to redefined? or maybe create a var with options and somehow use it in every call?

the value "Year" is being removed when a user submits a form and has a model validation failure on other, not related, inputs.