2017-03-02 343 views
1

jqueryの標準datepickerがあります。正常に動作しますが、 "onSelect"は起動しません。なぜ誰かがこれがうまくいかないという考えを持っていますか?また、 "onClose"は機能しません。jquery datepicker onSelectが起動しない

私のjavascript:

var startDatepickerSettings = { 
     format: 'dd.mm.yyyy', 
     todayHighlight: true, 
     weekStart: 1, 
     onSelect: function (date) { 
      console.log(date); 
     }, 
     onClose: function() { 
      console.log("Closed"); 
     } 
    }; 

$('.startDate-selection').datepicker(startDatepickerSettings); 

そして、私のHTML

<input id="product_0_startDate" class="form-control startDate-selection form-control" type="text" readonly="readOnly" required="required" name="product[0][startDate]"> 
+0

任意のマークアップが利用できますか? – KAD

+1

私はあなたが2つの異なるdatepickersを混在させていると思う.. bootstrap datepickerとjquery ui datepicker .. "todayHighlight"はブートストラップピッカーから来て、 "onSelect/onClose"はui pickerからです.. "show/hide"ブートストラップを使用している場合 – Rick

+0

ああ、あなたは正しい@Rickだと思います!感謝!! – Zwen2012

答えて

1

あなたはjqueryのUIの日付ピッカーを使用している場合は、それの方法を使用します。

ここにあなたのためのコードがあります。あなたはjQueryの日付ピッカーまたは日付範囲ピッカーを使用している場合JS Fiddle

0

作業

$(document).ready(function() { 

    var settings = { 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function (date) { 
      var minDate = $(this).datepicker('getDate'); 
      $(this).datepicker('option', 'minDate', minDate); 
      alert("Right"); 
     } 
    } 

    $(".startDate-selection").datepicker(settings); 

}); 

、その後、コードの下に試してみてください。

<input id="product_0_startDate" class="form-control startDate-selection form-control" type="text" readonly="readOnly" required="required" name="product[0][startDate]"> 

    $(document).ready(function() { 



     $(".startDate-selection").datepicker({ 
      dateFormat: "dd-M-yy", 
      minDate: 0, 
      onSelect: function (date) { 
       var minDate = $(this).datepicker('getDate'); 
       $(this).datepicker('option', 'minDate', minDate); 
       alert("Right"); 
      } 
     }); 

    }); 

はまた、それが好きですかできます。

var today = new Date(); 
    var journeyStartDate = null; 
    var journeyEndDate = null; 

    jQuery('.fa-calendar').daterangepicker({ 
     autoUpdateInput: false, 
     autoApply: false, 
     minDate: today, 
     startDate: jQuery('input[name="startDate"]').value, 
     endDate: jQuery('input[name="endDate"]').value, 
     showDropdowns: true, 
     opens: 'left', 
     linkedCalendars: false, 
     locale: { 
      cancelLabel: 'Clear' 
     } 
    }); 

    jQuery('.fa-calendar').on('apply.daterangepicker', (ev: Event, picker: any) => { 
     journeyStartDate = picker.startDate.format('DD/MM/YYYY'); 
     journeyEndDate = picker.endDate.format('DD/MM/YYYY'); 
    }); 

    jQuery('.fa-calendar').on('cancel.daterangepicker', (ev: Event, picker: any) => { 
     journeyStartDate = null; 
     journeyEndDate = null; 
    }); 
関連する問題