asked on

Hide a div when user select a date from the datepicker

Hi,

I have a date time picker calendar on my site.

what I want is to hide my div when the user select from the date time picker a date
and to show my div when the user does not select from the date time picker date.

this is what I have but it's not working:

<script>
    $(document).ready(function () {

 $('#MigrationDateRequiredDiv').hide();


        $('#MigrationDatePicker').keypress(function(e) {
            e.preventDefault();
        }); 


  $(function () {
            $('#MigrationDatePicker').datetimepicker(
                {
                    format: 'MM/DD/YYYY'
                }
                );
        });




  $("#MigrationDate").on('change', function() {
            if ($("#MigrationDatePicker").val() != '') {
                $('#MigrationDateRequiredDiv').hide();
            }
            else {
                $('#MigrationDateRequiredDiv').show();
            }
        });





    });


</script>



                             <div class='input-group date' id='MigrationDatePicker' style="width:100%;">
                                @Html.TextBoxFor(x => x.MigrationDate, new {@class = "form-control", @style = "width:100%" })
                                <span class="input-group-addon" style="width:0px;">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span> 
                            </div>

                            <div id="MigrationDateRequiredDiv" style="color:#bc0606;font-weight:bold;">Required Field</div>

Open in new window

Thank you for all your help,
Lulu50

Michel Plungjan

Could you please fork this and make a working example?

https://jsfiddle.net/mplungjan/sauzpe9d/

I do not know what
@Html.TextBoxFor(x => x.MigrationDate, new {@class = "form-control", @style = "width:100%" })
renders like and currently my fiddle does not show a picker

lenamtl

Hi,

That's depends on the date plugin you are using.

I would check the plugin documentation events, select , unselect, clear manually and using the included buttons / links.
Beware some pluging event if you delete manually the date, the date may still be selected into the calendar.
And clear manullay mays be a different event vs clear using a button / link that some datepicker have.

lulu50

ASKER

Michel,

I don't see the difference between your code and what I posted.

$(document).ready(function() {
  $('#MigrationDateRequiredDiv').hide();
  $('#MigrationDatePicker').keypress(function(e) {
    e.preventDefault();
  });
  $(function() {
    $('#MigrationDatePicker').datetimepicker({
      format: 'MM/DD/YYYY'
    });
  });

  $("#MigrationDate").on('change', function() {
    if ($("#MigrationDatePicker").val() != '') {
      $('#MigrationDateRequiredDiv').hide();
    } else {
      $('#MigrationDateRequiredDiv').show();
    }
  });
});


I'm not sure what to do

Open in new window

Michel Plungjan

Please update the fiddle I gave you with the RENDERED code. I cannot help you if I do not have relevant HTML
The code you posted and I copied verbatim to jsfiddle does NOT show a datetimepicker at all so I cannot help you

lenamtl

Hi,

You should create a jsfiddler or at least point which datetimepicker you are using.

lulu50

ASKER

Hi

Guess what?

I fixed my own issue.

I got it to work!!!.

  $("#MigrationDate").on("dp.change", function (e) {
       
            if ($("#MigrationDate").val() != '') {
                        $('#MigrationDateRequiredDiv').hide();
                    }
                    else {
                        $('#MigrationDateRequiredDiv').show();
                    }
        });

Open in new window

ASKER CERTIFIED SOLUTION

lulu50

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lulu50

ASKER

Thank you

Michel Plungjan

Great. Congrats.

So now we at leest know it might be http://eonasdan.github.io/bootstrap-datetimepicker/

Please let us know next time so we have a clue.