Yapapaya / jquery-cloneya

A jquery plugin to clone DOM elements
MIT License
76 stars 28 forks source link

Bootstrap-Datepicker (daterange) dan Bootstrap-Timepicker #52

Closed aelan-id closed 8 years ago

aelan-id commented 8 years ago

Hi,

I would ask about Bootstrap-Datepicker and Bootstrap-Timepicker, In my case seems to be not work properly, after clone process daterangepicker turned into datepicker, I can change the date in enddate becomes smaller than startdate.

And for my case in Bootstrap-Timepicker, i could not applying the right command to make the cloning result works well.

Here is my code :

.on('before_clone.cloneya', function (event, toClone) {
  toClone.find('input.daterange_picker').each(function() {
    $(this).datepicker('remove');
  });
  toClone.find('input.time_picker').each(function() {
    $(this).timepicker('remove');
  });
})
.on('after_clone.cloneya', function (event, toClone, newclone) {
  toClone.find('input.daterange_picker').each(function() {
    $(this).datepicker({
      startDate: date,
      autoclose: true,
      format: 'yyyy-mm-dd',
      todayHighlight: true,
    });
  });
  toClone.find('input.time_picker').each(function() {
    $(this).timepicker({
      minuteStep : 5,
      showMeridian : false,
      showInputs : false
    });
  });
})
.on('before_append.cloneya', function (event, toClone, newclone) {
  $(newclone).css('display', 'none');
  $(toClone).fadeOut('fast', function () {
    $(this).fadeIn('fast');
  });
  toClone.find('input.daterange_picker').each(function() {
    $(this).datepicker({
      startDate: date,
      autoclose: true,
      format: 'yyyy-mm-dd',
      todayHighlight: true,
    });
  });
  toClone.find('input.time_picker').each(function() {
    $(this).timepicker({
      minuteStep : 5,
      showMeridian : false,
      showInputs : false
    });
  });
})
.on('after_append.cloneya', function (event, toClone, newclone) {
  $(newclone).slideToggle();
  console.log('finished cloning ' + toClone.attr('id') + ' to ' + newclone.attr('id'));
  newclone.find('input.daterange_picker').each(function() {
    $(this).datepicker({
      startDate: date,
      autoclose: true,
      format: 'yyyy-mm-dd',
      todayHighlight: true,
    });
  });
  newclone.find('input.time_picker').each(function() {
    $(this).timepicker({
      minuteStep : 5,
      showMeridian : false,
      showInputs : false
    });
  });
})

Realy appreciate if someone can help for this case.

And this the result examples : daterange_and_time_picker

The css trick in 239 not work for me.

actual-saurabh commented 8 years ago

@aelan-id would you be kind enough to put your code on jsfiddle so I don't have to set up everything to test this.