在 select 符号后启用日期选择器

Question

我有 2 个字段，符号和日期，如果符号是 select，则在启用日期选择器后，如果没有 select 符号，日期选择器将被禁用。

<script src="{{asset('js/libs/jquery.js')}}" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link href="{{asset('css/bootstrap-datetimepicker.min.css')}}" rel="stylesheet" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>




<div class="form-group col-sm-10">
                {!! Form::label('symbol', 'Symbals:') !!}
                {!! Form::select('symbol_id', [''=>'Choose market']  , null, ['class'=>'form-control', 'id'=>'symbol'])!!}
            </div>
<div class="form-group col-lg-5">
                {!! Form::label('tradedate', 'Traded date:') !!}
                <div class=" input-append date form_datetime" data-date="{{date('Y-m-d H:i:s')}}" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input size="16" type="text" value="" readonly class="form-control">
                    <span class="add-on"><i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>
                <input type="hidden" id="dtp_input1" value="" name="tradedate" />
            </div>

此脚本使用日期选择器，我以日期、时间和 select 月份的形式使用，日期选择器 javascript 可用如下： javascript 使用时间选择器，

<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
    $('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('.form_time').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });
</script>

Answer 1

// use jquery
// event is fired when select change
$('#symbol').on('change', function() {
    // this.value - to retrieve the value of selected option

    // do whatever you want. Give 'id' to your datepicker and you can use 'addClass' to disable datepicker depends on plugin you use

    // for example
    if (this.value == 0) {
        $('#datepicker').attr('disabled',true);
    } else {
        $('#datepicker').attr('disabled',false);
    }
});

更新

我在这里为您创建了 jsfiddle。看它。我想你想要那样的东西。 jsfiddle

在 select 符号后启用日期选择器

Datepicker enable after select symbol

javascript

ajax

jquery

datepicker

jquery-ui-datepicker