0

選択ボックスを使用して、日付ピッカーの日付形式 (mm.dd.yyyy など) を更新する必要があります。

現在、Eyecon の Bootstrap Datepicker を使用しています。ファイル サイズが最小 (8k 縮小) で、必要な日付形式が含まれているためです。また、他のいくつかの日付ピッカーで日付形式の変更をトリガーしようとしましたが、成功しませんでした。

フィドル: http://jsfiddle.net/Yshy7/8/

選択ボックスから日付ピッカーへの変更をトリガーする明白な方法はありますか?

//date format
var dateFormat = $('#custom_date_format').val() || "mm/dd/yyyy";
$('#custom_date_format').change(function() {
    var dateFormat = $(this).val();
});

//start and end dates
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('.j-start-date').datepicker({
format: dateFormat,
  onRender: function(date) {
    //return date.valueOf() < now.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  if (ev.date.valueOf() > checkout.date.valueOf()) {
    var newDate = new Date(ev.date)
    newDate.setDate(newDate.getDate());
    checkout.setValue(newDate);
  }
  checkin.hide();
  $('.j-end-date')[0].focus();
}).data('datepicker');

var checkout = $('.j-end-date').datepicker({
format: dateFormat,
  onRender: function(date) {
    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  checkout.hide();
}).data('datepicker');
4

3 に答える 3

2

を通じて Datepicker オブジェクトにアクセスできます$('.selector').data('datepicker')。これにより、 などの内部オプションを変更できますformat。あなたの場合、separator変化しているのは だけなので、次のようなことができます：


追加のdata-separatorヒントを含むHTML :

<select id="custom_date_format">
    <option value="mm/dd/yyyy" data-separator="/">mm/dd/yyyy</option>
    <option value="mm-dd-yyyy" data-separator="-">mm-dd-yyyy</option>
    <option value="mm.dd.yyyy" data-separator="." selected>mm.dd.yyyy</option>
</select>


フォーマット変更時に日付ピッカー区切りを更新するJQuery :

$('#custom_date_format').change(function() {      
    $('.j-start-date').data('datepicker').format.separator = $(':selected', this).data('separator');
    $('.j-end-date').data('datepicker').format.separator = $(':selected', this).data('separator');
});


ここで、動的フォーマット区切りの日付ピッカー フィドルを参照してください。

(最高のリアルタイム ユーザー エクスペリエンスを実現するために、フィドルにはまだいくつかの機能強化が必要であることに注意してください)

于 2014-06-12T15:06:18.323 に答える