هل من الطبيعي أن يظهر وسم الinput من نوع date بهذا الشكل علي شاشات الهواتف؟

يعتمد الأمر كثيراً على نوع المتصفح الذي تستعمله وإصداره وبالتأكيد النظام التشغيلي الذي تعمل عليه. أنت لم تحدد هل تظهر المشكلة على ios أم android وماهي المتصفحات التي قمت بتجربة التطبيق عليها.

بصورة عامة يمكنك تجربة تجاهل الشكل الإفتراضي للعنصر المستهدف من خلال css وتستطيع وضع التنسيق المناسب للشكل الذي تريد الوصول له.

input[type=date]{
   -webkit-appearance: none;
   ...
}