JQuery UI DatePicker - 如何手动打开datepicker

时间:2011-07-22 16:44:27

标签: jquery jquery-ui datepicker

如何手动打开js代码的日期选择器?

6 个答案:

答案 0 :(得分:20)

要显示与id为'your_elem'的输入相关联的日期选择器,您可以使用以下内容:

jQuery('#your_elem').datepicker("show");

答案 1 :(得分:1)

对我来说,建议的解决方案均无效。 日期选择器打开,但随后立即关闭。 所以我使用以下方法解决了这个问题:

add_action( 'woocommerce_checkout_before_customer_details',  'checkout_city_shipping_notice' );
function checkout_city_shipping_notice() {
    ?>
    <style>.shipping-notice.hidden{display:none;}</style>
    <?php
    $city = WC()->customer->get_shipping_city();
    $city = empty($city) ? WC()->customer->get_billing_city() : $city;

    $text  = __("Please allow 5-10 business days for delivery after order processing.", "woocommerce" );
    $class = 'woocommerce-info shipping-notice';

    // Hidden if Timisoara or empty
    //if( empty($city) || $city == 'Timișoara' )
        $class .= ' hidden';

    echo '<div class="'.$class.'">'.$text.'</div>';
}

// The jQuery code to show / hide the custom shipping notice and custom pop-up
add_action( 'wp_footer', 'checkout_city_script' );
function checkout_city_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script src="https://unpkg.com/sweetalert2@8.8.1/dist/sweetalert2.all.min.js"></script>
    <script src="https://unpkg.com/promise-polyfill@8.1.0/dist/polyfill.min.js"></script>
    <script type="text/javascript">
        
    jQuery(function($){
        var fc  = 'form.checkout',           sn = '.shipping-notice',
            bc  = 'select#billing_city',     sc = 'select#shipping_city',
            sda = 'input#ship-to-different-address-checkbox';

        // Function that show hide the shipping notice
        function showHideNotice(t){
            if( $(t).val() == 'Timișoara' || $(t).val() == undefined ){
                $(sn).hide( function(){
                    $(this).addClass('hidden');
                });
            } else {    
                $(sn).hide( 'fast', function(){
                    if( ! $(this).hasClass('hidden') )
                        $(this).addClass('hidden');
                    $(sn).show();

                    // Add a Sweet alert 2 popup
                    swal.fire({
                        title:  '<p style="font-size:20px">Transport gratuit în zona ta!</p>',
                        html:   '<p style="font-size:15px"><b>Comandă de minimum 100 lei și nu mai plătești transport</b></p>',
                        type:   'info' // can be: warning, error, success, info or question
                    });
                });
            }
        }

        // Billing and shipping city change
        $(bc+','+sc).change(function(){
            if($(sda).prop('checked'))
                showHideNotice(sc);
            else
                showHideNotice(bc);
        });
    });
    </script>
    <?php
    endif;
}```

[I don't know how to close the code block :(] We'd also like to set the postal code for those 2 options the pop-up is enabled for, something like:

jQuery(function($){
        var fc  = 'form.checkout',           sn = '.shipping-notice',
            bc  = 'select#billing_city',     sc = 'select#shipping_city',
            sda = 'input#ship-to-different-address-checkbox', >> pc = 'input-text#billing_postcode';

        // Function that show hide the shipping notice
        function showHideNotice(t){
            if( $(t).val() == 'Timișoara' || $(t).val() == undefined ){
                $(sn).hide( function(){
                    $(this).addClass('hidden');
                });
            } else {
              >>  if ($(t).val() == 'Giroc' )
              >>      $(pc).set(307220);
                $(sn).hide( 'fast', function(){
                    if( ! $(this).hasClass('hidden') )
                        $(this).addClass('hidden');
                    $(sn).show();

                    // Add a Sweet alert 2 popup
                    swal.fire({
                        title:  '<p style="font-size:20px">Transport gratuit în zona ta!</p>',
                        html:   '<p style="font-size:15px"><b>Comandă de minimum 100 lei și nu mai plătești transport</b></p>',
                        type:   'info' // can be: warning, error, success, info or question
                    });
                });
            }
        }

        // Billing and shipping city change
        $(bc+','+sc).change(function(){
            if($(sda).prop('checked'))
                showHideNotice(sc);
            else
                showHideNotice(bc);
        });
    });

希望这对某人有帮助

答案 2 :(得分:0)

$('#datepickerid').focus()应该可以解决问题。

答案 3 :(得分:0)

为我工作吗?

    setTimeout(function(){$("input#element_id").focus();}, 200);

答案 4 :(得分:-1)

$(function () {
    $('#DatePicker').datepicker({
        duration: '',
        showTime: true,
        constrainInput: false,
        maxDate: '+1y',
        minDate: '-0d',
        defaultDate: ''
    });
});

答案 5 :(得分:-1)

我有这个问题(在这种情况下,datepicker是Drupal模块的一部分),对我来说是这样的:

$('input.date').focus();
$('input.date').click();

仅使用$('input.date').click();时无效。