本文作者:温文曦

wordpress 添加输入时间类型字段及其前端输入显示

温文曦 08-19 605 抢沙发 百度已收录
wordpress 添加输入时间类型字段及其前端输入显示摘要:         公司添加一个活动,要活动增加活动时间,之前用的是摘要保存时间,后面发现保存的时间千奇...

        公司添加一个活动,要活动增加活动时间,之前用的是摘要保存时间,后面发现保存的时间千奇百怪,导致调用的时候不好处理,于是,我就新增了一个活动时间字段,文章类型我的为activitysues,前端使用type="datetime-local"输入时间。

//////////////////////////////////////创建活动字段///////////////////////////////////////////////////////
add_action( 'add_meta_boxes', 'addhuodongmetaboxes' );
function addhuodongmetaboxes() {//创建函数
    add_meta_box(
        'huodong_date',
        '活动时间',//字段的名称,在表单上方显示
        'add_huodongdatemeta',//回调保存函数
        'activitysues',//文章类型
        'side',
        'low'
    );
}

function add_huodongdatemeta($post) {//入职时间回调函数,显示表单,用于新建和编辑显示表单
    // 创建临时隐藏表单,为了安全
    wp_nonce_field( 'add_huodongdatemeta', 'add_huodongdatemeta_director_meta_box_nonce' );
    // 获取之前存储的值
    $value = get_post_meta( $post->ID, 'huodongdatekey', true );
?>
    <label for="huodongdate"></label>
    <input type="datetime-local" id="huodongdate" name="huodongdate" value="<?php echo esc_attr( $value ); ?>" placeholder="输入活动时间">
<?php
}
add_action( 'save_post', 'huodongdate_save_meta_box' );//保存文章时调用保存入职时间,主要是判断字段存不存在,存在就存储到数据库
function huodongdate_save_meta_box($post_id){//把信息存到数据库
    if ( ! isset( $_POST['add_huodongdatemeta_director_meta_box_nonce'] ) ) {
        return;
    }
    if ( ! wp_verify_nonce( $_POST['add_huodongdatemeta_director_meta_box_nonce'], 'add_huodongdatemeta' ) ) {//
        return;
    }
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }
    if ( ! isset( $_POST['huodongdate'] ) ) {//提交的表单为空
        return;
    }
    $huodongdate = sanitize_text_field( $_POST['huodongdate'] );//过滤净化表单数据
    update_post_meta( $post_id, 'huodongdatekey', $huodongdate );//这句就是sql执行语句
}

//////////////////////////////////////创建活动字段///////////////////////////////////////////////////////

        对于<input type="datetime-local">,创建让用户便捷输入日期和时间的输入控件,包括“年”、“月”、“日”,以及“时”和“分”。所使用的是用户所在时区。此控件的样式因浏览器而异;目前支持的浏览器为数不多,桌面端仅有 Chrome/Opera 和 Edge,移动端大多数较新版本的览器提供能使用的实现方案。在其它的浏览器中,此类型会降级显示为简单的 <input type="text"> 控件。

        其实还有其他的关于时间的type,是h5新增的:

wordpress 添加输入时间类型字段及其前端输入显示 第1张

文章版权及转载声明

作者:温文曦本文地址:https://www.vience.cn/blog/624.html发布于 08-19
文章转载或复制请以超链接形式并注明出处文曦博客

赞(6
阅读
分享
 
取消

评论列表 (暂无评论,605人围观)参与讨论

还没有评论,来说两句吧...